[Support request] Image Issue & Mobile Question

[Ella]

Hello,

Two things on this page: https://www.totallypurrfect.com/about/

1) Please view on desktop. The second image I changed from 100% to 75% and it’s perfect – smaller and made central so that the text no longer touches it. When I try to do this on the first picture however, it instead just zooms into the picture and keeps it right against the text. Do you know why this is or what I can do to get it looking the same please?

2) Also, on mobile – I want it to show: text up until “What To Expect” then image above that title, text again, up until “What To Do Next” and the second image above that second title – keeping desktop looking the same, but changing the arrangement on mobile. How do I do this please? As the text from “well hello, hello” down to “talking of which” is all in one block so I’m not sure how to slide it in between!

Thanks for your help!

Ella

[David]

Hi there,

1. i would set the Image blocks to be 100%, so they always fill the Container. Then select the Grid Block and set the Horizontal gap on the grid.

https://docs.generateblocks.com/article/grid-overview/#horizontal-gap

2. Do you mean here?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ella]

1) Okay, got it, put the image back to 100%, thank you. How much would you recommend setting as the horizontal gaps? And this should be both left and right: padding, margin or boarder size? On both columns or just the one with the image? What’s the standard? 🙂

2) And yep, I want the first image to go in that gap there – on mobile only. Desktop to stay the same!

Thanks,
Ella

[David]

1. The size of the Gap is up to you 🙂 – i personally would use 40px.
The gap will automatically put space between the content, so no padding or margin should be needed.

2. Ok, so thats more complicated… if you consider each block you add to a page sits inside a container, its not possible to make a block jump between containers ( well not without some Javascript ). So….

Select the Image Block, and in Advanced > Additional CSS Class(es) add: hide-on-mobile

Then in the position you want to display the image on mobile add another image block, with the exact same image, and in its Advanced > Additional CSS Class(es) add: hide-on-desktop hide-on-tablet

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts