Main container not stretching to 100% in CSS when you view to small device

HTML & CSS
1

I have very strange problem in my client. Website
I have develop non responsive website , Very simple HTML/CSS base.
Here is the URL: http://lawfirst.com.au/index.html

When you view it on small device menu disappear and In relation to the 3 rectangular boxes at the bottom. ‘Our services’, ‘Code of Conduct’ and ‘About Us’. Our Services and Code of Conduct are next to each other while About US is displayed underneath. This was not the case before, I do not know why this happened.
I try to fix my css but can’t able to solve the problem.
in my main “#maincontainer{width:100%;}” i use overflow:hidden; but it hide horizontal scroll bar.

I want every thing to be fix on there place , not change there place because it is non responsive website.

Can anyone please tell me where i am making mistake.

Thanks

2

Those boxes have a fixed pixel width…Those boxes should be stacked vertically. Do you not want this for mobile? I do not understand what the issue is here.

3

Hi,

On some elements you are using max-width:1171px and on others you are using width:1171px;

If you want this a fixed width then change the max-widths to width:1171px instead. Otherwise the max-width elements will get smaller with screensize and things will move around while inner elements that you have set to width:1171px will stick out.

You have to do one or the other. If you have a max-width of 1171px then you need to ensure that all elements can re-flow and scale smaller to fit in the fluid width.

4

Guy i don’t want to make it responsive and also don’t want this website for mobile.

If you check in firefox using firebug it shows #maincontainer different and i set its wdth 100%;

I want every thing to be remain on there place no change even if we screen size change.

5

Know i use this technique

#maincontainer{width:100%; overflow:hidden;}

Is this a good practice ?

6

Yes , I know that’s why I gave you the right answer.:slight_smile:

Makes no difference what you set maincontainer to because it was the inner elements that had width and max-width applied The maincontainer needs no width but does need a min-width of 1171px.

No that is very bad as it makes the content unreachable on any screens smaller than 1171px because there will be no scrollbar. Remove that whole rule and replace it with min-width:1171px.

7

Know i have reset every thing and upload website on new location

http://moghulweb.com/LAW/
I try min-width:1171px also not working
max-width:1171px is also not working.
If you squeeze the website you will see on top mobile number gone then menu gone etc…

8

Finally i have found the solution.
I have search over internet and download HTML template check there code finally i got this and it works fine
I just make slight change in css
body{min-width:1171px;}
and it fix all the things.
Know when you squeeze the page div not disturb.

9

I already gave you the solution but you didn’t seem to apply it.,

That would have been a better solution as min-width on the body is not as reliable in older browsers.

3 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.