Hyper Khaa Comments - Answer Overflow

Hyper Khaa

Posts Comments

KPCKevin Powell - Community

•Created by Hyper Khaa on 7/11/2024 in #front-end

<div> spanning 2 sections with different backgrounds and container set in each.

Thanks. I also read the same that day 😅

8 replies

KPCKevin Powell - Community

•Created by Hyper Khaa on 7/11/2024 in #front-end

<div> spanning 2 sections with different backgrounds and container set in each.

Also, this might not be the best place to ask but I just wanted to know if I have multiple <section> elements in my markup then can I use <main> elements inside it or there should be only one in whole page? I understand that <h1> can be used only once as a page title.

8 replies

KPCKevin Powell - Community

•Created by Hyper Khaa on 7/11/2024 in #front-end

<div> spanning 2 sections with different backgrounds and container set in each.

First of all thank you for replying and sorry I didn't notice it earlier 😅 . Just after posting this issue here, I referred to your video [https://youtu.be/c13gpBrnGEw] which I saw earlier. I tried to implement something similar and it worked.

.site-grid {
    --_padding-inline: min(5vw, 5rem);
    --_content-max-width: 1400px;

    display: grid;
    grid-template-columns:
        [full-width-start]
        minmax(var(--_padding-inline), 1fr)
        [content-start]
        min(100% - (var(--_padding-inline) * 2), var(--_content-max-width))
        [content-end]
        minmax(var(--_padding-inline), 1fr)
        [full-width-end];
}

.site-grid {
    --_padding-inline: min(5vw, 5rem);
    --_content-max-width: 1400px;

    display: grid;
    grid-template-columns:
        [full-width-start]
        minmax(var(--_padding-inline), 1fr)
        [content-start]
        min(100% - (var(--_padding-inline) * 2), var(--_content-max-width))
        [content-end]
        minmax(var(--_padding-inline), 1fr)
        [full-width-end];
}