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

Solved
thelunalee
Tourist
7 0 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)

Accepted Solutions
diego_ezfy
Shopify Partner
2310 415 544

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

 

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

dmwwebartisan
Shopify Partner
9829 2237 3078

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 | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 8 (8)
diego_ezfy
Shopify Partner
2310 415 544

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

 

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

thelunalee
Tourist
7 0 1
dmwwebartisan
Shopify Partner
9829 2237 3078

@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 | Bag is a cart drawer that maximizes your sales. View app →
thelunalee
Tourist
7 0 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
9829 2237 3078

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 | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

bbqvilla
New Member
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
9829 2237 3078

@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 | Bag is a cart drawer that maximizes your sales. View app →