Increase product grid size in new Theme

DiWalt
Tourist
3 0 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? 🙂

 

This site should not be affected:

https://kleidezeit.com/

This site for example should be affected:

https://kleidezeit.com/collections/fruhling

 

 

Thank you!

 

 

Replies 4 (4)

Abdosamer
Shopify Partner
820 146 161

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

{% if page.handle == "fruhling" %}
<style>
  .page-width{

  width:100%

  max-width:100%

  margin:0 auto;

}
</style>
{% enif %}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
DiWalt
Tourist
3 0 1

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!

 

Abdosamer
Shopify Partner
820 146 161

@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;

}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
DiWalt
Tourist
3 0 1

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;
  }
}