Help! Mobile Responsive image and text custom liquid

Store Design
1

Hello!

I am wanting to add a custom liquid section to my theme that uses an image file in my assets folder as the static image. I want the image to be max 538x538 and 100% width on mobile.

I have the h1 and paragraph section how I want it on desktop, but I cannot figure out how to get the text to move to below the image on mobile view.

Product Image

Product Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

@media only screen and (max-width: 768px) { div { width: 90%; margin: 0 auto; box-sizing: border-box; } h1, p { text-align: center; } img { width: 100%; } }
2

Hi TritonJK

If you add

flex-direction: column;

to your parent div your elements will stack.