Welcome to WebmasterWorld Guest from 3.80.4.76

Forum Moderators: not2easy

Message Too Old, No Replies

Site css and responsiveness and max width question

     
11:52 pm on Feb 25, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Dec 19, 2004
posts:991
votes: 14


Hi, so I am setting a new site design with CSS.

I wanted to know would 100% width be better or say, setting a max-width of 1600px be advisable?

That would take care of the large monitors no? Kindly advise. Thanks!
4:56 am on Feb 26, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15809
votes: 846


Width of what? Pictures can be infinitely wide, but any text areas need a max-width in ems or it will be unreadable.
5:07 am on Feb 26, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Dec 19, 2004
posts:991
votes: 14


Width of all the pages of my site.. i've setup for 100% but I've been advised to set max-width of all the pages to 1600px
5:59 am on Feb 26, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4460
votes: 332


Good idea, especially if there are lines of text on the page. It can be difficult to read long lines of text. Even better to break the width into columns of content that can nest the least critical parts of content under the main content at narrower widths.

An example is this page - you can stretch it across an extra wide monitor, but it gets hard to read. The sidebar gets wider, but the lines are still too long for comfortable reading. I may be wrong but I would think it is rare that anyone would want to see pages wider than 1600 px - unless for videos.
3:34 pm on Feb 26, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Dec 19, 2004
posts:991
votes: 14


So what's the css code? I have following:

#somediv {
width: 100%;
max-width: 1600px;
}
4:59 pm on Feb 26, 2018 (gmt 0)

Full Member

Top Contributors Of The Month

joined:Apr 20, 2017
posts:334
votes: 73


You might want to add "margin:auto;" if you want the div to be centered. but all depends of the surrounding elements.
9:39 pm on Feb 26, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15809
votes: 846


width: 100%;
There is no need for this unless you're overriding some higher-level setting. A width of 100% is the default for almost everything.

Be sure to test in different browsers, because some get confused when you have both a "width" and a "max-width" (or "min-width") declaration applied to the same element.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members