Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: how to show featured product card in full width

how to show featured product card in full width

slv1997
Tourist
11 0 3

hi, 

 

i want the cards on featured product to be on full widgth of te page with no gap 

 

 

‏‏צילום מסך (183).png

Replies 7 (7)

Made4uo-Ribe
Shopify Partner
9035 2160 2664

Hi @slv1997 

Would you mind to share your store URL? Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

PageFly-Richard
Shopify Partner
4782 1082 1749

Hi @slv1997 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.slider-component-full-width {
    padding: 0 !important;
}
</style>

And enable this in theme editor to make it have the same structures

PageFlyRichard_0-1709082402011.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

slv1997
Tourist
11 0 3

hi tnx it worked. 

but now the text of the card  that in the left (the price and the name of the product) is too close to the limit of the screen, can you tell me how to fix it? 

I added a picture for illustration.

‏‏צילום מסך (185).png

slv1997
Tourist
11 0 3

anf if i want to change it not to full not to full widgth  but to tiny gap like this photo: (see the photo in full size)‏‏צילום מסך (186).png

PageFly-Richard
Shopify Partner
4782 1082 1749

Hi in case you want a tiny gap instead of full-width, so you can replace the code you added with this new one

<style>
.slider-component-full-width {
    padding: 0 5px !important;
}
.card--standard>.card__content .card__information {
padding-left:20px;
}
</style>

Note, you can change value of 5px and 20px to adjust the spacing

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

slv1997
Tourist
11 0 3

wow amaizing it worked! one last thing can you help me do the same tiny gap with the product cards in the "catalog"? (open the photo so you can see the photo in full size)

‏‏צילום מסך (188).png

 

slv1997
Tourist
11 0 3

wow amaizing it worked! one last thing can you help me do the same tiny gap with the product cards in the "catalog"? (open the photo so you can see the photo in full size) 

slv1997_0-1710275117761.png