'images with text' section spacing/ layout looking different on mobile (mojave theme)

Store Design
1

Hello, i am adding ‘images with text’ sections to my product pages, however, the ‘secondary’ image text is sitting under the photo on desktop but has a huge gap on mobile. Is there any way I can fix this issue?

1 Like
2

@llwarters

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

jamdonutyoga.nz

4

jamdonutyoga.nz

1 Like
5

Hi @llwarters

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

Add this css at the bottom

Online Store->Theme->Edit code

assets-> section-images-with-text.css

.images-with-text__entry {

margin: -15rem 0 0 !important;

}

Hope you find my answer helpful!

Regards,

PageFly

6

Hi @llwarters ,

  1. From Shopify dashboard, go to Online store > Themes > Edit code

  2. In the search box, search for the file named base.scss

  3. Scroll to the very end of this file, and paste this code:

@media(max-width:768px){
	.richtext--spacing-mobile-compact {
		padding: 0.4rem 0;
	}
}
7

@llwarters

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-richtext.css ->paste below code at the bottom of the file.
.richtext--spacing-mobile-compact {
    padding: 10px 0px;
}
8

Thank you PageFly… it has ALMOST worked! Your coding swapped the issue around so then the text hid under the image on mobile.. i changed your coding to:

.images-with-text__entry {

margin: +1rem 0 0 !important;

}

This has got the images to sit in a good place on mobile viewing but now on the desktop view the text is not centred next to the image and instead sits towards the bottom on the image leaving a large gap above. Is there any way to centre next to the image on desktop view while keeping it in the correct place on mobile?