Archived topic
Image and Text layout in Desktop and Mobile
18 replies · Started by Lee on November 4, 2020
Hello there,
Under "Services" (in desktop mode) on my front page, I've laid out the images and text in a way that I like.
But it doesnt look right in mobile mode. In mobile mode, I'd like for the image to appear "above" the text in each of the containers under "Service".
Could you please tell me how I might achieve this?
Many thanks.
Hi there,
The order option would be what you are looking for:
https://www.screencast.com/t/PtJ3C0sN05xh
Hey Leo,
Could you please tell me what I'd need to do with the order option? Do I need to input a specific number?
Yes - so 1 will show up first.
Hey Leo,
I've tried that but nothing seems to change?
I cleared my browser cache but not seeing anything added.
Which grid/container did you add it to?
Hey Leo,
Have a check now. I've applied it to the image under "Kids Guitar Lessons".
In desktop mode the image appears to the right of the text, but in mobile mode it appears below the text. I want it to appear above the text and heading.
And if possible, its there also an option to have the image appear "between" the Heading and text in mobile mode?
Thanks again.
Can you add Order 2 to the text part?
Brill, that's worked.
And could you please tell me how I might order the image to be placed in between the heading and the text?
That's not possible, unfortunately.
You can only re-order containers that are directly under the grid wrapper and not the contents within the container.
I guess a work around solution would be to add the heading on top of the image as well then add the hide-on-desktop class so it only shows on mobile:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes
That's OK. Many thanks again for your help.
No problem :)
One more thing Leo,
I've applied the order options to all of the images and texts, but for some reason it doesnt seem to be working for the Skype container? Any idea why this might be?
Can you provide the link to your site again?
The info is erased as soon as the topic is marked as resolved for security reason :)