How to adjust spacing on product page (mobile)

URL:  https://threadsonline.co.uk/store/p/canada-goose-black-hybridge-knit-jacket

Hi guys,

Above is a link to a product on my website. Desktop version looks good but mobile needs some small tweaks and I was wondering if anyone could help:

1. I would like the images on mobile display to fill the screen, it currently has a white boarder around it

2. I would like the product title and price to be center, but the description to stay on the left. (ideally i would like 'sold out' to appear next to the price rather then below it if possible as well. I have also made another post asking for help to make the sale price text red so it stands out).

3. There is too much excess spacing on the whole product page like between the product title, price, sold out message and variant field.

I will attach some screenshots of the issues. I have quiet a few tweaks I would like made on my website, so if anyone would like to discuss perhaps a one off payment in exchange for a list of tweaks that would be cool 🙂 

#1. #2. Use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
section#pdp {
    padding: 0 !important;
}
section.product-details.ProductItem-details {
    padding-left: 2vw;
    padding-right: 2vw;
}
h1.ProductItem-details-title, .product-price {
    text-align: center;
}
}

20 hours ago, tuanphan said:

#1. #2. Use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
section#pdp {
    padding: 0 !important;
}
section.product-details.ProductItem-details {
    padding-left: 2vw;
    padding-right: 2vw;
}
h1.ProductItem-details-title, .product-price {
    text-align: center;
}
}

 

Hey, thanks for this! So this fixed the width of the product image and the spacing issue, however now the text is slightly too close to the edge of the screen, and there is still a gap at the top of the product image (photos attached for reference) thank you!

You can adjust these number

You mean remove this gray space on mobile?

12 hours ago, tuanphan said:

You can adjust these number

You mean remove this gray space on mobile?

Ah great thank you, I have adjusted the padding and it now looks great 🙂

Yes, I have attached a screenshot of my mobile view, there is a gap between the product photo and the header which i would like to remove if possible? I have highlighted the gap in red on the screenshot.

Also last thing - How do i adjust the padding around the products under the 'you might also like' section? The products under this section on mobile view are right on the edge of the page like the description just was before I adjusted the padding.

Thank you soooo much! 🙂 

13 hours ago, tuanphan said:

You can use this CSS code under

@media screen and (max-width:767px) {
nav.ProductItem-nav {
    display: none !important;
}
.ProductItem-relatedProducts.ProductList.clear.sqs-pinterest-products-wrapper {
    padding-left: 2vw;
    padding-right: 2vw;
}
}

 

Worked perfectly!! Thank you very much, have a great day 🙂

On 2/24/2024 at 1:37 AM, tuanphan said:

You can use this CSS code under

@media screen and (max-width:767px) {
nav.ProductItem-nav {
    display: none !important;
}
.ProductItem-relatedProducts.ProductList.clear.sqs-pinterest-products-wrapper {
    padding-left: 2vw;
    padding-right: 2vw;
}
}

 

Hi @tuanphan,

I have a few more tweaks I need help with on my product page if you have any solutions 🙂

1.  Put 'sold out' next to the price rather then below it

2. Make 'sold out' in uppercase and bold

3. Decrease gap between price and product title (on mobile display only)

4. I have a divider on the bottom of all of my other pages (where the bottom of the page meets the footer) but I can't seem to add one to the product page, can this be done?

On 3/3/2024 at 7:44 PM, threadsonline said:

Hi @tuanphan,

I have a few more tweaks I need help with on my product page if you have any solutions 🙂

1.  Put 'sold out' next to the price rather then below it

2. Make 'sold out' in uppercase and bold

3. Decrease gap between price and product title (on mobile display only)

4. I have a divider on the bottom of all of my other pages (where the bottom of the page meets the footer) but I can't seem to add one to the product page, can this be done?

 

URL doesn't work. Can you share link to a sold out product? I will check easier

https://threadsonline.co.uk/store/p/canada-goose-black-hybridge-knit-jacket

5 hours ago, tuanphan said:

URL doesn't work. Can you share link to a sold out product? I will check easier

https://threadsonline.co.uk/store/p/canada-goose-black-hybridge-knit-jacket

Sure, try this one: https://threadsonline.co.uk/store/p/dsquared2-retro-embroidered-patch-logo-navy-cap

On 3/5/2024 at 9:37 PM, threadsonline said:

Sure, try this one: https://threadsonline.co.uk/store/p/dsquared2-retro-embroidered-patch-logo-navy-cap

Still doesn't exist

7 hours ago, tuanphan said:

Still doesn't exist

Sorry, this one will work: https://threadsonline.co.uk/store/p/cartier-rimless-square-sunglasses

On 3/3/2024 at 7:44 PM, threadsonline said:

Hi @tuanphan,

I have a few more tweaks I need help with on my product page if you have any solutions 🙂

1.  Put 'sold out' next to the price rather then below it

2. Make 'sold out' in uppercase and bold

3. Decrease gap between price and product title (on mobile display only)

4. I have a divider on the bottom of all of my other pages (where the bottom of the page meets the footer) but I can't seem to add one to the product page, can this be done?

 

Use this CSS code

body.view-item .product-mark.sold-out {
    display: none !important;
}

body.view-item .product-price:after {
    content: "Sold Out";
    margin-left: 20px;
    text-transform: uppercase;
    font-weight: bold;
}
@media screen and (max-width:767px) {
h1.ProductItem-details-title {
    margin-bottom: 5px !important;
}
}

38 minutes ago, tuanphan said:

Use this CSS code

body.view-item .product-mark.sold-out {
    display: none !important;
}

body.view-item .product-price:after {
    content: "Sold Out";
    margin-left: 20px;
    text-transform: uppercase;
    font-weight: bold;
}
@media screen and (max-width:767px) {
h1.ProductItem-details-title {
    margin-bottom: 5px !important;
}
}

 

Works perfect thank you! 🙂 

43 minutes ago, tuanphan said:

Use this CSS code

body.view-item .product-mark.sold-out {
    display: none !important;
}

body.view-item .product-price:after {
    content: "Sold Out";
    margin-left: 20px;
    text-transform: uppercase;
    font-weight: bold;
}
@media screen and (max-width:767px) {
h1.ProductItem-details-title {
    margin-bottom: 5px !important;
}
}

 

Hey sorry - I've just realized its now marked every item as sold out!

On 3/8/2024 at 7:16 PM, threadsonline said:

Hey sorry - I've just realized its now marked every item as sold out!

Change code to this

body.view-item .product-mark.sold-out {
    display: none !important;
}

body.view-item .sold-out .product-price:after {
    content: "Sold Out";
    margin-left: 20px;
    text-transform: uppercase;
    font-weight: bold;
}
@media screen and (max-width:767px) {
h1.ProductItem-details-title {
    margin-bottom: 5px !important;
}
}