Kevin Powell - Community•12mo ago

Firefox Chromium diff when using Subgrid

Hey guys, I've been working on my second website for a customer and I realised I have an Issue with my layout when switching from Firefox to Chromium. As you can see the same code is working well in firefox while in chromium based browsers, edge opera chrome. The layour of the subgrided cards just breaks entirely. I created a codepen using the relevant html and all the css since I use many diffrent .scss files to keep things somewhat organized. And I am not entirely sure about if the issue is in the area specific css. https://codepen.io/Zen-Mira/pen/abXPMao I hope you can enlighten me what obvious mistake I am overseeing here! Thanks a lot :)

Mira Moeller

CodePen

abXPMao

...

1 Reply

Mira 🏳⚧OP•12mo ago

Seeing through some other Questions, I feel I should try to be more detailed: The relevant targeted classed are the Grid defined under

css 
#travel {}

css 
#travel {}

Which serves as a container for the area And the

#reise {}

#reise {}

Which holds the subgrid layouted div which serves as the card

<div class="book-card textbox">
  <img>
  <div>
    <h3>heading</h3>
    <p>Text</p>
  </div>
</div>

<div class="book-card textbox">
  <img>
  <div>
    <h3>heading</h3>
    <p>Text</p>
  </div>
</div>

One thing i relised is diffrent between the two browsers: Firefox does wordwrap my <p> element while chrome doesn't may causing this issue aswell? I think I finally found a solution fot the issue, but I would like to understand why this is happening. I added

.book-card {
width: 100%
}

.book-card {
width: 100%
}

cause i found out in chrome the subgrid divs are breaking out of their parent grid any idea why that doesnt happen in firefox?

Gaming

Programming

Firefox Chromium diff when using Subgrid