How can I add margins to my product page on mobile?

Store Design
, , ,
1

Hello,

My store is the following : www.holyhaze.fr

There is a problem on our mobile version product page, the text goes right to the ends of the screen, I would want it to start and finish a few px from the sides. How can I add margins on our product page?

2

Hi @holyhaze64 Please add this code in theme.css/base.css/index.css whichever is available in your theme.

div#shopify-section-template--18248633221388__main {
    margin-left: 10px !important;
}

If you are not sure where is your theme.css/base.css/index.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.css/base.css/index.css in the code in left hand side.
  6. Add the code at the bottom of the theme.css/base.css/index.css which ever is available in your theme.

Please Note you can change Margin Px according to your needs.

Result:

sahilsharma9515_0-1700733617149.png
sahilsharma9515_0-1700733617149.png733×748 62.6 KB

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

3

Hi @holyhaze64

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code before tag
4

Hello @holyhaze64 ,

I understand you are looking to provide margin around your product page.

You can add below mentioned code to obtain the desired output https://prnt.sc/m_CQ85OuoVRg , https://prnt.sc/60-0IHLDGF2R , https://prnt.sc/v6YYWMCCiRBh

The mentioned code will provide desired output for all screens as you can see in the above screenshot.

Please follow these steps for adding the code -:

  1. Go to Online Store → Themes-> Click on Three dots → Edit code.

  2. Search for the theme.liquid file.

  3. Now, add the below mentioned code at the bottom of the before tag.

@media only screen and (max-width: 1220px) { .shopify-section--product-template:not(.shopify-section) { margin: 15px; } }
  1. Save changes.

I hope the solution helps you.

Please let me know if you have any query or need any assistance.

Thank you.