Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

HTML/CSS > Omnifood Project – Responsive Web Design > Flashcards

Omnifood Project – Responsive Web Design Flashcards

1
Q

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

A

The last bit of CSS will apply:

@media (max-width: 1200px) {

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

How to simulate different devices?

A

Inspect menu, pick devices to simulate

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is the best method of determining breakpoints?

A

Drag the screen and wait til it breaks

Whenever design starts to break, a break point is inserted

Also take into account common screen width ranges

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Which meta tag is absolutely crucial for responsive web design?

A

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Scale is initially 100%
It will make it so the page will match the screen’s width

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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

A

Add a new CSS file and name it queries.css

Add the HTML a new line:
   <link rel="stylesheet" href="css/general.css" />
   <link rel="stylesheet" href="css/style.css" />
   <link rel="stylesheet" href="css/queries.css" />
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is a particularity about responsive units (rem / em) in media queries?

A

They do NOT respond to the font-size setting (62,5%) in the HTML

In media queries 1 rem is NOT 10 pixels

Instead 1 rem will ALWAYS be the default size browser setting (16px)

1 rem = 1 em = 16px

rem is root font size
em is the current font size
rem used to have some bugs in media queries, but might be solved now.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Process of determining max width:

A
  1. Determine screen size breaking point in pixels, in this case around 1350px (smaller desktops)
  2. Divide by 16 (1 rem is 16px)
  3. Round of (in this case 84 rem)

@media (max-width: 84em) {

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Why is there em and rem used in these cases

@media (max-width: 84em) {
.hero {
max-width: 120rem;
}
}

A

em is used in the media query only. It has nothing to do with the rem as applied to the hero class. That rem is similar to the rem used apart from the responsive design.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Best practise regarding amount of media queries?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

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

@media (max-width: 84em) {

  .hero {
    max-width: 120rem;
  }
 
  .gallery {
	   ?
   }
}
A 
@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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What are prerequisites for responsive web design?

A

Fluid grid
responsive images
responsive units (rem)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

In responsive design, what is great trick to scale everything down AT ONCE?

A

Scale down the font-size:

  1. Determine pixel size, i.e. 8px
  2. Then do 8px / 16px = 0.5
  3. The font-size decreases then to 50%
    (before it was 62,5%)

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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;
}

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

A very good practise when tweaking sections?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

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

A

Add it in the header section after the other nav element:

<nav class="main-nav">
        <ul class="main-nav-list">
          <li><a class="main-nav-link" href="#">How it works</a></li>
          <li><a class="main-nav-link" href="#">Meals</a></li>
          <li><a class="main-nav-link" href="#">Testimonials</a></li>
          <li><a class="main-nav-link" href="#">Pricing</a></li>
          <li><a class="main-nav-link nav-cta" href="#">Try for free</a></li>
        </ul>
      </nav>

      <button class="btn-mobile-nav">
        <ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
        <ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
      </button>
    </header>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

How come the mobile buttons are not visible on larger devices than mobile?

 <button class="btn-mobile-nav">
        <ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
        <ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
      </button>
A

In the style CSS they are not displayed by default:

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

In the queries they are visible again:

  .btn-mobile-nav {
    display: block;
  }
17
Q

Where can you retrieve the mobile button icons from for use in html?

A

Menu and Close button are taken from ionicons

18
Q

Here’s the buttons in HTML:

 <button class="btn-mobile-nav">
        <ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
        <ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
      </button>

How to add them do the CSS documents?

A

STYLE CSS
* Set the parent to non visible so it doesn’t show up for larger displays:

.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}
  • Set the button size:
.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #333;
}
  • Set the close button non visible by default:
.icon-mobile-nav[name="close-outline"] {
  display: none;
}
19
Q

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

 <li class="list-item">
     <ion-icon class="list-icon" name="close-outline"></ion-icon>
</li>
A

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

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

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

 <button class="btn-mobile-nav">
        <ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
        <ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
      </button>
A

You show the button again:

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

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

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?

A

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;
~~~

22
Q

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

<nav class="main-nav">
        <ul class="main-nav-list">
          <li><a class="main-nav-link" href="#how">How it works</a></li>

Etc..

A

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 {
    background-color: rgba(255, 255, 255, 0.97);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
  .main-nav-list {
    flex-direction: column;
    gap: 4.8rem;
  }
23
Q

What mobile buttons should you alter between with respect to navigation?

A

Menu button and Close button

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

When the nav-open is toggled, the main nav rises again to the surface:

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

The buttons are then altered:

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }
  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }
24
Q

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

A

Use the transform property

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);
  }
25
Q

When letting the nav bar slide in from the right, a problem arises:
The nav bar is positioned on the right, but you can just easily scroll over there.
This means it is not hidden at all.

How can we resolve this?
And what is important to remember as well with this property?

A

It has to do with overflow, which can be resolved with the overflow property.
Set it to overflow-x: hidden

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 and nav absolute (for mobile navigation).
Already did this in a previous step (Q22).
It is important else the overflow feature will not work properly

The overflow CSS shorthand property sets the desired behavior when content does not fit in the element’s padding box (overflows) in the horizontal (X) and/or vertical direction (Y).

26
Q

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

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

A

You would not be able to scroll at all

27
Q

How to define a transition to be non-linear?

A

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

28
Q

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

A

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

29
Q

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?

A

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

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

30
Q

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?

A
  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;
}

HTML/CSS (12 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions