Changing the Layout for Small Screens CSS3

With the wide-screen variation completed, let’s turn our attention now to smaller screens. First off, we’ll add a second media query right below the first one you added, targeting viewports that are narrower than 760 pixels wide:

This tells the browser that we want the styles that we’ll add within this media query to apply to screen media types in viewports up to a maximum width of 760 pixels. Why have I chosen 760 pixels? Because this width prevents these styles from being applied to either maximized windows on 800 by 600 resolution desktop monitors or to iPads, which have a screen size of 768 by 1024 pixels. In both of these cases, I want the normal styles to apply, as I think the layout looks fine at these sizes. But under 760, the layout starts looking squished, with an increasing possibility of content overflowing its containers.

Once again, let’s start by changing the styles on the nav bar to better fit the available space. When the window is narrowed, the entire nav bar drops onto a line below the logo, which is fine, but it stays rightaligned, which doesn’t look as good when it doesn’t have the logo to its left. So let’s change the styles on the nav bar to left-align it when it’s on a line below the logo:

You can see the difference that these styles make . It’s a small change, but it’s a nice little bit of polish that only took a small bit of CSS to accomplish.

The nav bar can’t fit beside the logo in narrow windows, so we switched it from the right side to the left using a media query.

The nav bar can’t fit beside the logo in narrow windows, so we switched it from the right side to the left using a media query.

Next, let’s get rid of the two columns in the introductory paragraph— they’re awkwardly narrow when the window is under 760 pixels . Change the column count to 1 in a new h1 + p rule in the second media query:

The columns can fit only two or three words per line in narrow windows.

The columns can fit only two or three words per line in narrow windows.

Now the line lengths are more reasonable in the introductory paragraph , but the three side-by-side columns underneath that paragraph are still extremely narrow. Let’s fix them next.

Reducing the column-count back to 1 in narrow windows makes the introductory text better-looking and easier to read.

Reducing the column-count back to 1 in narrow windows makes the introductory text better-looking and easier to read.

The featured product boxes are very narrow, having to sit side by side in a small viewport.

The featured product boxes are very narrow, having to sit side by side in a small viewport.

Right now, each featured product box is a div that’s floated to the left. Removing the floats will make them stack on top of each other instead, filling the whole width of the main content div. But when they’re stacked on top of each other, the illustration that goes with each feature box doesn’t look as nice positioned at the top of the box— it makes more sense to put the illustration on the left side of the box.

So add this new rule to the media query:

This rule stops the feature boxes from floating and removes their percentage widths. It also removes the top padding from each box and replaces it with left padding, providing room for each illustration—a background image—to sit in on the left side of the box.

Having the featured product boxes stack, with their icons on the left instead of the top, looks better in the limited space of narrow windows.

Having the featured product boxes stack, with their icons on the left instead of the top, looks better in the limited space of narrow windows.

There’s only one more change to make to the narrow version of the page. The right column is now fairly thin, increasing the chance that long words will overflow it. The headings in the column are in the greatest danger, since their all-caps style makes them take up so much room. We can lessen their chance of overflowing by decreasing their text size and letter spacing:

You can see the change that this rule produces . Again, it’s a subtle change, but it’s a nice little piece of insurance to keep the text contained and thus more readable.

Reducing the size and spacing of the headings in the sidebar decreases the chance that text will overflow when the sidebar gets really narrow.

Reducing the size and spacing of the headings in the sidebar decreases the chance that text will overflow when the sidebar gets really narrow.
This completes the changes we’re going to make for the narrow version of the bakery page . Save your page and view it in an up-to-date browser. Resize the window to see the design change at very narrow and very wide widths.

The completed design for narrow viewports

The completed design for narrow viewportsThe completed design for narrow viewports

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

CSS3 Topics