• 0

Need .css expert advice


Question

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,

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

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 ...)

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0
.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 :/

Link to comment
Share on other sites

  • 0

OK. May I ask why you say that?

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

This topic is now closed to further replies.