Showing two blocks on mobile stead of one | Alchemy Theme

Store Design
, ,

Topic summary

A store owner wants to display two blocks side-by-side on mobile instead of the default single-column layout in the Alchemy theme.

Solution Provided:

  • Add custom CSS to styles.css targeting mobile viewports (max-width: 767px)
  • The code makes the container use flexbox display and sets image blocks to 50% width
  • This creates a two-column grid on mobile devices

Follow-up Issue:
After implementing the initial fix, the store owner requested help positioning the feature links (blue boxes) centered below each image.

Additional CSS:
Multiple contributors provided supplementary code snippets to:

  • Adjust font sizes for overlay blocks on smaller screens
  • Fine-tune padding and positioning of feature links
  • Ensure proper display at various mobile breakpoints (575px, 767px)

The issue was marked as resolved with the combined CSS solutions successfully achieving the desired mobile layout.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi,

My question concerns this store: https://717-shop.myshopify.com

I want to show two block on mobile instead of one. Here is a screenshot of the three block on desktop:

Teddy9_0-1676975703328.png
Teddy9_0-1676975703328.png1166×621 651 KB

Here the mobile version:

Teddy9_1-1676975747196.png
Teddy9_1-1676975747196.png409×520 159 KB

How do you make two block next to each other only for mobile?

Thank you for help.

Cheers,

Teddy

2

Hello @Teddy9

It’s GemPages support team and glad to support you today.

Please share password?

3

Hey @GemPages ,

My apologies sure here it is: ‘jolo’

4

@Teddy9

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > styles.css and paste this at the bottom of the file:
@media (max-width: 767px) {
    .container.flexible-layout {
        display: flex;
    }
    .column-third.img-block {
        width: 50% !important;
    }
}
1 Like
5

Hey @infoatcodelab7

Thanks for your swift reply. It worked see print screen. How can I make sure that the links are displayed lower inside the center of the blue box below each image?

Teddy9_0-1676977281302.png
Teddy9_0-1676977281302.png330×260 85.7 KB

6

@Teddy9

I would like to give you a solution to support you.

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid theme file.

  3. Paste the below code before :

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

1 Like
7

Thanks you for sharing code

1 Like
8

THANKS!!!

9

THANKS!!

10

@Teddy9

If helpful then please Like and Accept Solution .

@media (max-width: 575px) {
    span.overlay__block.feature-link {
        font-size: 14px;
    }
    .section-gallery .img-block__img-wrapper .overlay{
        padding: 20px;
    }
}

@media (max-width: 375px) {
    span.overlay__block.feature-link {
        font-size: 11px;
    }
}
1 Like