Jump to content

Another mobile layout text + image arrangement question

Recommended Posts

Hi,

Like several others on this forum I'm trying to display my text & images a certain order on mobile.

Due to my desktop layout that I have:

  • <image><text>
  • <text><image>
  • <image><text>

On mobile it's:

  • <image>
  • <text>
  • <text>
  • <image>
  • <image>
  • <text>

I want it to be this instead on mobile:

  • <text>
  • <image>
  • <text>
  • <image>
  • etc.

I tried reorganizing my content and then making sure it's linked correctly. It didn't work. I don't want to float the image and text together either.

I also tried this custom css:

@media screen and (max-width: 640px) {
	div#page-5ebce088e8a29e33413710f5>.row:last-child .col>.row:nth-child(even) {
        	display: flex;
        	flex-direction: column-reverse;
    }
}

This didn't work as well. I assume my page selector ID or other classes might be incorrect. When I applied this CSS on another page, with a different page ID, it worked. 🙃Why oh why...

Screen Shot 2020-05-22 at 11.38.32 PM.png

Edited by whoyouapp
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hi @tuanphan! I figured it out. My images were set to "Inline" and once I set them to "Stack", the custom CSS I was using above worked. I had to make minor adjustments to it, because it reversed the middle text+image.

	div#page-5ebce088e8a29e33413710f5>.row:last-child .col>.row:nth-child(4) {
		display: flex;
    	flex-direction: column-reverse;
    }
	div#page-5ebce088e8a29e33413710f5>.row:last-child .col>.row:nth-child(8) {
		display: flex;
    	flex-direction: column-reverse;
    }

Thanks for responding to my help call though! You still indirectly helped me when you shared this CSS in a different post. Without it, I wouldn't be able to figure it out.

Edited by whoyouapp
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.