Omnifood Project – Responsive Web Design

Question 1

What will happen in case of conflicing CSS with respect to responsive design?

Answer 1

The last bit of CSS will apply:

@media (max-width: 1200px) {

Will check display until 1200px
And then 800px.
Etc..

Question 2

How to simulate different devices?

Answer 2

Inspect menu, pick devices to simulate

For testing, use the responsive option, then you can drag the window

Question 3

What is the best method of determining breakpoints?

Answer 3

Drag the screen and wait til it breaks

Whenever design starts to break, a break point is inserted

Question 4

Which meta tag is absolutely crucial for responsive web design?

Answer 4

<meta></meta>

Scale is initially 100%
It will make so the page meets the screen width

Question 4

Why not use pixels in responsive design?

Answer 4

Reason is that using pixels will not adjust to the user’s font size settings in the browser

Also not to the user’s zoom level

Therefore setting font-sizs to percentage and NOT to pixels

Question 5

What file to add for the queries? And how to attach it to HTML?

Answer 5

Add a new CSS file and name it queries.css

Add the HTML a new line:

<link></link>

<link></link>

<link></link>

Question 6

What about font size in media queries

Answer 6

rem and em do NOT depend on html font-size in media queries!

Instead, 1rem = 1em = 16px

Question 7

Process of determining max width:

Answer 7

1. Determine screen size in pixels
2. Divide by 16 (1 rem is 16px)
3. Round of (in this case 84 rem)

@media (max-width: 84em) {
.hero {

Also remember:
html {
/* font-size: 10px; /
/ 10px / 16px = 0.625 = 62.5% /
/ Percentage of user’s browser font-size setting */
font-size: 62.5%;
}

Question 8

Best practise regarding amount of media queries?

Answer 8

It is not a good practise to add 10+ media queries to fix every single problem

Question 9

So you have a gallery of 3 columns and you want to make it 2. What would you do given below 1344px?

Answer 9

@media (max-width: 84em) {

.hero {
max-width: 120rem;
}

.gallery {
grid-template-columns: repeat(2, 1fr);
}
}

Notice the repeat function that will just repeat the pattern

Question 10

What are prerequisites for responsive web design?

Answer 10

Fluid grid
responsive images
responsive units (rem)

Question 11

In responsive design, what to do with the font-size?

Answer 11

Scale it down.

1. Determine pixel size, i.e. 8px
2. Then do 8px / 16px = 0.5
3. The font-size decreases then to 50%

@media (max-width: 75em) {
html {
/* 8px / 16px */
font-size: 50%;
}

Question 12

How to turn the hero simply into 1 column?

.hero {
max-width: 130rem;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}

Answer 12

.hero {
grid-template-columns: 1fr;
}

Question 13

A very good practise when tweaking sections?

Answer 13

Hold the css style file next to the queries file for extra ease

Question 14

Where in the HTML doc should you add the mobile buttons?

Answer 14

Add it in the header section just before closing

Question 15

Where can you find the mobile buttons?

Answer 15

Menu and Close button are taken from ionicons

Question 16

Here’s the buttons in HTML:

<button>
<ion-icon></ion-icon>
<ion-icon></ion-icon>
</button>

How to add them do the CSS documents?

Answer 16

Add them to the style sheet. Then in the responsive sheet you make them visible again. Notice the display set to none.

Add to style sheet:

.btn-mobile-nav {
border: none;
background: none;
cursor: pointer;
display: none;
}

.icon-mobile-nav {
height: 4.8rem;
width: 4.8rem;
color: #333;
}

Question 17

How can you in CSS select an element based on an attribute?

<li>
<ion-icon></ion-icon>
</li>

Answer 17

In CSS it is possible to select based on an attribute
We use therefore square brackets

.icon-mobile-nav[name=”close-outline”] {
display: none;
}

Question 18

Say you want to show the mobile buttons as of a screen size below 944px, what to do?

Answer 18

You show the button again:

@media (max-width: 59em) {
…

/* MOBILE NAVIGATION */
.btn-mobile-nav {
display: block;
}

Question 19

In mobile view (or small tablets), the main nav is not visible. However, this is not enough.
What extra measure do we need?
And how to write it in CSS?
And how to set it back again?

Answer 19

Making it unaccessible to mouse and keyboard
Hide it from screen readers

/* 1) Hide it visually */
opacity: 0;

/* 2) Make it unaccessible to mouse and keyboard */
pointer-events: none;
 
/* 3) Hide it from screen readers */
visibility: hidden;

Set it back:
opacity: 1;
pointer-events: auto;
visibility: visible;

Question 19

What to do with the main nav bar for smaller displays?

<nav>
<ul>
<li><a>How it works</a></li>
Etc..
</ul></nav>

Answer 19

Modify it and use it in the mobile nav query

1. Position it absolutely because you want it at the top
2. Best is probably to set the header to relative then
3. Make it occupy the entire screen with width: 100% and height: 100vh;
4. Set direction on unordered list

Full code:
.main-nav-list {
flex-direction: column;
gap: 4.8rem;
}

.main-nav {
background-color: rgba(255, 255, 255, 0.97);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;

display: flex;
align-items: center;
justify-content: center;

Question 20

What mobile buttons should you alter between?

Answer 20

Menu button and Close button

1. With JS add / remove to classname nav-open
2. In CSS define open and close states

.nav-open .main-nav {
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: translateX(0);
}

.nav-open .icon-mobile-nav[name=”close-outline”] {
display: block;
}

.nav-open .icon-mobile-nav[name=”menu-outline”] {
display: none;
}

Question 21

How to make the nav bar slide in from the right on small device?

Answer 21

Without nav:
.main-nav {
background-color: rgba(255, 255, 255, 0.97);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
transform: translateX(100%);

On nav open:
.nav-open .main-nav {
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: translateX(0);
}

Question 22

When letting the nav bar slide in from the right, a problem of scrolling arises. How to resolve this?

Answer 22

It has to do with overflow. Best to set it on the whole document so it is applied everywhere:

html {
font-size: 62.5%;
overflow-x: hidden;
}

body {

/* Only works if there is nothing absolutely positioned in relation to body */
overflow-x: hidden;
}

Important: Make header relative. Already did this in a previous step. It is important else the overflow feature will not work properly

Question 23

What would happen if setting overflow in every direction (leaving out the x)

html {
font-size: 62.5%;
overflow: hidden;
}

Answer 23

You would not be able to scroll at all

Question 24

How to define a transition to be non-linear?

Answer 24

You can make it more curved with
Ease-in
Ease-in-out

Question 25

How to set 3 and 4-column grids to 2 column grid on smaller tablet?

Answer 25

@media (max-width: 44em) {
.grid–3-cols,
.grid–4-cols {
grid-template-columns: repeat(2, 1fr);
}

Question 26

Set grid to 1 column unlike parent

The parent container says 2 by 2 columns:
grid-template-columns: repeat(2, 1fr);

You want 1 column for 1 child container
How to resolve?

Answer 26

.diets {
grid-column: 1 / -1;
justify-self: center;
}

With justify-self you set the individual grid item instead of the container

Question 27

You have 5 columns with different span sizes:

.grid–footer {
grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr;
}

You want the last 3 columns on top with three in a row
You want to first 2 columns in the second row spanning the whole width
How to do this?

Answer 27

1. Set parent to 6 columns
2. Then let the 2 rows span either 2 and 3 columns

.grid–footer {
grid-template-columns: repeat(6, 1fr);
}

.logo-col,
.address-col {
grid-column: span 3;
}

.nav-col {
grid-row: 1;
grid-column: span 2;
margin-bottom: 3.2rem;
}