Page width issue

[ellacoker]

Been messing around now with CSS and cant get the title and collection items to line up perfectly. I am trying to get it to 95% of page width. Any help much appreciated. Thanks so much.

thesetcollective

PW: ellaella

[Samita-Danny]

@ellacoker

ellaella

Hi! You can try this custom CSS:

@media screen and (min-width: 990px) {
  .collection--full-width slider-component:not(.slider-component-desktop) {
    max-width: 95%;
  }

  #shopify-section-template--22597247271189__featured_collection
    .collection__title.title-wrapper {
    max-width: 95%;
    margin: auto;
    padding-inline: 3rem;
  }
}

I hope this will work for you!

[Dan-From-Ryviu]

Please add this code to Custom CSS of that section

.page-width { padding: 0 2.5rem !important; }

[ellacoker]

@Samita-Danny

@media screen and (min-width: 990px) {
  .collection--full-width slider-component:not(.slider-component-desktop) {
    max-width: 95%;
  }

  #shopify-section-template--22597247271189__featured_collection
    .collection__title.title-wrapper {
    max-width: 95%;
    margin: auto;
    padding-inline: 3rem;
  }
}

Thanks Dan - I am not sure why but it says invalid CSS? Any ideas why?

[Dan-From-Ryviu]

So please add this code to Custom CSS in Them settings instead.

#shopify-section-template--22597247271189__featured_collection .page-width { padding: 0 2.5rem !important; }

[ellacoker]

I just tried that - It seems the featured collection is fine but its the title itself. Please see screenshot.

[Dan-From-Ryviu]

@Dan-From-Ryviu

#shopify-section-template--22597247271189__featured_collection .page-width { padding: 0 2.5rem !important; }

Please update the code to this

#shopify-section-template--22597247271189__featured_collection .page-width { padding: 0 2.5rem !important; max-width: 100%; }

[ellacoker]

@Dan-From-Ryviu

#shopify-section-template--22597247271189__featured_collection .page-width { padding: 0 2.5rem !important; max-width: 100%; }

it worked. thanks so much.

[mageplaza-cs]

Hi @ellacoker ,
Your collection looks good if you prefer the title to be centered.
Please add the following CSS to the section you’re currently editing:

#shopify-section-template--22597247271189__featured_collection .page-width { 
    padding: 0 2.5rem !important; 
    max-width: 100%; 
    text-align: center;
}

[Dan-From-Ryviu]

You are very welcome.

[Samita-Danny]

Hi again!

Class .page-width is out of featured collection block.

You should add custom css to Custom CSS in settings