Image with text sizing issues?

Store Design
,

Topic summary

Issue: A Shopify “text with image” section on the Contact page would not display in two columns and remained stacked at all zoom levels. The goal was to match a two-column example shown in a screenshot.

Proposed fixes: Multiple suggestions involved adding code via Online Store > Themes > Edit code. Two replies advised inserting custom code above the tag in theme.liquid (exact code not shown). Another proposed editing theme.css/base.css to force the grid to display:flex with a row-reverse layout for the image/text grid.

Final solution: Adding Custom CSS in Theme Settings (Customize > Theme Settings > Custom CSS) to apply a desktop media query (≥769px) that sets .image-with-text-halves__grid to display:flex with flex-direction:row-reverse and assigns ~45% width to each child column. This produced the desired two-column layout, as confirmed by the original poster.

Notes: Screenshots were provided to illustrate the expected and resulting layouts. The fix relies on CSS flexbox and a media query targeting the section’s grid classes.

Status: Resolved; no outstanding questions.

Summarized with AI on December 14. AI used: gpt-5.
1

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?

Screenshot 2024-11-19 215452.png
Screenshot 2024-11-19 215452.png1744×928 197 KB

2 Likes
2

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

3

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 tag

RESULT:

Moeed_0-1732083283294.png
Moeed_0-1732083283294.png1889×625 140 KB

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

Best Regards,
Moeed

4

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

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

5
  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!

6

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

7

This worked, thank you!!