Sections have different widths

Technical Q&A
, , , ,
1

Hi! :waving_hand:

I have a problem in my website, since different sections have different max widths depending on the screen size, so nothing is really aligned on the desktop versions (the mobile and tablet versions seem to work correctly though).

:white_check_mark: Ideally, this is how it should look like on every desktop version:

Screenshot 2026-01-20 at 12.03.49
Screenshot 2026-01-20 at 12.03.493420×1900 175 KB

As you can see, all the limits, spacings and widths of every section (header, announcement bar, video hero…) are aligned properly on both sides. :white_check_mark:

:cross_mark: However, this is how it looks like now on some desktops:

Screenshot 2026-01-20 at 12.03.16
Screenshot 2026-01-20 at 12.03.162634×1654 156 KB

As you can see, nothing is aligned anymore.

:star: Ideally, everything should be aligned on the left to where the logo ends, and on the right where the cart ends, just like in the first image, independently of the screen size.

I’ve been trying to fix this for a couple of days but all I get is more problems, so I would really appreciate if an expert could help me out on this.

My website is: https://grejv44n1u3ljjnf-60150284501.shopifypreview.com (Stiletto theme)

Thanks in advance!!! :laughing:

1 Like
3

Hi! Thanks for your answer! Yes, I know that the sections have different max widths, but is there any code that would adjust the max width automatically on every type of desktop screen, so that it is consistent? On mobile it seems to work

1 Like
5

Makes sense! But how can I know the width of the header, so that I can apply it to the rest of the sections? Also, should I apply it in custom css on each section within the theme editor or should I go to the code page and apply it to everything in theme.css? Sorry if it sounds basic, is just that coding is not my area at all

6

Hi @martujv

You need to make 2 changes for that video hero section. Try to add this code in Cust CSS setting of that video section in the theme customizer

.video-hero {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}
@media (min-width: 769px) {
    .video-hero .video-hero__inner {
        margin: 23px 0 !important;
        border-radius: 12px !important;
    }
}

AS now you have a margin 40px in inner element and padding on side for outher of 20px so that is a difference from header.

Note that this looks like it might be set in section settings so take a look for margin 40 and padding 20. Maybe you do not need code.