How to add a divider on the product detail page

Hi guys,

Can someone help me add a divider on my product detail page? There is the option to add this on all other pages but not this one for some reason? I have one on all my other pages as an example, it sits right above the footer.

Also whilst i'm here, is someone able to provide a code to decrease the height on my product photos on mobile view only? Thanks!

URL: https://threadsonline.co.uk/store/p/cp-company-zipped-overshirt

You could simply add the border line to the footer to ensure it shows up on every page of your website. Or you could add the following code to add it only to the product detail pages:
 

.tweak-products-width-full .products.collection-content-wrapper{
border-bottom: 1px solid rgba(0, 0, 0, .12);
}

For the height of images on mobile I'd try:

@media screen and (max-width: 767px){
.ProductItem-gallery-slides-item{

height: 80%!important;

}

And change the percent to whatever height you like.

13 minutes ago, E-W said:

You could simply add the border line to the footer to ensure it shows up on every page of your website. Or you could add the following code to add it only to the product detail pages:
 

 

.tweak-products-width-full .products.collection-content-wrapper{
border-bottom: 1px solid rgba(0, 0, 0, .12);
}

 

For the height of images on mobile I'd try:

@media screen and (max-width: 767px){
.ProductItem-gallery-slides-item{

height: 80%!important;

}

 

And change the percent to whatever height you like.

 

They both worked - thanks! But now I've got a massive gap between the product photo & title... could you help?

6 minutes ago, threadsonline said:

They both worked - thanks! But now I've got a massive gap between the product photo & title... could you help?

 

 

Also I now need to move my controls up to the center on the image on mobile view, could you help?

Also if you know how to remove the '1/2' in the top right hand corner that would be great 🙂 

Try this instead of the other code:

.ProductItem-gallery{
   height: 50vh!important;
}

This will hide the photo counter numbers:

.ProductItem .ProductItem-gallery-current-slide-indicator{

display: none;

}

31 minutes ago, E-W said:

Try this instead of the other code:

 

.ProductItem-gallery{
   height: 50vh!important;
}

Unfortunately this one just snips the photo (pls see screenshot)

& Thanks the photo counter number one worked 🙂 

On 3/15/2024 at 9:19 PM, threadsonline said:

Unfortunately this one just snips the photo (pls see screenshot)

& Thanks the photo counter number one worked 🙂 

I see it already centered to me

5 hours ago, tuanphan said:

I see it already centered to me

Hi Tuan, the above code snipped my image, it is supposed to look like this (attached). I just want to decrease the height of the image in mobile display as it takes up the whole page.

You can use this CSS code

/* Mobile Product Gallery Height */
@media screen and (max-width:767px) {
.tweak-product-basic-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides:before {
    padding-bottom:70% !important;
}
}