Solved

Too wide to the left and space to the right.. How do I make same as cainte?

OneCap
Trailblazer
256 0 35

Too wide to the left and space to the right.. How do I make the exact same width as cainte? Please help.

My website: www.onecap.se 

Cainte: https://cainte.se/ 

 

Skärmavbild 2024-01-09 kl. 21.51.47.pngSkärmavbild 2024-01-07 kl. 15.40.58.png

Accepted Solution (1)
PageFly-Richard
Shopify Partner
4079 913 1567

This is an accepted solution.

@OneCap To fix the issue on homepage, you need to delete this code in your theme, you can search for it in the file you added.

.collection-slider-row .container {
    padding-left: 30px !important;
}

and code  to fix spacing on product page

<style>
.collection-slider-row .container {
    padding-left: 30px !important;
 padding-right: 30px !important;
}
.collection-listing .product-list {
    margin-left: -20px !important;
    margin-right: -20px !important;
}
@media (max-width: 767px){
.collection-listing .product-list {
    margin-left: -10px !important;
    margin-right: -10px !important;
}
.shopify-section .container {
    padding: 0 17px !important;
}
}


</style>

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


PageFly - #1 Page Builder for Shopify merchants.


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

View solution in original post

Replies 16 (16)

techlyser_web
Shopify Partner
1122 214 234

Hello @OneCap 

You can add code by following these steps 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>

   .collection-slider-row .container {
      padding-left: 65px !important;
   }

</style>

techlyser_web_0-1704834395669.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
OneCap
Trailblazer
256 0 35

Yes, but there is now still space between the two. I would like to have same small space there as CAINTE has... how do I fix it? ¨

 

Skärmavbild 2024-01-09 kl. 22.13.38.png

 

OneCap
Trailblazer
256 0 35

???

OneCap
Trailblazer
256 0 35

I removed the code since it was not equally distributed in mobile view... do you maybe have a cod that can get to as similar as CAINTE as possible? https://cainte.se/ 

 

Skärmavbild 2024-01-09 kl. 22.15.23.png

OneCap
Trailblazer
256 0 35

????

PageFly-Richard
Shopify Partner
4079 913 1567

Hi @OneCap 

 

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>
.collection-slider-row .container {
    padding-left: 30px !important;
 padding-right: 30px !important;
}
.collection-listing .product-list {
    margin-left: -20px !important;
    margin-right: -20px !important;
}
@media (max-width: 767px){
.collection-listing .product-list {
    margin-left: -10px;
    margin-right: -10px;
}
}


</style>

PageFlyRichard_0-1704846582903.png

 

 

PageFlyRichard_1-1704846582198.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!


PageFly - #1 Page Builder for Shopify merchants.


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

OneCap
Trailblazer
256 0 35

Hey Richard. One more question. In mobile view, it is a little bit too much to the left in collections section. You know how to fix it? 

 

Skärmavbild 2024-01-10 kl. 04.26.04.png

PageFly-Richard
Shopify Partner
4079 913 1567

@OneCap If its is mobile collection page

You can replace the code above with this new one so it has all the code included

<style>
.collection-slider-row .container {
    padding-left: 30px !important;
 padding-right: 30px !important;
}
.collection-listing .product-list {
    margin-left: -20px !important;
    margin-right: -20px !important;
}
@media (max-width: 767px){
.collection-listing .product-list {
    margin-left: -10px;
    margin-right: -10px;
}
.shopify-section .container {
    padding: 0 30px;
}
}


</style>

PageFlyRichard_0-1704857844774.pngPageFlyRichard_1-1704857850413.png

 

 

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


PageFly - #1 Page Builder for Shopify merchants.


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

OneCap
Trailblazer
256 0 35

thank you! do you know how to fill out the little small spaces for mobile view and make the pictures a little bit taller? same as CAINTE has on their website? 

 

Skärmavbild 2024-01-10 kl. 04.45.46.pngSkärmavbild 2024-01-10 kl. 04.43.30.pngSkärmavbild 2024-01-10 kl. 04.47.03.png

PageFly-Richard
Shopify Partner
4079 913 1567

Hi @OneCap 

You can replace the code with this new one to remove the spacing on the collection page

<style>
.collection-slider-row .container {
    padding-left: 30px !important;
 padding-right: 30px !important;
}
.collection-listing .product-list {
    margin-left: -20px !important;
    margin-right: -20px !important;
}
@media (max-width: 767px){
.collection-listing .product-list {
    margin-left: -10px;
    margin-right: -10px;
}
.shopify-section .container {
    padding: 0 20px;
}
}


</style>


About the media height, i checked and found that the height is the same as on cainte. The difference here is how they display the swatches and title 

 

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


PageFly - #1 Page Builder for Shopify merchants.


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

OneCap
Trailblazer
256 0 35

Do you know how to fix this new issue that appeared on mobile view? I don't want the spaces there on the product page. 

 

Skärmavbild 2024-01-10 kl. 05.57.17.png

OneCap
Trailblazer
256 0 35

The picture has also as you can see been moved a little too much up. If you could make it look similar as before would be perfect!!

PageFly-Richard
Shopify Partner
4079 913 1567

Okay you can try this code 

@OneCap 

<style>
.collection-slider-row .container {
    padding-left: 30px !important;
 padding-right: 30px !important;
}
.collection-listing .product-list {
    margin-left: -20px !important;
    margin-right: -20px !important;
}
@media (max-width: 767px){
.collection-listing .product-list {
    margin-left: -10px !important;
    margin-right: -10px !important;
}
.shopify-section .container {
    padding: 0 20px !important;
}
}


</style>

PageFlyRichard_0-1704869387158.png

 

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


PageFly - #1 Page Builder for Shopify merchants.


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

OneCap
Trailblazer
256 0 35

There is a little gap in the homepage to the left, do you think you can space it out so it's the same as the right and also in the product page, a small space. Do you think you can fill it in maybe? Skärmavbild 2024-01-10 kl. 08.01.53.pngSkärmavbild 2024-01-10 kl. 08.02.06.png

PageFly-Richard
Shopify Partner
4079 913 1567

This is an accepted solution.

@OneCap To fix the issue on homepage, you need to delete this code in your theme, you can search for it in the file you added.

.collection-slider-row .container {
    padding-left: 30px !important;
}

and code  to fix spacing on product page

<style>
.collection-slider-row .container {
    padding-left: 30px !important;
 padding-right: 30px !important;
}
.collection-listing .product-list {
    margin-left: -20px !important;
    margin-right: -20px !important;
}
@media (max-width: 767px){
.collection-listing .product-list {
    margin-left: -10px !important;
    margin-right: -10px !important;
}
.shopify-section .container {
    padding: 0 17px !important;
}
}


</style>

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


PageFly - #1 Page Builder for Shopify merchants.


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

ZenoPageBuilder
Shopify Partner
1052 203 219

Hello @OneCap 👋

In Shopify Admin, you can go to Edit theme code, open file styles.css and add this code at the bottom

 

.collection-listing .product-list {
    margin-left: 0 !important;
}

 

The result

Screenshot 2024-01-10 at 08.46.19.png

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com