Part of my css does not work, and I can't find the bug

HTML & CSS
1

I am training my coding by building a generic portfolio page. So far I have a section containing a hero image with some text, then a section with some grid columns where some projects will be displayed later, and then an about section which is also a grid column with an image and some text on it. I got stuck here, because for some reason the divs in my About section are acting strange.

I can change the image values in my scss, but I cannot change the text. My About divs also float over my other content when I scale down. I tried deleting the grid columns between the Hero section and the About section to see if they were the cause of the problem, but no, the About section is still not responding to any changes I make in the scss file (except for the image) and the About div still overflow any content I put between it and the Hero section.

What is going on?

The HTML

<div class="container__main">
  <div class="container__hero">
    <img class="container__hero__image" src="../assets/hero-background.jpg" />
    <div class="container__hero__text">
      <h1>Your Digital Handyman</h1>
      <p>Digital products with human insight</p>
      <button class="btn">Hire me</button>
    </div>
  </div>
<div class="container__card">
  <div class="container__card__item">
    <div class="container__card__image"></div>
    <div class="container__card__text">
      <span class="container__card__text__upperTitle">CSS / JavaScript</span>
      <h2>Train Project</h2>
      <p>
        A customer page I made for a fictional
        Metro company to showcase the use of ES6 Javascript.
      </p>
    </div>
    <div class="container__card__footer">
      <i class="fas fa-location-arrow fa-3x"></i>
    </div>
  </div>
  <div class="container__card__item">
    <div class="container__card__image"></div>
    <div class="container__card__text">
      <span class="container__card__text__upperTitle">CSS / JavaScript</span>
      <h2>Train Project</h2>
      <p>
        A customer page I made for a fictional
        Metro company to showcase the use of ES6 Javascript.
      </p>
    </div>
    <div class="container__card__footer">
      <i class="fas fa-location-arrow fa-3x"></i>
    </div>
  </div>
  <div class="container__card__item">
    <div class="container__card__image"></div>
    <div class="container__card__text">
      <span class="container__card__text__upperTitle">CSS / JavaScript</span>
      <h2>Train Project</h2>
      <p>
        A customer page I made for a fictional
        Metro company to showcase the use of ES6 Javascript.
      </p>
    </div>
    <div class="container__card__footer">
      <i class="fas fa-location-arrow fa-3x"></i>
    </div>
  </div>
</div>
<div class="about__section">
  <div class="about__section__hero">
    <img class="about__section__hero__image" src="../assets/casual-cellphones-chatting.jpg" />
    <div class="about__section__hero__text">
      <p>
        The psychology
        <br />behind user
        <br />experience
      </p>
    </div>
  </div>
</div>

The CSS / SCSS

$primary-color: #41b883;
$secondary-color: #34495e;
$primary-text-color: black;
$secondary-text-color: white;
.container__main {
  .container__hero {
    position: relative;

    .container__hero__image {
      height: 100%;
      width: 100%;
    }
    .container__hero__text {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      h1 {
        font-size: 2.5em;
        color: $secondary-text-color;
        text-align: center;
      }
      p {
        font-size: 1.4em;
        color: $secondary-text-color;
        text-align: center;
      }
      .btn {
        position: absolute;
        background-color: $primary-color;
        left: 33%;
        border: none;
        color: $secondary-text-color;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }
    }
  }
  .container__card {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    align-items: center;
    justify-items: center;

    .container__card__item {
      display: grid;
      grid-template-rows: 210px 210px 80px;
      grid-template-areas: "image" "text" "footer";
      border-radius: 18px;
      background: #fff;
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
      text-align: center;
      margin: 50px;

      .container__card__image {
        grid-area: image;
        background: url("~@/assets/website1.jpg");
        background-size: cover;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
      }
      .container__card__text {
        grid-area: text;
        margin: 25px;
        h2 {
          margin-top: 5;
          font-size: 28px;
        }
        p {
          font-size: 15px;
          font-weight: 300;
        }
        .container__card__text__upperTitle {
          font-size: 15px;
          color: green;
        }
      }
      .container__card__footer {
        grid-area: footer;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        background-color: $primary-color;
        cursor: pointer;
        .fas {
          color: #fff !important;
          margin-top: 15px;
        }
      }
    }
  }
  .about__section {
    position: relative;
    height: 100vh;
    display: grid;
    .about__section__hero {
      display: grid;
      grid-auto-columns: repeat(auto-fit, minmax(19rem, 1fr));
      .about__section__hero__image {
        max-width: 100%;
        height: auto;
        .about__section__hero__text {
          p {
            position: absolute;
            font-size: 10em;
            color: $secondary-text-color;
            font-weight: 800;
          }
        }
      }
    }
  }
  @media screen and (max-width: 759px) {
    .container__hero {
      .container__hero__text {
        .h1 {
          font-size: 1.3em;
        }
        .p {
          font-size: 1.1em;
        }
      }
    }
  }
}
2

Hi @marc87dk, I found a first mistake. Maybe that’s what you were looking for: at .container__card and about__section remove height: 100vh or use min-height: 100vh.

Try and let us know if you’ve solved the problem you were looking for.

3

That DID solve the overlapping problem, but I still can’t style the text in about__section__hero__text
I tried removing the p tag to see if that changed anything, but I still can’t get it to change.

Thanks for solving the other issues though

4

You can’t edit the text because it has been inserted inside the .about__section__hero__text in the SCSS instead of outside.

Your SCSS:

.about__section__hero__image {
    max-width: 100%;
    height: auto;
    
    .about__section__hero__text {
        p {
            position: absolute;
            font-size: 10em;
            color: $secondary-text-color;
            font-weight: 800;
          }
     }
}

Correct SCSS:

.about__section__hero__image {
    max-width: 100%;
    height: auto;
}

.about__section__hero__text {
    p {
        // I removed the absolute position, unnecessary
        font-size: 10em;
        color: $secondary-text-color; // Warning: white color on possible white background
        font-weight: 800;
    }
}

Tip: In SCSS you don’t need to put blocks inside each other when you don’t need to. If you write .about__section__hero__text this block will almost certainly have unique features. You can also use it for other occurrences; the code will be cleaner, easier to read; the compiler will have less trouble converting the code.

You can instead put one block inside the other when an element has properties that refer only to the parent block. Example:

.about__section__hero__text {
    p {
        font-size: 10em;
        font-weight: 800;
    }
}

where p has additional features over and above the general p.

3 Likes
5

Hi @DavideMancuso
Again thank you for your help. I truly appreciate it.
I have one question regarding the scss comment you made, which caught my attention.
from what i have learned about scss so far, it focus a lot on nesting.

In the case of my code I have:
A container.
An image which is inside the container
A block of text which is on top of the image (btw this is why I used absolute positioning)

The reason why I nested my text inside my image was because my mind was thinking in layers, where the text is the layer on top of the image, which is the layer on top of the container. You get what I mean?

So have I understood it correctly that if you have an element that is supposed to overlap another element inside of a container, that element is not supposed to be nested below the element it is overlapping?

6

In SCSS (or SASS or LESS) it is not necessary to nest the elements and there is no precise rule to follow. With experience you will understand how best to organize your code.

Let’s start with your example:
container__main contains container__hero;
container__hero contains container__hero__image and container__hero__text
container__hero__text contains h1, p and button.btn

In HTML, blocks must stay inside each other when necessary and according to the result to be obtained.

In CSS, blocks cannot be nested, but you can create global or local “rules”.

Global: If you write .container__hero { … }, it means that the instructions refer to all the .container__hero blocks in the entire site.

Local: if you write .container__main .container__hero { … }, it means that the instructions refer only and exclusively to the .container__hero blocks inside .container__main.

In SCSS, you can nest the blocks exactly as you did. But you have to be careful. There is a risk of overloading the nesting and often it is not necessary.

Why is that? As I wrote at the beginning, there is no general rule, only common sense. I will try to explain my method.

Let’s see some of your code:

<div class="container__main">
  <div class="container__hero">
    <img class="container__hero__image" src="../assets/hero-background.jpg" />

    <div class="container__hero__text">
      <h1>Your Digital Handyman</h1>
      <p>Digital products with human insight</p>
      <Button class="btn">Hire me</button>
    </div>
  </div>
</div>

The names you have given to the classes are already quite unique: container__hero__text or container__hero__image, so it is unlikely that you will use these classes within the container__card block. Right?

Instead, if the structure of your code was:

<div class="main">
  <div class="hero">
    <img class="image" src="../assets/hero-background.jpg" />

    <div class="text">
      <h1>Your Digital Handyman</h1>
      <p>Digital products with human insight</p>
      <Button class="btn">Hire me</button>
    </div>
  </div>
</div>

then yes, in SCSS it would have been more correct to nest the code:

.hero {
    .image { }
    .text {
        h1 { }
        p { }
    }
}

because you’d have a text block in both hero and card.

File size

Also pay attention to the weight of the final CSS file. If in CSS the code is:

.container__main .container__hero .container__hero__text h1 { }

you must have occupied 470 bytes.

_

If the code is written like this:

.container__hero__text h1 { }

You must have occupied 406 bytes.
_

Finally, with the method I use:

.hero_text h1 { }

I’d take 394 bytes.

Being a few characters, the weight loss seems small, but in very large files the difference is definitely noticeable.

6 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.