1 reply

Different preview of same code in Chromium vs. Mozilla

Hello,
I've started learning responsive design and have come across this issue where my code "works" (behave as I want it to) in Mozilla, while not in Chrome (chromium actually, but same thing).
I'm including pictures - I'm talking about the div with green background with a trumpet in the center.
I used flexbox.

In dev tools I noticed a strange purple square with an arrow (that I don't think I've seen before) and don't really know what it means.

I'm including pictures of the previews, as well as CSS code of - the green element child in question, the only sibling of this green element ,and the parent flex of the children.

Ther element in question:

 <div class="row__article-image trumpet">

 <div class="row__article-image trumpet">

 <div class="row__article-image trumpet">

 <div class="row__article-image trumpet">

Sorry, I just read the "Asking Good Questions" after posting (shame on me xD) - so per instruction's I'm including the code:

<div class="row row--special">
        <article class="row__article">
          <h3 class="row__article-title">Increase recognition<br>of your brand!</h3>
          <p class="row__article-subtitle">
            Lorem ipsum
          </p>
        </article>
        <div class="row__article-image trumpet">
        </div>
      </div>

<div class="row row--special">
        <article class="row__article">
          <h3 class="row__article-title">Increase recognition<br>of your brand!</h3>
          <p class="row__article-subtitle">
            Lorem ipsum
          </p>
        </article>
        <div class="row__article-image trumpet">
        </div>
      </div>

<div class="row row--special">
        <article class="row__article">
          <h3 class="row__article-title">Increase recognition<br>of your brand!</h3>
          <p class="row__article-subtitle">
            Lorem ipsum
          </p>
        </article>
        <div class="row__article-image trumpet">
        </div>
      </div>

<div class="row row--special">
        <article class="row__article">
          <h3 class="row__article-title">Increase recognition<br>of your brand!</h3>
          <p class="row__article-subtitle">
            Lorem ipsum
          </p>
        </article>
        <div class="row__article-image trumpet">
        </div>
      </div>

.section__benefits .row--special {
        display: flex;
        justify-content: space-between;
        gap: 2rem;
        min-height: 370px;
        background-color: var(--grey-bg-light);
    }

    .row--special .row__article {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: var(--white-bg);
        padding: 2rem;
    }
    .row__article-image.trumpet {
        flex-basis: 440px;
        aspect-ratio: 440 / 370;
        background-color: var(--primary-turquoise);
        background-image: url("../images/Trumpet.png");
        background-size: 70%;
        background-repeat: no-repeat;
        background-position: 50% 80%;
    }

.section__benefits .row--special {
        display: flex;
        justify-content: space-between;
        gap: 2rem;
        min-height: 370px;
        background-color: var(--grey-bg-light);
    }

    .row--special .row__article {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: var(--white-bg);
        padding: 2rem;
    }
    .row__article-image.trumpet {
        flex-basis: 440px;
        aspect-ratio: 440 / 370;
        background-color: var(--primary-turquoise);
        background-image: url("../images/Trumpet.png");
        background-size: 70%;
        background-repeat: no-repeat;
        background-position: 50% 80%;
    }

.section__benefits .row--special {
        display: flex;
        justify-content: space-between;
        gap: 2rem;
        min-height: 370px;
        background-color: var(--grey-bg-light);
    }

    .row--special .row__article {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: var(--white-bg);
        padding: 2rem;
    }
    .row__article-image.trumpet {
        flex-basis: 440px;
        aspect-ratio: 440 / 370;
        background-color: var(--primary-turquoise);
        background-image: url("../images/Trumpet.png");
        background-size: 70%;
        background-repeat: no-repeat;
        background-position: 50% 80%;
    }

.section__benefits .row--special {
        display: flex;
        justify-content: space-between;
        gap: 2rem;
        min-height: 370px;
        background-color: var(--grey-bg-light);
    }

    .row--special .row__article {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: var(--white-bg);
        padding: 2rem;
    }
    .row__article-image.trumpet {
        flex-basis: 440px;
        aspect-ratio: 440 / 370;
        background-color: var(--primary-turquoise);
        background-image: url("../images/Trumpet.png");
        background-size: 70%;
        background-repeat: no-repeat;
        background-position: 50% 80%;
    }

Different preview of same code in Chromium vs. Mozilla

Similar Threads

Similar Threads

Similar Threads