Sign in to follow this  
Followers 0

Need .css expert advice


12 posts in this topic

Posted

Hello I created a website for our company using the system Abantecart. It is version 1.1.9.

When I set everything up I used the default html 5 template for the theme. I then modified that theme for a new look.

 

You may see the site here: http://www.hygienics.com

The problem I am having is that the site when viewed on an iPad or smaller devices is mostly out of whack. I ask you to look at it on a large desktop or notebook screen and then on an iPad.

This is responsive hence why the problem. I have the ability to create an additional store in the admin which I will do to make a mobile phone site. That will be done later but for now does anyone know how I could make this not responsive so on an iPad or smaller size it will not look jumbled?
 

I know iPads can make it all fit well if not responsive like the iPhone it does something where everything fits on the screen which is pretty cool. I have looked at all the .css code but it seems I am missing something. Feel free to study the code and let me know what I should try.

 

Thanks,

Share this post


Link to post
Share on other sites

Posted

does anyone know how I could make this not responsive so on an iPad or smaller size it will not look jumbled?

 

?

 

The point of a responsive design is to make it usable on phones and tablets without the need to zoom in and out. To have a ui not cluttered on small screens and/or bigger contents without the need to zoom in.

 

If it looks "jumbled" (is it even a word? what does it means?) it means the responsive design is not well made.

To remove the responsive design you need to remove the media queries like this one @media screen and (min-width: 480px) { } (keep the code inside the brackets). More works might be needed if the responsive design is flexible (fluid) grids too cause a flexible (fluid) grids design coupled with a responsive design will likely look like **** on a widescreen 1080p+ monitor (or the other way around it rarely looks good on both hd or lower res etc ...)

Share this post


Link to post
Share on other sites

Posted

I know that. By default it could adapt to it using the theme that comes built in but when I modified things that is when it did not work well I just noticed. still it would be best non-responsive

Share this post


Link to post
Share on other sites

Posted

Remove all @media parts in the css.

If it has print styles you can keep those print mediaqueries those are not part of the responsive css.

Share this post


Link to post
Share on other sites

Posted

Thanks Seahorsepip. So just removing @media will leave it how should I say static?


Also I should mention that there are several .css files. So I guess I would remove them from all of them correct?  I will be making a backup just in case of all the files.

Share this post


Link to post
Share on other sites

Posted

I was able to make the default html 5 template not responsive for now. I still have one issue I cannot figure out.

If you go to www.hygienics.com and look at the site full width you will see it is OK. When you resize the browser nothing gets jumbled anymore but you will notice the header and footer only go from left to right a certain width. It does not go across and fill the space.

If you open the browser a little more by dragging the sides you will see it starts to move. I really would like it to fill it 100% without being cut off. I added in the .css width:100% and it did not work.

What does work is if I add a size in px like 1000px but that is not always accurate so I would rather have 100%.

I am not seeing something in the code. Perhaps someone can tell me what it is.

Thanks

Share this post


Link to post
Share on other sites

Posted

.headerstrip .container {
background: #A6CEE3;
height: 72px;
width: 1210px;
}
.headerstrip {
background: none;
}

Add above css to your stylesheet.

And the website design is not really good by the way :/

Share this post


Link to post
Share on other sites

Posted

OK. May I ask why you say that?

Share this post


Link to post
Share on other sites

Posted

OK. May I ask why you say that?

The design looks a bit outdated and is not something a user remembers at all, I would recommend using a primary color and not too much unnecessary colors.

I can make a quick example if you like.

Share this post


Link to post
Share on other sites

Posted

yeah... I am not fond of the layout...

Share this post


Link to post
Share on other sites

Posted

Thanks for the input. Well I did this based of the template that comes with the cart. If you can show me an example please go ahead.. One of things I did was try and make things big since a lot of older people will probably visit because of continence issues.

Share this post


Link to post
Share on other sites

Posted

Thanks for the input. Well I did this based of the template that comes with the cart. If you can show me an example please go ahead.. One of things I did was try and make things big since a lot of older people will probably visit because of continence issues.

Tried to make a quick mockup of a simpler site:

t0kv8.jpg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.