How can I expand product thumbnails to the edge of the page on mobile?

Store Design
, ,
1

Hello, would someone be able to provide me a code that can expand the product thumbnails to the edge of the web page on mobile? The space in between the products is fine, its just the outside where I would like them to be expanded to the edge of the site and not show any white. Any help would be appreciated, thank you.

Side edges full width 2.png
Side edges full width 2.png472×707 162 KB

2

Hello,

Please add your store url so we can take a look and suggest you some edits.

Thank you

3

Hi @rezithclo ,

Could you please share URL and your store password if it enabled? So that we can help you.
Thank you.

4
5

Site is rezith.com

1 Like
6

Hi @rezithclo ,

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

@media screen and (max-width: 749px){
slider-component.page-width {
   padding: unset !important;
}
}

Hope my answer will help you.

Best regards,

Victor | PageFly

7

https://pzv21hpjen3heymu-52120158362.shopifypreview.com

Doesnt seem to work

8

@rezithclo ,

I see in the preview link, the product thumbnail has taken up the full width

PageFlyVictor_0-1677703664271.png
PageFlyVictor_0-1677703664271.png521×683 131 KB

9

Nevermind it does work! However the text gets pushed to the edge as well, is there any way to push the text to the right a bit on the cards on the left?

10

Nevermind it does work! However the text gets pushed to the edge as well, is there any way to push the text to the right a bit on the cards on the left for mobile?

11

https://www.aimeleondore.com/collections/shop-all

This is pretty much how we want our text to be on mobile with the product grid

12

Yes, you can add this code below to component-card.css:

@media screen and (max-width: 749px){
.card__information {
    padding-left: 7px !important;
}
}
13

Hello,

Add below css at the bottom of the file component-card.css.

@media screen and (max-width: 749px) {
	.card:not(.ratio)>.card__content{
		padding-left: 3px !important;
	}
}

Let me know if it worked.

Thank you