Move Heading above image in image with text

Store Design
1

Hello,

I have Image with text on my website with the Sense Theme. It looks fine on desktop but on mobile the Heading is below the image. Is there a way to move it above the image but only on mobile?

Does anyone have a solution to this?

Screenshot 2023-03-03 180104.png
Screenshot 2023-03-03 180104.png447×716 122 KB

1 Like
2

Sure. Here you go

https://keyboardmaniacs-3962.myshopify.com/products/104pcs-abs-universal-mechanical-keyboard-keycaps-ergonomic-blank-keycaps-for-cherry-mx-keyboard-replacement-backlit-key-cap

3

Hi @Levengmr ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-image-with-text.css->paste below code at the bottom of the file:

@media (max-width: 767px){
div:not(.image-with-text.image-with-text--no-overlap.page-width.isolate.collapse-corners.section-template--14422280077639__fe01f6fb-35c7-42c5-bcf3-522479d51239-padding)>.image-with-text__grid.grid.grid--gapless.grid--1-col.grid--2-col-tablet > div:first-child {
    order: 2;
}
div:not(.image-with-text.image-with-text--no-overlap.page-width.isolate.collapse-corners.section-template--14422280077639__fe01f6fb-35c7-42c5-bcf3-522479d51239-padding)>.image-with-text__grid.grid.grid--gapless.grid--1-col.grid--2-col-tablet > div:first-child > div:last-child {
    order: 1;
}
div:not(.image-with-text.image-with-text--no-overlap.page-width.isolate.collapse-corners.section-template--14422280077639__fe01f6fb-35c7-42c5-bcf3-522479d51239-padding)>.image-with-text__grid.grid.grid--gapless.grid--1-col.grid--2-col-tablet {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
}
}

Hope my answer will help you.

Best regards,

Victor | PageFly

4

Thank you, it worked!