How to put a different mobile image without destroying the layout by desktop?

[Milos]

Hi there.

I want to use different image for mobile on my Testimonial site. I tried 2 ways (Testimonia and Testimonial site)

First I used Gutenbergs Blocks on “Testimonia” site and it has been easy and fun to achieve the layout I wanted to have. But I didn’t find any solution, how to put different mobile image there. I tried some CSS in Simple CSS for this site but without success …

So I choose different way on the Testimonial site. I customised Toms advice from another thread and used GP Hooks in the “Inside_site_container” hook and added some HTML.The result is I have different image for mobile but the text and image layout changed in the desktop and tablet view compared to the Testimonia site. …As you can see the image on the top is too near to the main navigation menu bar. On the other site the image caption and the text block are too far away from the image on the top. The reason is a hidden (from me) title of the site between the top image and caption of them. I didn’t find a solution how to move the title on up in Gutenberg Blocks.I guess the layout would be satisfactory again then…

Which way should I go? How can I best achieve the goal to put a different mobile image without destroying the layout by desktop and tablet view?

My website is not public yet and still password protected. Tell me how can I send you the password please.

Thanks in advance.

[Tom]

Hi there,

You can send the password through our contact form here: https://generatepress.com/contact

Just be sure to mention this topic.

Thanks! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Tom]

Hi there,

The Testimonia page looks like it’s using a regular image block.

I wonder if this plugin would be worth looking at?: https://wordpress.org/plugins/block-options/

It allows you to show/hide blocks based on desktop/tablet/mobile. So you could add two image blocks and show them based on your needs.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Milos]

Yes that is it! I could achieve the goal easy with this great plugin.
I appreciate your work Tom. You make great job and Im happy I chose GP 🙂
Thank you!

[Tom]

Glad I could help! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts