How can I adjust the collection grid width in the turbo theme?

Store Design
1

Hi I’m working on the turbo theme by out off the sandbox. For collection pages the theme has a collection banner image which is full width and then the actual collection grid sits in 1200px wide box, I would like the collection grid to display as max-width: 100%; width: 94%; without effecting the full width banner at the top. Is this possible?

How it currently looks:

chrome_Qi6bw4xJ56.png
chrome_Qi6bw4xJ56.png1869×743 154 KB

How i want it to look:

chrome_QJkZNxzT5H.png
chrome_QJkZNxzT5H.png1851×667 123 KB

I can achieve the look i want, by changing the .section full-width to 100% in chrome inspect, but if i change this in css it obviously changes all the sections on the page to this, which affects the banner image.

2

@PJ_Robertson1

Please share your web shop URL !

Thanks!

1 Like
3

Hey there the store isn’t live yet

Password:

iaskah

1 Like
4

oh and to view a collection with products

https://ciovita-us.myshopify.com/collections/mens-apex-cycling-jerseys

5

@PJ_Robertson1

Please add the following code at the bottom of your assets/styles.css file

#shopify-section-collection-template .section {
  max-width: 100% !important;
    width: 100% !important;
}

Thanks!

1 Like
6

Thanks, this is kind of it, but is it possible to make the collection section width 96%, without it affecting the banner image? So make it { max-width: 100% !important; width: 100% !important; } but only target the collection grid?

7

Sorry i mean make it { max-width: 100% !important; width: 96% !important; }

8

@PJ_Robertson1

Please add this

#shopify-section-collection-template .section {
  max-width: 100% !important;
    width: 96% !important;
}
9

Hey doing that also makes the banner 96% width, see screenshot… you can see the white margins on the left and right, I would like the banner to stay full screen, but have the collection below 96% width, I’m not sure if that is possible?

PJ_Robertson1_0-1623847048013.png
PJ_Robertson1_0-1623847048013.png1898×931 236 KB

1 Like
10

@PJ_Robertson1

Remove all Previous code & add this new code .

#shopify-section-collection-template .section {
    max-width: 100%!important;
    width: 100%!important;
}

#shopify-section-collection-template .image-element__wrap {
    max-width: 96% !important;
}
11

Hey that still creates white borders around the banner image, since we are telling the image wrap to be 96%.

I want the .image-element__wrap to be 100% and the section below it (the collection grid) to be 96%. Sorry if I am not being clear.

12

@PJ_Robertson1

Please share screenshot what do you want !

Thanks!

1 Like
13

Hey There,

I was just playing around, i tried…

#shopify-section-collection-template .section {
max-width: 100%!important;
width: 100%!important;
}

#shopify-section-collection-template .product-list {
max-width: 96% !important;
}

and this has achieved exactly what i want. Thank you so much for your help.

14

@PJ_Robertson1

Remove previous css and add this

#shopify-section-collection-template .section {
    max-width: 100%!important;
    width: 100%!important;
}

#shopify-section-collection-template  .content-wrapper {
    width: 96%;
    margin: 0 auto;
}
1 Like
15

Thank you that is perfect