Full width collection page - Symmetry Theme

[Luviend]

Hi!

Can anyone help me or have a good solution to the problem?
It concerns the collection page in the symmetry theme. I can’t get the entire row to utilize the full width. I have unchecked both in the settings but, there are no changes.

I have attached 1 image that shows how I want it (it is from the Edge theme). So i want to have same width as the picture who is shown with the black box.

Store is

www.luviend.no
pw : vaiclu

Thanks for any help

[Luviend]

here is how it looks on my theme (symmetry)

[devcoders]

@Luviend

vaiclu

Hi @Luviend

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > main.css and paste this at the bottow of the file:

.template-collection .cf .container {
    padding: 10px;
}

[Luviend]

WOW! Thank you very much, it worked perfectly! Is it also possible to make the “space” between the images a little narrower? So there isn’t so much white space around

[Luviend]

@devcoders Thank you very much, it worked perfectly! Is it also possible to make the “space” between the images a little narrower? So there isn’t so much white space around

[Luviend]

@devcoders i mean the products

[Huptech-Web]

Good day @Luviend , To reduce the spacing between images, just follow these steps.

1. Go to the Online Store in your Shopify admin.

2. Click Edit Code, then open base.css (or your custom CSS file).

3. Paste the CSS code provided below into the file.

/* Desktop css */

@media (min-width: 768px) {

.filter-container .product-grid {

gap: 12px; /* Reduce the value if required */

}

}

/* Mobile css */

@media (max-width: 767px) {

.filter-container .product-grid {

gap: 10px; /* Reduce the value if required */

}

}

I’ve also attached screenshots for your reference, so you can easily follow along.

If you have any questions or need further assistance, please don’t hesitate to ask.

If this solution helps you, please don’t forget to like and accept it.

Best Regards,

(S.P)

[devcoders]

@devcoders

.template-collection .cf .container {
    padding: 10px;
}

Hi @Luviend

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > main.css and paste this at the bottow of the file:

.template-collection .cf .container {
    padding: 10px;
}
.template-collection .cf .product-grid--per-row-5 {
    column-gap: 10px;
}

[Luviend]

You are an absolute legend! Thanks for all your help.

[devcoders]

Hi @Luviend

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts.

Best regards,
Devcoder

[tim_tairli]

Many themes use CSS variables to control important parameters.

In this case I feel it’s better to change these CSS variables to make theme code do the rest – work together with theme code, not against it.

Also, editing theme code for changes like these does not make sense – I’d rather use “Custom CSS” settings of the section in question.

Another benefit of “Custom CSS” section setting is that these rules are scoped to this section only, so you can setup different sections of the same type differently.

So, in this case, I’d do this:

.container {
  --page-container-width: 100%;
  --container-pad-x: 10px;
}

.product-grid {
  --gutter: 10px;
}

Also, allowing your product grid to grow full-bleed may look bad on ultra-wide monitors, where product cards will grow huge. Also, images may become fuzzy there.

So, luckily, theme has CSS variable to help with this. The following code will show

@media (min-width:1600px){
  .product-grid {
    --product-columns-desktop: 6;
  }
}

[Luviend]

How would you do for this section for example?
This is product list section that will be placed on front page. I want it full width and smaller gap of white between the products.

[tim_tairli]

Yes, these are the codes:

[Luviend]

That middle one. Where should i put that?
And when copying codes (can you just always put them in the bottom of file?)

[tim_tairli]

“Custom CSS” setting of the section in question. (in Customize).

Can also try Theme Settings=> Custom CSS, but with these selectors it may apply to other areas of the site.

As I said, “Custom CSS” setting of a Section scopes the code to apply only inside this particular section.

[Luviend]

Paste it down at the bottom here? I want the change to be default for whole theme and that product list. Not just that section on front page

[tim_tairli]

“Online Store”=> “Customize”=> “Theme settings”=> “Custom CSS”

[Luviend]

tried the code

.container {
—page-container-width: 100%;
—container-pad-x:10px;
}

.product-grid {
—gutter:10px;
}

in the custom css section of the product list. Got error for the code

[Luviend]

Worked now with

.container {
width: 100%;
padding-left: 10px;
padding-right: 10px;
}

.product-grid {
gap: 10px;
}

Thank you for the patience and help

[tim_tairli]

@Luviend

in the custom css section of the product list. Got error for the code

Does not generate any errors for me though?