How can I arrange image and text side by side in Dawn theme on mobile?

[bridgettdavis85]

Hi I have seen a few questions on this but none of the solutions work for me. I have the Dawn theme and I want to have the Image with Text section not stacked on mobile. I want the Image on the left with the text and the button on the right. What code can I use to make this happen?

[davies101]

To customize the Dawn theme for mobile, navigate to Online Store > Themes in your Shopify admin. Access theme code under Actions > Edit code. Locate the 'image-with-text' section, and adjust HTML/CSS to place the image on the left and text with button on the right for mobile.

Here's a basic example of how you might structure the HTML:

htmlCopy code

<div class="image-with-text-section"> <div class="image-container"> <img src="{{ section.settings.image | img_url }}" alt="{{ section.settings.image.alt }}"> </div> <div class="text-container"> <h2>{{ section.settings.title }}</h2> <p>{{ section.settings.text }}</p> <a href="{{ section.settings.button_link }}" class="button">{{ section.settings.button_text }}</a> </div> </div>

And here's a basic example of CSS to achieve the desired layout:

cssCopy code

.image-with-text-section { display: flex; flex-direction: column; } .image-container { order: 1; } .text-container { order: 2; } @media (min-width: 768px) { .image-with-text-section { flex-direction: row; align-items: center; } .image-container { width: 50%; order: 0; } .text-container { width: 50%; order: 1; } }

Make sure to adjust the class names and styles based on your theme's existing CSS structure.

After making these changes, save the file, and preview your store to see the updated layout. Make sure to test it on various mobile devices to ensure it displays correctly.

[bridgettdavis85]

Thank you for this but I don't see anything in your code that says class name. Where do I find this on the css copy