How to get horizontally aligned custom code and text to vertically align in mobile viewing

Technical Q&A
1

I know this is possible since if you put an image text block in shopify, they will align vertically on mobile…

This is the page: https://hypersolesorthotics.com/pages/workout

The custom code I want to align is the google maps part (next to the ‘paris is beautiful text’).

How would I modify the html below to keep the look I have on desktop and get the text and google maps part to vertically align on mobile?

Thanks!

The title of the document .container { display: flex; align-items: center; justify-content: center } .text { font-size: 20px; padding-left: 20px; }
2

Since your using flex make it wrap.

For only smaller screens use CSS media queries, something like the following:

@media only screen and (max-width: 749px) {
    .container {
        flex-wrap:wrap;
    }
    .container .iframe {
        order: 1; /* zero based */
    }
}

To make the heading appear before the map even though it is AFTER the map in the source-order use the CSS order property, example included in the above.

Goodluck.

3

Thanks for the reply, last night I got to work after you gave me the answer and I forgot to reply…So I just wanted to come back now and say I appreciate that.