How can I increase the product grid size to page maximum in a new theme?

Store Design
,
1

Hello,

I hope you can help us.

We want to increase product grid width to page maximum 100%.

We tried:

.page-width{

  max-width:1500px;

  margin:0 auto;

}

and changed it to:

.page-width{

  width:100%

  max-width:100%

  margin:0 auto;

}

However only certain pages (those containing only product grids, as in clothing categories) should be affected.

Any idea? :slightly_smiling_face:

This site should not be affected:

https://kleidezeit.com/

This site for example should be affected:

https://kleidezeit.com/collections/fruhling

Thank you!

1 Like
2

Hi @DiWalt , go to theme.liquid and add the following code before tag:

{% if page.handle == "fruhling" %}

{% enif %}
1 Like
3

Hi,

thanks for the fast answer! It did not work however.

I attached screenshot, hopefully I insert it correctly? Pressed save, afterwards the collection was still 50%. Link: https://ibb.co/8jJrdCw

I wonder if it has something to do with “SWYM” app, as these apps have changed quite a bit?

Also for my understanding, I would need to add every page where the “100%” width would apply, correct?

Thank you!

4

@DiWalt , you should remove this piece of code from anywhere except the code I provide you to notice the difference:

.page-width{

  width:100%

  max-width:100%

  margin:0 auto;

}
5

Hi I have no other lines with “page-width” entries in the theme.liquid.

However in the “theme.css.liquid” there are some more codes for that:

Maybe this collides here? (I am amateur I do not know the difference of the “css” in between)

body,html{
  background-color:{{ settings.color_body_bg | default: "#fff" }};
  background-color:var(--colorBody);
  color:{{ settings.color_body_text | default: "#1c1d1d" }};
  color:var(--colorTextBody);
}

.page-width{
  max-width:1500px;
  margin:0 auto;
}

.page-full,.page-width{
  padding:0 17px
}

@media only screen and (min-width:769px){

.page-full,.page-width{
    padding:0 40px
}
  }

.page-width--narrow{
  max-width:1000px;
}

.page-width--tiny{
  max-width:450px;
}

@media only screen and (max-width:768px){
  .page-width--flush-small{
    padding:0;
  }
}