Symmetry MOBILE: reverse picture-text allignment

Topic summary

Mobile layout issue on the About page (Shopify Symmetry theme): the user wanted consistent picture–text alignment on mobile (picture then text for three sections) instead of alternating layouts.

A helper provided custom code to insert under the in theme.liquid to reverse image/text order on mobile. The user confirmed this fixed the alignment.

New mobile requests followed: images appeared too large and spacing felt off. After the page link was restored, the helper shared general CSS snippets (not page-specific) to adjust image sizes and spacing, noting Shopify’s theme constraints and potential class conflicts.

The user adapted the snippets successfully, then asked to reduce only the space above the first image (between header and image). The helper supplied additional targeted CSS to tighten that top spacing.

Outcome: mobile alignment corrected, image sizes reduced, and spacing refined, including the first-image top margin. No outstanding issues reported.

Notes: screenshots and code snippets were central to the solution; final messages included an offer for premium support, but the technical problem appears resolved.

Summarized with AI on December 31. AI used: gpt-5.

Hi community,

could somebody help me with this? On my Desktop version we chose a changing picture/content allignment for our three sections.
But on the mobile version it’s not possible, therefore one picture is now on the wrong possition. We would like to have: picture - text, picture - text, picture - text.

Could somebody help me with this?

Thank you so much!

URL: https://casa-amao.com/pages/about
PW: deanee

Hi,

Even premium themes often restrict access to certain settings. However, I believe we can find a solution in this particular case. The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, I’ll help.

  1. Navigate to the ‘Edit Code’ option in your theme settings, then search for ‘theme.liquid’ in the search bar.

  2. Paste the following code below the ‘’ tag. Please refer to the attached screenshot for guidance.


Terence.

1 Like

@TerenceKEANE thanks a lot, the reverse order with the pictures worked like this!!! :folded_hands:

But now my format is a bit weird on the mobile version, could you help me with this?

  • the pictures are too big, is it possible to get them smaller? (more or less to the height I have marked in the picture attached)

  • there is some space missing/too much…

Thank you so much!

You are welcome :blush:

Your requests can be fulfilled. However, I couldn’t find the relevant section on the page below. If you provide the exact link, I’ll try to assist you.

https://casa-amao.com/pages/about

@TerenceKEANE hi and sorry, I was doing some works on the website and it changed something oooops. Now it’s back ON and you can access the site through that link again. It’s only for the mobile version where I need the corrections in space. Thank you so much!

https://casa-amao.com/pages/about

I believe I understand your request correctly. Here are some code snippets you can try. Since Shopify has limitations, I’ve written general code. Some classes might conflict if you rebuild the page structure on this page.

Of course, we can write JavaScript code specifically for each page, but that would require a different approach. Please let me know if you encounter any issues. I presume you’re new to the e-commerce industry. You might need to work on other aspects as well.

If you require further assistance, feel free to tag me when opening a new topic or send me a private message. I’ll be happy to help when I have time from my own software work. :wink:


1 Like

Thanks @TerenceKEANE for your help. I could figure it out and adapted the code snipets to how I wanted it.

Do you know if it’s possible to ONLY get the space above the first picture smaller? Between the header and picture?

…and yes, very new to this :slightly_smiling_face:

you are welcome… With the right person and the right code, anything is possible :wink:

Could you please add the following codes?


1 Like

Amazing, thank you so much @TerenceKEANE . Thank you so much in offering your help, for sure some more questions are gonna come up during the next weeks :folded_hands:

You’re most welcome! It was just a small thing for me :blush:

I’m not entirely sure what level of support you’re looking for, but if you require fast and detailed coding assistance, please let me know.

We offer the Unique “Premium Support” plans at affordable rates, including monthly, quarterly, bi-annual, and annual options. In addition to coding support, we also provide professional SEO reports at regular intervals, Advanced animation (Advanced CSS and JavaScript) coding assistance, Expert Consulting, Dedicated Custom Front-End Service and Coding, and Unique Mobile Premium Features. If you’re interested, you can check out the link in my signature. Feel free to reach out via private message if you have any questions. :wink:

Take care

Terence.