CODEWITHSUNDEEP
htmlcssresponsive-design
Jade
Jade

Reputation: 3

Responsive design for over 1000px screen resolution

I'm making my website responsive using Dreamweaver CC. I'm having trouble with screen size above 1000px.

In dreamweaver there are three options at the bottom for responsive web design, there are desktop 1000px and less, tablet 768px and less, mobile 480px and less. So my website looks great with all these settings, meaning it looks great at 1000px less. But my screen at home is 1680 x 1050px, so when I view my site fullscreen the navigation bar is longer than the header banner image at the top.

Is there a way to stop the site from going above 1000px? Meaning even if it were viewed on a widescreen of 1680 x 1050 the site would just stay 1000px and maybe fill in some margin space on either side? Or should I just build the site with a banner of say 1600px?

Upvotes: 0

Views: 1799

Answers (1)

Ace
Ace

Reputation: 969

This really isn't something I would consider related to responsive design but more along the lines of a large screen preference. All out responsive design would have styles for large screens.

Ideally for your situation you could have a wrapping div and apply a max-width on that. You could also go old school and just apply it to the body but probably not a good idea.

<body>
   <div class="site-wrapper">
    ...rest of website...
   </div>
</body>

With the following css to solve your issue. Only let the .site-wrapper grow to 1000px and have equal margins on either side.

.site-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

Here is a jsbin when viewed over 1000px you can see the red background which is applied to the body.

http://jsbin.com/mifolecahi/1/edit?output

Frameworks like bootstrap use a container class to only have content reach a certain width. This allows for parent containers to extend the full width. Which is also seen in the footer of the jsbin.

Upvotes: 1

Related Questions