- This topic has 3 replies, 2 voices, and was last updated 6 months, 3 weeks ago by David.
September 6, 2022 at 2:57 am #2334636Ella
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!
EllaSeptember 6, 2022 at 4:32 am #2334724DavidStaffCustomer Support
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.
2. Do you mean here?
Adding CSS: http://docs.generatepress.com/article/adding-css/September 6, 2022 at 7:29 am #2334886Ella
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!
EllaSeptember 6, 2022 at 8:23 am #2335084DavidStaffCustomer Support
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.
Select the Image Block, and in Advanced > Additional CSS Class(es) add:
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:
Adding CSS: http://docs.generatepress.com/article/adding-css/
- You must be logged in to reply to this topic.