Nibelung Valesti Comments - Answer Overflow

Nibelung Valesti

•Created by Nibelung Valesti on 11/7/2024 in #front-end

Two Column Layout, but the other one goes to edge.

Thanks for the response! But what if my columns are not equal, for example left section is col-4 and the right section which has an image is col-8?

10 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 11/7/2024 in #front-end

Two Column Layout, but the other one goes to edge.

Hi everyone, I'm sorry for the late response. But here is my attempt to replicate the situation, The image should still respect the container but should stretch until the edge of the screen on the other side. Is there a way to make it responsive so that it fits naturally and do not overlap the screen? Like do I need calc for that? https://codepen.io/Jeremy-Mapalad-the-encoder/pen/JoPPLRj

10 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 11/7/2024 in #front-end

Two Column Layout, but the other one goes to edge.

TLDR; The content should be inside the container but the image should span to the right edge

10 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 9/21/2024 in #front-end

Make a Background repeat smooth

Guys. Thank you for the response. I appreciste the hell and amazed how people have different solutions. Thank you once again and Ill try them all out

42 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 9/21/2024 in #front-end

Make a Background repeat smooth

I didn't know it was possible and asked chatgpt to explain it lol. But it make sense to me now, but still looks complicated.

42 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 9/21/2024 in #front-end

Make a Background repeat smooth

background-image: repeating-linear-gradient(
      -65deg,
      var(--color-blue) 0 1px,
      #0000 2px 120px,
      var(--color-blue) 30px 140px
    ),
    repeating-linear-gradient(
      rgba(255, 255, 255, 0.1) 0 40px,
      var(--color-blue) 40px 70px
    );

background-image: repeating-linear-gradient(
      -65deg,
      var(--color-blue) 0 1px,
      #0000 2px 120px,
      var(--color-blue) 30px 140px
    ),
    repeating-linear-gradient(
      rgba(255, 255, 255, 0.1) 0 40px,
      var(--color-blue) 40px 70px
    );