Image with text sizing issues?

[jasminsharp97]

I'm working on this site: https://maison-rouge-ny.myshopify.com/pages/contact

PW: thifis

This is a text with image block, so it should be two columns, I can't figure out how to get it to get into 2 columns; it stays stacked no matter what I zoom my screen to. How do I get this page to look like this example?

[AllieHessel]

Okay, let me check, then I'll let you know.

[Moeed]

Hey @jasminsharp97 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.image-with-text-halves__grid.grid.grid--gapless.grid--1-col.grid--2-col-tablet.image-with-text__grid--reverse {
    display: flex !important;
    flex-flow: row-reverse !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi  @jasminsharp97  Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
#shopify-section-template--18647897637076__image_with_text_halves_NmHfbi .image-with-text-halves__grid{
    display: flex !important;
    flex-direction: row-reverse !important;
}

</style>

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

[steve_michael2 · Accepted solution]

1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom

.section-template--18647897637076__image_with_text_halves_NmHfbi-padding.gradient.color-scheme-1
.image-with-text-halves__grid.grid.grid--gapless.grid--1-col.grid--2-col-tablet.image-with-text__grid--reverse {
    display: flex !important;
    flex-flow: row-reverse !important;
}

 Thanks!

[jasminsharp97]

This worked, thank you!!

[DaisyVo]

Hi @jasminsharp97 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (min-width: 769px){
.image-with-text-halves__grid.grid {
    display: flex !important;
    flex-direction: row-reverse !important;
}
.image-with-text-halves__grid.grid > div {
    width: 45% !important;
}
}

Here is the result: https://prnt.sc/2iFC85be4eHB 

I hope this helps

Best,

Daisy