CSS Grid: element is not taking full width although it's positioned so

Hi!

I have positioned background photo here to take all horizontal space but there is still some space on the right. It must be some stupid simple mistake but I just cannot catch it. I will really appreciate any thoughts!

https://zelenskaya.github.io/experiments/sswitch/sswitch-home-css-grid.html

Thanks!

You may want to move the title_screen_bg-end right after the last 2vw in grid-template-columns. You can still label line names (don’t know the right term) after the last grid track measurement.

1 Like

Thanks! That is a good point! But I did so and it did not help!

The problem is not with the background images, but that you have overflows on the page.

The elements…

dotted_line.svg
title_screen_figure@2x.png
#what_we_do_txt_on_grey_2 div
Technology h1

…are all causing an overflow.

The images need to adapt their size to their containers, the div doesn’t have a parent container it can be constrained to and even with its grid placement it will still overflow, the h1 just needs to scale down or wrap.

I would suggest breaking the page down into sections and sub-grids. The main grid is very hard to reason about. Placing that many elements with a complex page layout using a main grid is hard to do.

1 Like

Thank you, this indeed needed smiplifying! I will research more about overflow, thanks for the tip!