How can I modify the product-count facet to control page width?

Store Design
, ,
1

hello, this is my website: www.blinglittlething.com

Screenshot (250).png
Screenshot (250).png1920×923 224 KB

As seen above, the product-count facet in the right side of the screen is causing the white space at the end of this page, i want to change the placement of this facet so as to control page width, how to do that, since nothing is working from the things i tried. please help

2

Hi @blinglittlethin

I hope you are doing good and welcome to the Shopify Community!
I am Santanu from MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore).

Please add this css in your bottom of the css file:

@media screen and (max-width: 750px) {

.facets-vertical.page-width {padding: 0 2rem;}

}

Regards,

Santanu

3

Hello @blinglittlethin

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->base.css

@media only screen and (max-width: 767px){
.facets-vertical.page-width {
    padding: 0px 10px;
}
}

Output:

WebDeskSolution_0-1675859834216.png
WebDeskSolution_0-1675859834216.png431×406 94.6 KB

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.

4

Hi @blinglittlethin ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

@media screen and (max-width: 767px) {
.facets-vertical {
    padding: 0 10px !important;
    --grid-mobile-horizontal-spacing: 0px !important;
}
}

I hope it would help you
Best regards,

Kate | PageFly

5

thankyou kate

1 Like
6

hey, is there a way that my product grid could override the original page width padding (i.e.: Original padding: 0 1.5rem)

I want the grid to be padding: 0 0.

or something else that could be done so that just the product grid occupies the whole padded area as well.