How can I edit multicolumn on my product page?

Store Design
, , , , , , ,
1

hi,

On my product page, there is a multicolumn at the bottom of the page (see image) on which I want to edit:

  • On mobile, the title isn’t in the center

  • On mobile, I want to get rid of the arrows bellow (see image)

  • On mobile and desktop, I want to add a line of text bellow the column (see image 2)

Thanks for your help!

Alex

in the middle.

IMG_1436.jpg
IMG_1436.jpg1290×2796 195 KB

Screenshot 2023-09-25 at 12.20.21.png
Screenshot 2023-09-25 at 12.20.21.png2704×626 76.8 KB

2

Hello @Alex087
Its Artzen Technologies! We will be happy to help you today.

To make the below changes on mobile, add the CSS to the media query.

@media screen and (max-width: 769px) {}

  1. To make title center.
.product__title{
    text-align: center;
}
  1. To remove the arrows below image.
.product .slider-button {
    display: none;
}

Artzen_tech_0-1695640427977.png
Artzen_tech_0-1695640427977.png860×365 57.2 KB

Let me know if need further assistance
Regards,
Artzen Technologies

3

thank you @Artzen_tech it didn’t work

I want to only apply to this section:

#shopify-section-template–19674055147849__dd284a69-d78b-4a1b-b21c-0c862be7fa8d

It works on desktop but not on mobile

Thank you for your help

4

I already mentioned you to add the CSS to the media query.

@media screen and (max-width: 769px) {

}

This will only work for the mobile devices

5

ok @Artzen_tech That is what i added in base.css

@media only screen and (max-width: 990px) {
#shopify-section-template--19674055147849__dd284a69-d78b-4a1b-b21c-0c862be7fa8d 
.product__title{
    text-align: center; !important;
}
#shopify-section-template--19674055147849__dd284a69-d78b-4a1b-b21c-0c862be7fa8d 
.product .slider-button {
    display: none; !important;
}
#shopify-section-template--19674055147849__dd284a69-d78b-4a1b-b21c-0c862be7fa8d 
.multicolumn .title-wrapper-with-link {
    justify-content: center!important;
}
}
6

Add the CSS as I told you in the media query. Avoid writing this.
#shopify-section-template–19674055147849__dd284a69-d78b-4a1b-b21c-0c862be7fa8d

@media only screen and (max-width: 769px) {

.product__title{
    text-align: center; !important;
}

.product .slider-button {
    display: none; !important;
}

.multicolumn .title-wrapper-with-link {
    justify-content: center!important;
}
}

Write this CSS in place of your

7

@Artzen_tech you mean added this code in theme.liquid? I just did it doesn’t work

#shopify-section-template--19674055147849__dd284a69-d78b-4a1b-b21c-0c862be7fa8d .multicolumn .title-wrapper-with-link {
    justify-content: center!important;
}
8

Just have a look at my CSS and then see the difference which I am saying

9

@Artzen_tech i just did, it applied to all sections except the one i want