Solved

Dawn theme | product page - how to add padding to the entire left side?

thelunalee
Tourist
11 1 1

Hi,

I'm wanting to move everything over a little bit to the left on my product pages.

This is so that it's more in the centre but still left aligned (text).

 

Here is the preview link:

https://bfpmmytfdcs7ysgl-27058765902.shopifypreview.com

Accepted Solutions (2)

diego_ezfy
Shopify Partner
2934 562 883

This is an accepted solution.

@thelunalee,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>@media (min-width: 750px){
    .product-section .product {
    padding-left: 100px;
}
}</style>


You can change the 100px to any value you wish. This will not take effect on mobile devices.

Kind regards,
Diego

 

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

 

@thelunalee 

Try this new code 

Add code Your assets/section-main-product.css bottom of the file.

@media screen and (min-width: 990px) {
.product:not(.product--no-media):not(.featured-product) .product__media-wrapper { max-width: 35% !important;}
.product {
    margin: 0 auto;
    justify-content: center;
}
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 9 (9)

diego_ezfy
Shopify Partner
2934 562 883

This is an accepted solution.

@thelunalee,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>@media (min-width: 750px){
    .product-section .product {
    padding-left: 100px;
}
}</style>


You can change the 100px to any value you wish. This will not take effect on mobile devices.

Kind regards,
Diego

 

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

thelunalee
Tourist
11 1 1

Amazing! Thank you! 

dmwwebartisan
Shopify Partner
12280 2546 3693

@thelunalee 

Add code Your assets/section-main-product.css bottom of the file.

@media screen and (min-width: 990px) {
.product:not(.product--no-media):not(.featured-product) .product__media-wrapper { max-width: 35% !important;}
product {
    margin: 0 auto;
    justify-content: center;
}
}

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
thelunalee
Tourist
11 1 1

@dmwwebartisan 

Hi, 

I couldn't get it to work, I think I may be pasting the code in the wrong place?

 

 

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

 

@thelunalee 

Try this new code 

Add code Your assets/section-main-product.css bottom of the file.

@media screen and (min-width: 990px) {
.product:not(.product--no-media):not(.featured-product) .product__media-wrapper { max-width: 35% !important;}
.product {
    margin: 0 auto;
    justify-content: center;
}
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
thelunalee
Tourist
11 1 1

Thank you!

bbqvilla
Visitor
2 0 0

how to add padding to the entire left side?

Use This Code...

@media screen and (min-width: 990px) {
.product:not(.product--no-media):not(.featured-product) .product_media-wrapper { max-width: 35% !important;}
product {
    margin: 0 auto;
    justify-content: center;
}
}

 

dmwwebartisan
Shopify Partner
12280 2546 3693

@bbqvilla 

Please share screenshot what do you want!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Nickoleo
New Member
4 0 0

Hello could you help me?

Heated Jacket – WintertimeWonder

Password is 123.

I would like to make margins on the sides, as you can see it is right on the border. 
Thanks