How to move all product info a little bit to right on mobile version?

Store Design
,
1

Hi everyone!

I have problem with description of my products. Its stick to the left side and its only like that on mobile/small version

How can I move container with description etc. a little bit to the right so the words will not be at the “edge” of the site? (I dont want to move it on desktop version)

This is how it look on mobile version:

mobile version.png
mobile version.png973×1375 144 KB

And this is how it looks at pc version:

pc version.png
pc version.png2347×1243 232 KB

Here is preview of my page: (shop is offline)

https://eq8b50qgsmb9iyrg-92656828751.shopifypreview.com

Thanks!

2 Likes
2

Hey @Noissy .

Here’s how to fix that:

  • Navigate to Online Store > Three dots > Edit code
  • Find the theme.liquid file
  • Paste the code below right before the closing tag
  • Save and hard-refresh the storefront

If applied correctly, the result should be as follows :

Screenshot_2.png
Screenshot_2.png541×834 60.3 KB

1 Like
3

Hi @Noissy

Please add this code to Custom CSS in Sales Channels > Online store > Themes > Customize > Theme settings.

@media (max-width: 749px) {
    .product .product__info-wrapper { padding: 0 2rem; }
}
1 Like
4

Hello @Noissy

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

@media (max-width: 749px) {
.product .product__info-wrapper { padding: 0 2rem; }
}
1 Like
5

HEllo @Noissy
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> section-main-product.css
add this code at the end of the file and save.

.product.product--large.product--left.product--columns.product--mobile-show.grid.grid--1-col.grid--2-col-tablet {
margin: 30px !important;
}

Result

68.png
68.png444×538 27.1 KB

If this was helpful, hit the like button and accept the solution.
Thanks