Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
whoyouapp

Another mobile layout text + image arrangement question

Question

Posted (edited)

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

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 0
Posted (edited)

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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...