Featured collection page width (Dawn Theme)

[swishlatvija]

Hello,

Could someone please show us how to change the width of Featured Collections? We want to set it to 1400px so it aligns with the red lines as in the picture below.

Link: https://eu-swish.myshopify.com/collections/xpt

Thank you so much!

[WebDeskSolution · Accepted solution]

Hello @swishlatvija 

Once you Log in to the Admin, then process the following steps:

Step 1: Go to Dashboard ->Online Store ->Theme-> Action->Edit code->
Step 2: Search the file base.css
Step 3: Paste the below CSS at bottom of the file -> Save

@media screen and (min-width: 750px)
{	#shopify-section-template--17173822931208__832a529b-6225-411a-84cb-1bfdedbb2fd9 .page-width
	{
		    max-width: 1220px;
		    padding: 0;
	}
}

Output:

If you find our reply helpful, please hit Like and Mark it as a Solution.

An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

[DavidEKim]

@swishlatvija 

Hi,

Please add the code below to the bottom of Assets > component-slider.css file.

@media screen and (min-width: 990px) {
  slider-component.slider-mobile-gutter.page-width.page-width-desktop, 
  .page-width-desktop {
    max-width: 1300px !important;
    padding: 0 40px !important;
  }
}

Hope it helps.

[swishlatvija]

Hey @DavidEKim ,

Thanks a lot! It worked for the product cards, but the collection title is still in a different layout setting. Could you please also assist so the text is aligned with the rest of the layout? Pic below.

[WebDeskSolution · Accepted solution]

Hello @swishlatvija 

Once you Log in to the Admin, then process the following steps:

Step 1: Go to Dashboard ->Online Store ->Theme-> Action->Edit code->
Step 2: Search the file base.css
Step 3: Paste the below CSS at bottom of the file -> Save

@media screen and (min-width: 750px)
{	#shopify-section-template--17173822931208__832a529b-6225-411a-84cb-1bfdedbb2fd9 .page-width
	{
		    max-width: 1220px;
		    padding: 0;
	}
}

Output:

If you find our reply helpful, please hit Like and Mark it as a Solution.

An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

[PageFly-Victor · Accepted solution]

Hi @swishlatvija 

You can try this code by following these steps:

Go to Online store => themes => actions => edit code  and add this code on file theme.liquid before tag </body>

<style>
@media screen and (min-width: 750px)
{
.collection__title.title-wrapper.title-wrapper--no-top-margin.page-width {
    max-width: 1220px;
    padding: 0;
}
}
</style>

Hope this answer helps.

Best regards,

Victor | PageFly

[swishlatvija]

Super grateful, thanks @PageFly-Victor @DavidEKim !