CSS KP 08 — display: flex, text-align: center;, max-width: 50ch;, place-items: center;, place-content:center;, row-gap: 10%;, align-item:end;

display: flex;

text-align: center;

max-width: 50ch;

place-items: center;

place-content:center;

row-gap: 10%;

align-item:end;

make it 50:50

add flex

<div class="container flex">

add max-width: 60em;

<div class="container flex" style="max-width: 60rem">

add new styling class called even-columns for its children to have 100% width.

  <div class="container flex even-columns" style="max-width: 60rem">

style children of .even-columns

//css
/* ------------------- */
/* Utility classes     */
/* ------------------- */

/* general */
.flex {
}

.flex.even-columns > * { //<---- notice it's selecting all children
    width: 100%;
    outline: 1px solid limegreen;
}

style the div box surrounding the large-button using justify-content: flex-end and align-items: flex-start;

<div class="container flex even-columns" style="max-width: 60rem">
    <div><h1></h1><p></p></div>

    <div style="display:flex; 
                justify-content: flex-end; 
                align-items: flex-start;">
      <a href="#" class="large-button uppercase ff-serif fs-600 text-dark bg-white">Explore</a>
    </div>
  </div>

.

Centering the texts for mobile / left for desktop

1. define where we will add the text-align: center;

body? div? .grid-container? .container? We will go with container.

.grid-container {
    text-align: center;
    ....
}

2. For wider screen like desktop, we will keep the text align as left.

@media (min-width: 45em) {
    .grid-container {
        text-align: left;
    }

optional

    display: inline-block; /* Change to inline-block to ensure it behaves properly */
    margin: 0 auto; /* Center the button horizontally */

problem: the width of the text is too wide for readers to read.

solution: use max-width: with ch measurement

max-width: 45ch;

max-width: #ch;

max-width: 50ch; will only allow 50 characters width.

.grid-container * {
    max-width: 50ch; 
    /* ch: character  */
}

@media (min-width: 45em) {
    .grid-container {
        text-align: center;

problem: the whole content is on the left side.

place-items: center;

solution: place-items:center;

.grid-container {
    text-align: center;
    border: 5px solid limegreen;
    display: grid;
    place-items: center; /////<------- add this 
}

.grid-container * {
    max-width: 50ch;
}

other optional solution: place-content: center;

place-content: center;

problem: the text and the button are too close.

solution: add row-gap: 10%;

.grid-container {
    text-align: center;
    border: 5px solid limegreen;
    display: grid;
    place-content: center;   //<------
    row-gap: 10%;   //<------
}

problem: We want to place the two items closer to the bottom

solution I came up with, adding grid row

@media (min-width: 45em) {
    .grid-container {
        display: grid;
        text-align: left;
        column-gap: var(--container-gap, 2rem);
        grid-template-columns: minmax(1rem, 1fr) repeat(2, minmax(0, 30rem)) minmax(1rem, 1fr);
        grid-template-rows: 1fr 1fr;
    }
    
    .grid-container > *:first-child {
        grid-row: 2;
        grid-column: 2;
        outline: 1px solid red;
    }

    .grid-container > *:last-child {
        grid-row: 2;
        grid-column: 3;
        outline: 1px solid yellow;
    }

KP’s solution:

Add a new class, grid-container--home meaning, it is a modified version of grid-container . -- means BEM modifier convention. (https://getbem.com/naming/)

  <div class="grid-container grid-container--home"> //<---- grid-container--home
    <div></div>
    <div></div>
  </div>

css

@media (min-width: 45em) {
    ...
    
     .grid-container--home {
        padding-bottom: max(6rem, 10vh);
        align-items: end;
    }

add the background image

/* ----------------------------- */
/* Page specific background      */
/* ----------------------------- */
body {
    background-size: cover;
    background-position: bottom center;
}
/* home */
.home {
    background-image: url(./assets/home/background-home-mobile.jpg);
}

@media (min-width: 35rem) {
    .home {
        background-position: center center;
        background-image: url(./assets/home/background-home-tablet.jpg);
    }
}

@media (min-width: 45rem) {
    .home {
        background-image: url(./assets/home/background-home-desktop.jpg);
    }
}