Mira 🏳⚧ Comments - Answer Overflow

Mira 🏳⚧

•Created by Mira 🏳⚧ on 12/6/2023 in #front-end

Firefox Chromium diff when using Subgrid

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?

3 replies

KPCKevin Powell - Community

•Created by Mira 🏳⚧ on 12/6/2023 in #front-end

Firefox Chromium diff when using Subgrid

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?

3 replies

KPCKevin Powell - Community

•Created by Mira 🏳⚧ on 10/6/2023 in #front-end

Styling / Getting rid of Scrollbars in Chrome on "Card Design"

Correction, while it works in code Pen it seems there's some issue with my actual code that makes the scrollbar disappear still

5 replies

KPCKevin Powell - Community

•Created by Mira 🏳⚧ on 10/6/2023 in #front-end

Styling / Getting rid of Scrollbars in Chrome on "Card Design"

Thanks a lot!

5 replies

KPCKevin Powell - Community

•Created by Mira 🏳⚧ on 10/6/2023 in #front-end

Styling / Getting rid of Scrollbars in Chrome on "Card Design"

I was about to answer that those didn't work for me cause the scrollbar just kept disappearing if I entered a width of 5px for example but turns out it just resets all other other unset scrollbar settings once you enter any property: https://codepen.io/Zen-Gheist/pen/KKbryRX

5 replies

KPCKevin Powell - Community

•Created by Mira 🏳⚧ on 6/22/2023 in #front-end

Relatively Simple CSS Grid question

Important follow up question, how do I tag this as solved on the phone?

7 replies

KPCKevin Powell - Community

•Created by Mira 🏳⚧ on 6/22/2023 in #front-end

Relatively Simple CSS Grid question

Oh sorry I messed up there, I was supposed to inline-tag that

7 replies

KPCKevin Powell - Community

•Created by Mira 🏳⚧ on 6/22/2023 in #front-end

Relatively Simple CSS Grid question

I have infact put the

css v.$hero-size

css v.$hero-size

as the width of

css round-hero

css round-hero

but it defaults to the 50 / 50 layout. My idea was that there might be a way to do something like this pseudocode

css grid-area-width: value

css grid-area-width: value

that would set the the grid-width of the

css grid-area: hero

css grid-area: hero

to said value no matter where it is positioned. But since this is a niche use case I don't think it exists. In anyway thanks a lot for your content kevin. I learn a lot from your videos/shorts even those

css .round-hero

css .round-hero

was heavily inspired by you :)

7 replies

Gaming

Programming