Adjusting Image with Text on Mobile ONLY (Sense)

Store Design
1

Hello! I need help adjusting some stuff on the “Image with Text” section, but ONLY on mobile (not dekstop)

See the attached photo below:

shaz26_1-1665031585570.png
shaz26_1-1665031585570.png449×952 276 KB

  1. I need to adjust these spaces between each text.

  2. I need to make this headline size slightly smaller.

How do I do that via Edit Code? Thanks in advance!

Website: https://kiyo.com.au

2

Hi @shaz26 ,

Please paste below CSS code at the bottom of base.css

.image-with-text__text-item .image-with-text__content {
    padding-top: 2rem;
}

.image-with-text__text-item .image-with-text__content  .image-with-text__text {
    margin-top: 1rem;
}
3

Hi @Shaz26

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code

-Asset-> component-image-with.css paste the below code at the bottom of the file.

@media(max-width:767px){

#ImageWithText–template–15499443241115__image-with-text{

padding-top:16px !important;

padding-bottom:16px !important

}

#ImageWithText–template–15499443241115__image-with-text h2.image-with-text__heading.h1{font-size:28px !important}

}

#ImageWithText–template–15499443241115__image-with-text .image-with-text__text.rte.body{

margin-top:0 !important

}

}

PageFly_0-1665034298094.png
PageFly_0-1665034298094.png403×585 82.8 KB

Hope my solution works perfectly for you!

Best Regards;

PageFly

4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
@media only screen and (max-width: 500px){
h2.image-with-text__heading.h1 {
margin-top: -20px!important;
}
.image-with-text__text.rte.body {
margin-top: 10px;
}
.image-with-text__content .image-with-text__text+.button {
margin-top: 10px;
margin-bottom: -20px;
}
}

Screenshot :- https://prnt.sc/pPdnfkRDnTY5

5

Amazing, this is perfect!! Thanks so much! While we’re at it. Do you know how to crop the size of the image (on mobile) slightly? At the moment the height is set as “Adapt to Image”, but I want it to be slightly smaller on mobile only.

shaz26_0-1665040099348.png
shaz26_0-1665040099348.png446×908 263 KB

kiyo.com.au

6

Hello @shaz26 ,

To fix this you need to add the code below to your theme.liquid file:

  1. Go to your shopify admin > Sales channel > Online store
  2. Select your theme > Click on action > Edit code
  3. Open theme.liquid in layout folder
  4. Paste the code below, just before the in theme.liquid file
  5. Save the changes

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

/* for adjusting space between the text*/

.image-with-text__content{

padding-top: 10px !important;

padding-bottom: 10px !important;

}

.image-with-text__content .image-with-text__text.rte.body{

margin-top: 0px !important;

}

.image-with-text__content .button.button–primary{

margin-top: 0px !important;

}

/* for adjusting heading size */

.image-with-text__heading{

font-size: 22px !important;

}

}

Hope this too will help you

Al the best,

CedCommerce