Lessons menu
CSS - intermediate - Lesson nr. 14
Responsive webpages and other useful features

What this lesson is about?
In this lesson we will apply some solutions to get our website’s content adapted to the browser window’s / screen’s size, so the user should not be forced to use horizontal scrolling. This means responsiveness in a webpage. We will use relative sizing, defining different sizes, objects for different screen sizes etc.

We will use for the first time the <meta> tag to add information about our webpage.


New rule:

@media – using this rule we can adapt our website to different screen sizes. We take in consideration the resolution, height, width and orientation of the screen.

New HTML tags:

<meta> - this tag is used to add useful information about the page to the <head> part of the page. This information does not appear in the browser, it is used by the browser and search engines.
<picture> -  this tag is used to define alternative images for different display sizes.

New CSS properties:

min-width – with this property we can add to any sizable element a minimal width value. This means that the element cannot be smaller, regardless of the size of the device or browser window the content is displayed.
max-width – with this property we can add an upper limit to an elements size. The element’s width cannot be bigger.

Example for <meta> information:
<meta charset="UTF-8"> - the character set used in a website, can be defined in the editor, on the webserver and can be stated in the HTML code too. The browser needs to know the character set used, to show the content correctly.
<meta name="keywords" content="programming, teaching, courses, lessons, HTML, CSS, Coders Work">
<meta name="description" content="Personal website, teaching about coding in HTML, CSS and JavaScript">
<meta name="author" content="Mike"> - these may be used by search engines to categorize your website. Nowadays, this is not the only point of view used to define your page.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - this setting is used by web developers to ensure that their content appears correctly on every device. It is needed mostly on mobile devices.

It means that the content’s sizes (expressed in percentage) are calculated compared to the device size and at first appears with no zoom.

What makes pages responsive?
  • Defining size in percentage, using max-width and min-width – the element is resized relative to the parent element (a <div> segment, table or grid) and eventually to the browser window. We can define a minimum or maximum width, not to get bigger and smaller than a given size. There are other relative sizes, like em – relative to the base font size.
  • Setting the viewport - mentioned above – it does not work if you define sizes in pixels (instead of relative sizing).
  • Defining different pictures for different sizes – we use the <picture> tag to define these pictures.
  • Background image settings - we can use the setting background-size: cover; to stretch the picture to fill the container element, we can use background-size: 100% 100%; to obtain the same effect. It can be useful if the container’s size is changing.
  • Defining text size relatively – we can define font-size not only in pixels, we can use vw as measurement unit. This means resizing relative to the viewport (display/browser window size).
  • Choosing the best way of positioning elements – both or float, display: inline-block result in malleable positioning – the elements get in a new row if they do not fit in the row.
  • Using frameworks – proficient web developers use frameworks to ease their work. Frameworks mean using CSS files containing standard-compliant CSS classes. Frameworks may use JavaScript functions applied to the design elements.  You can read about Bootstrap, W3.CSS

Example on <picture> tag:

In the example above the browser chooses between two pictures: if the browser windows width is bigger than 850 pixels the picture with the book will appear, else the smaller picture with the boot. We can use the same pictures’ different sized versions.

Example on @media rule – media query:

There are four buttons with the measurements expressed relative to the font size.

There are different settings for browser windows with the width under 600 pixels, and above.

In a small window the buttons are vertically arranged, in a larger window horizontally. With this rule there are only two states, if we were to use floating for example the buttons would get in a column one by one getting through different states.

Guidance for responsive website: for a fully responsive website, the key element is to use widths expressed in percentage or viewport units or max widths. For more information, look up the responsive website concept.


1. Add the necessary information about our site to the HTML pages (meta tags):
Set the character set to UTF-8.
Add keywords: programming, teaching, courses, lessons, HTML, CSS, Coders Work
Add description: Personal website, teaching about coding in HTML, CSS and JavaScript
Add the viewport setting too.
View the result
2. Before making any styling for the responsiveness of our site, we need to reset the styling for some of our mostly used html tags, which can have different  styling applied by default (margins, paddings, etc.), which can differ from a browser to another. This procedure is called CSS reset. You can look it up for more information about it.
In the style.css file’s beginning, insert the following resets:
html, body, div, span, h1, h2, h3, h4, h5, h6, p, img {
               margin: 0;
               padding: 0;
               border: 0;
               font-size: 100%;
               font: inherit;
               vertical-align: baseline;
View the result
3. Apply changes to the style.css, to make our pages responsive:
Change the width into max-width for the following elements: #header, #menu, #content, #footer.
Now, if you resize the browser window, you’ll notice that there will be no horizontal scrolling for a good while.

Also, not to have the content from side to side, set 20 padding to left and right to the body.
View the result
4. Apply changes to the gallery.html and style2.css:
Write a media query, where at 700 pixels screen width, the small pictures appear 2 on a row, instead of 3.
View the result
5. Apply changes to the style.css to correct the main sticky menu’s responsiveness. Write a media query, that when the browser reaches to 900 pixels width, their padding will change to 10 pixels in all directions.
View the result
1. How does the text appear in a window of the width smaller than 600 pixel?
<p> Hello! </p> <p> Welcome! </p>
p { display: inline-block;  color: red; }
@media screen and (max-width: 600px) {
             p {  display: block;  color: green; }
2. What is the difference between the two tags?
             <source media="(min-width: 900px)" srcset="01.jpg">
             <source media="(min-width: 500px)" srcset="02.jpg">     
             <img src="03.jpg">
             <source media="(max-width: 500px)" srcset="01.jpg">
             <source media="(max-width: 900px)" srcset="02.jpg">
             <img src="03.jpg">
3. How will the text appear if we set it at font-size: 5vw;?
4. With the settings below, what will be the size of the image?
<div><img src="pic.jpg"></div>
div { width: 600px;}
img {width: 50%;}
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept