Dawn - Change the display of a section only on mobile

Store Design
, , , , , , , ,
1

Hi,

I would like to change only on mobile the display of a section (position of an image in the top center, size of the image, title in bold, & being able to adjust the size of the text of the description), BUT ONLY ON MOBILE

Thanx for your help!

Alex

from this

to this

2

Hi @Alex087

Ttry this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width:749px){
.swiper-slide.product_slider_md_box_new.swiper-slide-active {
    flex-direction: column;
}
.product_slider_md_box_left_new {
    width: 50%;
    height: 100%;
    align-self: center;
}
}
3

thank you @Made4uo-Ribe it worked.

other questions for you, thanks in advance:

  • on desktop i want the left margin of the text to be the same than the right one.

  • on mobile, i want to reduce the space between the image & the title

  • on desktop & mobile i want to reduce the size of the description text, & the space between lines of this description.

Thanx

4

Welcome, Please dont forget to Mark solution the post that helped you. Thanks!

  • on desktop i want the left margin of the text to be the same than the right one.

Currently they have padding left 20px right 10px. I change them for 20px you can change the size also.

Same Instruction.

.product_slider_md_box_right_new {
    padding: 0px 20px 0px 20px;
}

And Save.

The Image have padding 20px and the description with 20px between the image and the description there is a total of 40px space.

  • on mobile, i want to reduce the space between the image & the title.

We can reduce more. If you like.

@media only screen and (max-width: 749px){
h3.bold-title {
    margin-top: 0px;
}
}

And Save.

  • on desktop & mobile i want to reduce the size of the description text, & the space between lines of this description.

And for the last one. Try this one.

#ProductInfo-template--19674055147849__main > div.swiper-slide.product_slider_md_box_new.swiper-slide-active > div.product_slider_md_box_right_new > p {
    margin-top: 5px;
    line-height: 1.3;
}

And Save.

5

thanx @Made4uo-Ribe

6

ok @made4Uo i managed to fix, thanx again!

7

Oh, I thought there is another padding for mobile. Replace on this one then.

@media only screen and (min-width:750px){
.product_slider_md_box_right_new {
    padding: 0px 20px 0px 20px;
}
}

And Save.