Make all sections use full width on desktop

[revtekautoparts]

How can I fix my site to make all sections such as the header, footer and collections when viewed desktop appear the same as on mobile and laptop (utilize full width of display)

site: https://revtekautoparts.com/

[websensepro]

Hi @revtekautoparts

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

slider-component.slider-mobile-gutter.page-width-desktop {
    padding: 1px !important;
}
.page-width.no-heading.section-template--23930987217208__collage_YA4eHf-padding {
    margin: 0 !important;
    padding: 10px 0 !important;
}
.banner__media.media img {
    height: 108% !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[revtekautoparts]

Didn’t change anything, unfortunately.

[DaisyVo]

Hi @revtekautoparts

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

.collection:has(.collection__view-all) slider-component {
    max-width: 100% !important;
}
header.header {
    max-width: 100% !important;
}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[websensepro]

@revtekautoparts

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-width:768px){
slider-component.slider-mobile-gutter.page-width-desktop {
    padding: 1px !important;
}
.page-width.no-heading.section-template--23930987217208__collage_YA4eHf-padding {
    margin: 0 !important;
    padding: 10px 0 !important;
}
.banner__media.media img {
    height: 108% !important;
}
}
@media(min-width:769px){
slider-component.slider-mobile-gutter.page-width-desktop {
    padding: 1px !important;
}
.page-width.no-heading.section-template--23930987217208__collage_YA4eHf-padding {
    margin: 0 !important;
    padding: 10px 0 !important;
}
.banner__media.media img {
    height: 108% !important;
}
}

[websensepro]

@revtekautoparts

I have updated this code; try it, and the issue will be resolved.

[revtekautoparts]

I don’t really want to mannually add custom CSS to every single section. Is there something I can add perhaps to base.css that will automatically apply to ALL sections on the site?

[DaisyVo]

Hi @revtekautoparts

There is only one Custom CSS field. Please check and follow my screenshot in the previous message. You just need to add it one time only.

Thank you!

Best,

Daisy - Avada Support Team

[oscprofessional]

Hi @revtekautoparts ,

Go to Online Store > Themes > Actions >Edit code > theme.liquid

Add below code before tag in the theme.liquid file

{%- if template contains 'index' -%}
@media screen and (min-width: 990px) {
    body .page-width-desktop, body .page-width {
        max-width: 100%;
        padding: 0 1rem;
    }
}
{%- endif -%}

[revtekautoparts]

That fixed one section. I need it to apply to all of my sections such as my gallery.