Text Columns With Images - Alignment On Mobile/Desktop [Broadcast Theme]

Store Design
1

Dear experts,

I have a problem in how the text columns with images is displayed on mobile. I am using broadcast theme. I want columns that appear horizontally on desktop to appear vertically on mobile.

This is how the columns look like on the desktop:

Eduardo_DT_0-1649717162239.png
Eduardo_DT_0-1649717162239.png2782×1128 195 KB

This is how the columns look on mobile:

(horizontal)

Eduardo_DT_1-1649717243079.png
Eduardo_DT_1-1649717243079.png756×1138 236 KB

This is how I want the columns to appear on mobile:

(vertical)

Eduardo_DT_3-1649717369964.png
Eduardo_DT_3-1649717369964.png734×1470 86 KB

How can I make them appear vertical?

Thanks in advance,

2

Hi @Eduardo_DT ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

Hello @Eduardo_DT

Please share your store URL and password(If it is password protected).

So that I can check and suggest you a solution.

Thank you

4

Hi,

URL: https://wearesoluto.com/

Password: aahmen

Thanks

5

Hi,

URL: https://wearesoluto.com/

Password: aahmen

Thanks

6

Hi @Eduardo_DT ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
    #shopify-section-template--15715202236670__164554396534b57461 .grid {
        flex-wrap: wrap;
    }
    #shopify-section-template--15715202236670__164554396534b57461 .grid .column__grid__item {
        width: 100%;
        margin-left: 0 !important;
        margin-bottom: 20px !important;
    }
    #shopify-section-template--15715202236670__164554396534b57461 .grid .column__image {
        padding-top: 100% !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

2 Likes
7

Thank you very much! It worked.

8

Can you help me with a similar issue?