Masonry Theme - image with text - move text below image

Store Design
1

Hi!

I would need some help to change the theme code to edit the ‘image with text’ section. I need to move the text below and have the three sections on the same row.

URL: https://babychou.ca/pages/notre-equipe

Thanks!!

1 Like
2

@Flavm

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 password its now password protect,
I will check out the issue and provide you a solution here.

2 Likes
3

Thank you so much for your response! @KetanKumar

I was able to find the password. it’s braylt

Please let me know you can access the site and provide me the instruction to solve this issue.

Thanks again!!!

1 Like
4

@Flavm

nope this fine can you please just give me screenshot which section do you need change?

2 Likes
5

Hi @KetanKumar

I was able to find the password to I edited my previous comment :slightly_smiling_face: The password is braylt.

Do you still need the screenshots or can you access the site now?

In the page I sent (https://babychou.ca/pages/notre-equipe) you there are 3 “image with text” sections, I would need to:

  • Move the text under the image
  • Put the three image+text in a row

Thanks!!

6

@Flavm

thanks

can you please confirm this

KetanKumar_0-1629983091358.png
KetanKumar_0-1629983091358.png1920×1080 343 KB

1 Like
7

@KetanKumar this is exactly what I need :slightly_smiling_face:

How should I proceed? Thanks!!

1 Like
8

@Flavm

yes please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
@media (min-width: 768px) {
#shopify-section-page-story-template .shopify-section {
    float: left;
    width: 33.33333%;
}
#shopify-section-page-story-template .shopify-section .text-beside-image {
flex-wrap: wrap;
}
#shopify-section-page-story-template .text-beside-image__text, #shopify-section-page-story-template .text-beside-image__image {
width: 100%;
flex-basis: 100%;
}
#shopify-section-page-story-template .text-beside-image__image {
min-height: 250px;
}
#shopify-section-page-story-template .text-beside-image__text {
    order: 2;
}
}
1 Like
9

This is great!!! Thanks a lot

1 Like
10

@Flavm

its my pleasure to help us

1 Like
11

@KetanKumar Thanks again!

I would need, if possible, to do the same thing with the three images + text at the bottom of my homepage https://babychou.ca/

I’m trying to apply the indications you gave me on it but I could use some help!

Thank you so much

12

@Flavm

yes please try this code

@media (min-width: 768px) {
#shopify-section-163000271519670fbc, #shopify-section-1630002729f050ec37, #shopify-section-1630002793ca6eaed7 {
    float: left;
    width: 33.33333%;
}
#shopify-section-163000271519670fbc .text-beside-image,
#shopify-section-1630002729f050ec37 .text-beside-image,
#shopify-section-1630002793ca6eaed7 .text-beside-image
 {
flex-wrap: wrap;
}
#shopify-section-163000271519670fbc .text-beside-image__text, 
#shopify-section-163000271519670fbc .text-beside-image__image,
#shopify-section-1630002729f050ec37 .text-beside-image__text, 
#shopify-section-1630002729f050ec37 .text-beside-image__image,
#shopify-section-1630002793ca6eaed7 .text-beside-image__text, 
#shopify-section-1630002793ca6eaed7 .text-beside-image__image
 {
width: 100%;
flex-basis: 100%;
}
#shopify-section-163000271519670fbc .text-beside-image__image,
#shopify-section-1630002729f050ec37 .text-beside-image__image,
#shopify-section-1630002793ca6eaed7 .text-beside-image__image
 {
min-height: 250px;
}
#shopify-section-163000271519670fbc .text-beside-image__text,
#shopify-section-1630002729f050ec37 .text-beside-image__text,
#shopify-section-1630002793ca6eaed7 .text-beside-image__text
 {
    order: 2;
}
}
1 Like