Kevin Powell - Community•7mo ago

Chrome vs. Firefox 😳

For this site: https://amarlong.github.io/Deichman/frontpage.html I have the picture set at 70dvh, and it works fine in Firefox (img 1), but not in Chrome (img 2). This in unchartered territory for me, so not sure how to attack this issue. Code:

.frontpage {
  picture {
    height: 70dvh;
    display: grid;
    grid-template-columns: 0.5fr 2fr 2fr 0.5fr;

    img {
      grid-column: 1 / 5;
      grid-row: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .text {
      z-index: 10;
      grid-column: 2 / 4;
      grid-row: 1;
      color: white;
      gap: 1rem;
      place-self: end start;
      padding-block-end: 10rem;

      h1 {
        font-size: clamp(2.7994rem, 2.1808rem + 3.0927vi, 4.5776rem);
        font-weight: 700;
      }

      h2 {
        font-size: clamp(1.944rem, 1.6012rem + 1.7142vi, 2.9297rem);
        font-weight: 400;
        padding-block-start: 2rem;
      }
    }
  }
}

.frontpage {
  picture {
    height: 70dvh;
    display: grid;
    grid-template-columns: 0.5fr 2fr 2fr 0.5fr;

    img {
      grid-column: 1 / 5;
      grid-row: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .text {
      z-index: 10;
      grid-column: 2 / 4;
      grid-row: 1;
      color: white;
      gap: 1rem;
      place-self: end start;
      padding-block-end: 10rem;

      h1 {
        font-size: clamp(2.7994rem, 2.1808rem + 3.0927vi, 4.5776rem);
        font-weight: 700;
      }

      h2 {
        font-size: clamp(1.944rem, 1.6012rem + 1.7142vi, 2.9297rem);
        font-weight: 400;
        padding-block-start: 2rem;
      }
    }
  }
}

5 Replies

Chris Bolson•7mo ago

Your image appears to be overflowing the parent (picture) element. This picture element itself, however, does appear to be respecting the 70dvh that you have set. I can't tell you why this is happening but one solution would be to set the image position: absolute; and give the <picture> a position: relative. This way the image will respect the size of the parent. But there may be reasons why you can't or don't want to do this.

Å Marlon GOP•7mo ago

Well, you found a solution, and that's all I needed now. Thank you! 🙏 Where would I look for info about this? I know you don't have the answer, but I really don't understand this, so a bit unsure how to go forward here now.

Chris Bolson•7mo ago

I think that it has to do with how each browser renders the grid but I can't look into it right now. Interestingly, uf you had set a row height on the grid it would have worked. grid-template-rows: 70dvh so presumably, as it wasn't set, Chrome was setting the row height to match the natural content of, in this case, the image.

draganeror•7mo ago

Why would you put text inside the <picture> element? You're using it wrong! <picture> element is there to give you more flexibility over the resources (read: different image size, format, etc.) https://www.w3schools.com/tags/tag_picture.asp What you need is <figure> and <caption> tags https://www.w3schools.com/tags/tag_figure.asp

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

draganeror•7mo ago

The thing you want to achieve, usually is done by a <div> element (<figure>, <main>, etc). You make it correct size, then set image as a background, and use background-size: cover; Then, you can place text elements inside and position them.

Gaming

Programming

Chrome vs. Firefox 😳