Optimized layout for screen resolutions exceeding 1000 pixels wide

Question

Optimized layout for screen resolutions exceeding 1000 pixels wide

As I work on making my website responsive using Dreamweaver CC, I'm encountering a problem with screen sizes larger than 1000px.

In Dreamweaver, there are three options for responsive web design at the bottom: desktop 1000px and less, tablet 768px and less, mobile 480px and less. My website looks great with all these settings up to 1000px. However, when I view it in fullscreen on my home screen with a resolution of 1680 x 1050px, the navigation bar ends up being longer than the header banner image at the top.

I am wondering if there is a way to prevent the site from expanding beyond 1000px, regardless of the screen size. Perhaps filling in some margin space on either side? Or should I consider building the site with a banner size of 1600px?

html css responsive-design

Answer 1

Answer №1

While this may not directly relate to responsive design, it does address the issue of large screen preferences. A fully responsive design would include styles for large screens as well.

In your case, you could create a wrapping div and apply a max-width to it. Alternatively, you could also add the max-width property to the body element, although that might not be the best approach.

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

To resolve your problem, you can use the following CSS code. This will limit the .site-wrapper to expand only up to 1000px width and keep equal margins on both sides.

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

You can view how this works in action by checking out this jsbin link where a red background is displayed when the viewport width exceeds 1000px.

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

Frameworks like Bootstrap typically use a container class to restrict content width, allowing parent containers to extend the full width, as demonstrated in the footer of the provided jsbin example.

Answer 2

While this may not directly relate to responsive design, it does address the issue of large screen preferences. A fully responsive design would include styles for large screens as well.

In your case, you could create a wrapping div and apply a max-width to it. Alternatively, you could also add the max-width property to the body element, although that might not be the best approach.

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

To resolve your problem, you can use the following CSS code. This will limit the .site-wrapper to expand only up to 1000px width and keep equal margins on both sides.

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

You can view how this works in action by checking out this jsbin link where a red background is displayed when the viewport width exceeds 1000px.

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

Frameworks like Bootstrap typically use a container class to restrict content width, allowing parent containers to extend the full width, as demonstrated in the footer of the provided jsbin example.

Optimized layout for screen resolutions exceeding 1000 pixels wide

Answer №1

Similar questions

Using a custom HTML file as a container in an Android WebView

Navigating up and down effortlessly using bootstrap

Maintaining the layout of blank lines in HTML content within JEditorPane

Adding an image to an HTML page

Is there a file outside of the website's root that needs to be linked?

Unlocking new perspectives with a click

Change the color when hovering over the select box

An issue occurred during the building of the module (from ./node_modules/sass-loader/dist/cjs.js) and resulted in

How to horizontally center a div between two floated elements

Polymer event / callback for appending new child nodes

Empty spaces in an "option" html gadget on a website created with Structr 4.1.2 Community edition

What is the reason for Safari 13 not displaying the outline during focus when a transition is applied?

What is the process for invoking a server-side Java function from HTML with JavaScript?

How to make Vuetify grid columns wrap and fill the full height

Is it necessary to download and install plotly if I am using the cdn in my HTML file?

Incomplete filling of the SVG element is observed

Positioning my login form in the right spot is proving to be a challenge

Can CSS be used to target HTML elements that come after another regardless of their position in the document?

jquery unclean data, in need of the jquery ui popup dialog

Tips for choosing a table row that is not the first or last cell