Need Tutorial on Viewport Code

HTML & CSS
1

My next goal (after conquering the enlarge-on-mouse-hover challenge) will be to be sure that my code displays as I’d like it to on different sized screens: smart phone, iPad, and desktop. If there are others I should be concerned about, please tell me.

I’m looking for a good tutorial and articles that will teach me what I need to learn about coding for different display devices.

TIA

2

I have already explained this a few times now in some detail but for a recap you must remain device agnostic. There are almost an infinite number of screen sizes available and you can’t cater individually for them.

Even on desktop there are a myriad of screen resolutions not to mention that not everyone works with browsers maximised but may have their apps tiled or just open enough to have multiple apps visible.

Some phones have screens bigger than tablets. Some tablets have screens bigger than laptops. Some laptops have screens bigger than desktops..,.. you get the picture :slight_smile:

You can’t chase devices or certain screen sizes as they don’t really exist.

What you must do though is concentrate on the needs of your design instead. On your desktop grab the edge of your browser window and make it smaller one pixel at a time and when the design breaks or looks awkward or you get horizontal overflow then you add a media query at that point and make the design look better. In this way you have more or less catered for all devices now and in the future without having to know what they are.

If you have devtools open while dragging the window smaller it tells you the screen size or you can use the responsive option in device mode for an easier view.

I once again refer you to my original demo that is fully responsive with just a few lines of code. This doesn’t happen by accident but is part of the build process. Every time I add an element to the page I open and close the browser window to see the effect at different screen sizes and make my choices then. I do not build a whole page and then say I’m going to make it responsive. I build responsiveness into the page from the very first line of code.

If you build fluidly and stop fixing widths and heights you can create a responsive site quite easily without resorting to hundreds of media queries.

There is no magic screen size as the viewport is basically a piece of paper that has no edges as far as you are concerned. It’s like guiding sheep into a pen and your design needs to be fluid and adapt to contain and guide any stray sheep :slight_smile:

I suggest you start with my demo of your page and see how I have constructed the media queries.

I’ll post some useful links later when I get back to my desktop :slight_smile:

1 Like
3

Here’s a few to get you started:

This next link is good but chooses the mobile first option which is designing for mobile and then using min-width media queries to make better on larger devices. I personally never use this approach as historically all my work was presented to me in desktop form and I still find it easier to go from a desktop layout down to a smaller screen layout. However the article does raise all the points you need to consider.

Don’t take notice of any articles that tell you to use multiple min and max width media queries as that’s not viable for a small site and not necessary. Keep it simple. Use max-width media queries and then go down in size as required which I feel is the easier method.

Remember that media queries are not exclusive and fall into the cascade where they are placed so if you add a different value after a media query than that different value will be in effect. Also make sure you order them properly.

For example if you had code like this:

body {
  background: yellow;
}

@media screen and (max-width: 800px) {
  body {
    background: green;
  }
}

@media screen and (max-width: 1200px) {
  body {
    background: red;
  }
}

What colour would you expect the background to be at screen width less than 800px?

The media query says it should be green but it will be red because the next media query will come into effect because anything less than 1200px will be red (800px is leass than 1200px).

To be correct you would need this:

body {
  background: yellow;
}

@media screen and (max-width: 1200px) {
  body {
    background: red;
  }
}
@media screen and (max-width: 800px) {
  body {
    background: green;
  }
}

The media queries go down sequentially and so everything is logical and the background will be green at less than 800px.

Lastly what colour would you expect if instead I had written this?

@media screen and (max-width: 1200px) {
  body {
    background: red;
  }
}
@media screen and (max-width: 800px) {
  body {
    background: green;
  }
}

body {
  background: yellow;
}

The only colour the background will be is yellow because the last rule in the cascade sets the body to yellow. The styles in the media query are over-ridden.

Therefore the placement of media queries is paramount. Some people like to group them all at the end of the code where they can manage them easily which is fine if that’s the way you work. Generally I work on larger pages and I keep the media queries next to the original rules within reason so that when I make changes I have the whole blocks together instead of jumping all over the stylesheet,

For a small site like yours you could probably keep the media queries at the end of each pages styles as I believe you are keeping all pages in one file.

Whatever approach you take it must be consistent and logical. :slight_smile:

4

Thanks, Paul.

Earlier lessons went over my head. I was not yet ready to embrace the topic of designing with different screen sizes in mind. I think it’s time I dove into this subject and learned a good deal because I checked statistics on my web page and discovered few desktop size viewers with most being on phones or ipads.

I’ll chew on the topics you posted and, as usual, will probably be back with more questions as I encounter issues I can’t resolve.

Thanks, again, for your help and your patience.

1 Like