{"id":1109,"date":"2023-03-28T16:04:50","date_gmt":"2023-03-28T15:04:50","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/?page_id=1109"},"modified":"2024-03-20T15:15:14","modified_gmt":"2024-03-20T15:15:14","slug":"responsive-css","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/authoring-a-website\/week-5\/responsive-css\/","title":{"rendered":"Responsive CSS"},"content":{"rendered":"\n

Last week you learned how to go through the stages of a project and saw an example from the initial client brief through to the delivered and tested website. <\/p>\n\n\n\n

While the client never mentioned that the website should work on a mobile phone in portrait mode it is an unspoken requirement. A website should be usable on any common web browsing device. More and more people use their phones to access websites so this should be kept in mind when you are designing one.<\/p>\n\n\n\n

With CSS you can use the @media rule that could be used to only apply certain CSS rules when a screen was above or below a certain width. You could also use it to detect the orientation of a phone so that you would know if it was being used in portrait or landscape mode.<\/p>\n\n\n\n

We will use these rules to make the garage website more responsive. But first we need to design what the site will look like at different screen widths. Will we just have the two different designs, one wide for desktops, one narrow for phones. Or will we have three or more that alter the layout as the screen gets wider.<\/p>\n\n\n\n

For this project lets keep it simple with just two designs. Pick a width, on screens more narrow than that the narrow content CSS loads, for those at or above that width the wide content CSS loads.<\/p>\n\n\n\n

Now look at your existing site and think about which parts would be hard to read or use on a portrait mobile device. A full width block of text or image is fine. They can still take up the full width although the text will now spread over more rows. Where you have side by side columns it is worth converting them into full width containers that stack vertically. This applies to menus too. If there are enough items in the menu that it might be difficult to select the right link when they are crushed together horizontally then it is worth converting to a vertical list.<\/p>\n\n\n\n

\n
\n
\"Example
Example mobile home page<\/figcaption><\/figure><\/div><\/div>\n\n\n\n
\n
\"Example
Example mobile services page<\/figcaption><\/figure><\/div><\/div>\n\n\n\n
\n
\"Example
Example mobile car list page<\/figcaption><\/figure><\/div><\/div>\n<\/div>\n\n\n\n
\n
\n
\"Example
Example mobile car details page<\/figcaption><\/figure><\/div><\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\"Example
Example mobile contact page<\/figcaption><\/figure><\/div><\/div>\n<\/div>\n\n\n\n

You don’t need a new wireframe for the printed details page as that still comes out of a printer rather than displayed on a screen.<\/p>\n\n\n\n

If the container on the wide layout was using flex then you can just change the flex direction from rows to columns for the narrow layout and adjust the child elements to take up the full width of the flex container. <\/p>\n\n\n\n

If the container on the wide layout was using grid then you can change the number of columns in the grid to 1 for the narrow layout.<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <title>Mobile Test<\/title>\n  <style>\n#grid {\n  background-color: cyan;\n  display: grid;\n  grid-template-columns: auto auto auto;\n}\n\n#flex {\n  background-color: pink;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n}\n#flex div {\n  flex-basis: 33.33%;\n}\n@media screen and (max-width: 768px) {\n  #grid {\n    grid-template-columns: auto;\n  }\n\n  #flex {\n    flex-direction: column;\n  }\n  #flex div {\n    flex-basis: 100%;\n  }\n}\n  <\/style>\n<\/head>\n<body>\n  <div id=\"grid\">\n    <div>1<\/div>\n    <div>2<\/div>\n    <div>3<\/div>\n  <\/div>\n  <hr>\n  <div id=\"flex\">\n    <div>1<\/div>\n    <div>2<\/div>\n    <div>3<\/div>\n  <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
In the above example both the grid and flex containers have 3 child elements. On screens that are no more than 768px wide then the child divs are stacked vertically. Once the screen is at least 769px wide then the child divs are placed beside each other in a horizontal row.<\/p>\n\n\n\n
The @media rule is used in media queries to apply different styles for different media types\/devices. This allows for more responsive designs to be tailored to different formats.<\/p>\n\n\n\n
Media queries can be used to check many things, such as:<\/p>\n\n\n\n