Mobile - Layout Change

Site URL: https://www.workshop315.com/feasibility-studies

This seems like it should be some easy code, but I'm not savvy enough. I would like for an image to fall below text on a tablet sized screen to match how the page already reformats for the smaller (phone) screens.

How can I force an image to fall below the text on a tablet screen (similar to the small phone screen)?

Hello there!

The code to change the positioning of the text and image shown only on the page in the example above would be something like this:

#collection-6177601a56097560be5eed2e {
@media only screen and (max-width: 769px){
.sqs-row:nth-child(3) {
display: flex;
flex-direction: column;
	}
.sqs-row:nth-child(3) .sqs-col-4 {
width: 100% !important;
		}
	}
}

Most of the default layouts are structured by pages (collection), sections, rows, and then columns(sqs-col-...).  In the code above, we target the page ID, then the 3rd row on the page using - :nth-child(3) - , and apply the flex-column layout to the 3rd row when the dimensions are less than 769px (tablet-size).

Because the row and the column we're targeting won't be the correct width until later (640px) on mobile devices, we apply the width increase to the column nested inside the ":nth-child(3)" row early, demonstrated on the 8-9 lines of code.

Hope this help,

Daniel

Thank you so much! This helped me understand how to tweak things and also solved my problem.