- This topic has 5 replies, 4 voices, and was last updated 1 month, 3 weeks ago by David.
July 29, 2020 at 7:10 am #1380509Brian
I have a page where I have added the famous or infamous (which ever way you look at it) media and text block in gutenberg. It looks fine on desktop and tablet views but when I go to mobile view, I would like to see image text image text. Instead I see image text text image. Is there any way of getting around this?
Brian ThompsonJuly 29, 2020 at 7:49 am #1380668LeoStaffCustomer Support
I would recommend using the grid and container blocks from GB to recreate that.
It allows you to specify the order which they display on mobile:
https://www.screencast.com/t/LqMs7puisPJuly 29, 2020 at 8:35 am #1380758Brian
Thanks for that. I have remade it. It looks a lot better on mobile. One thing though, I find it hard to know where to click to make changes and whether I am clicking on the element, the grid or the container – I find that a grid or element overlaps – it only becomes visible when I actually click on it.
I also don’t know how to crop/ enlarge an image as I was able to do in the text and image block in order to better fill up the grid.
Also, I have added an image to the first grid but I can’t seem to get it back to editing visually again. I think I saved it in html mode but I can’t get it to go back to visual. Is there a way to fix that?
Brian ThompsonJuly 29, 2020 at 2:39 pm #1381129TomLead DeveloperLead Developer
1. That’s strange – any negative margins going on? The image block in Gutenberg can be a little tricky to worth with, unfortunately.
2. As for more control over the image – have you tried using a background image in the Container block? The Text + Media block uses the image as a background image, so you should be able to achieve something similar.
3. You should be able to click the three dots and click “Edit Visually”: https://www.screencast.com/t/0eYOXmMvOdAugust 7, 2020 at 3:44 am #1391063Brian
Sorry for the delay in getting back to you, Its amazing when I leave something for a week or so and get back to it, a lot of the problems seem to resolve themselves! The image that would only display itself in code in the backend seems to be ok. I would like to achieve the effect with the grid where the corners of the two images appear to touch. Here is an example:
Also, on the home page of the site, I have added a new block but it doesn’t seem to have the same padding as the grid which is below it. Is there a way of fixing this?
Brian ThompsonAugust 7, 2020 at 6:24 am #1391310DavidStaffCustomer Support
select the Grid Block parent:
And set the Horizontal gap to
Then add some padding to the Grid item containing your text.
Grids in GB wrap to new rows.
So if you created a grid with 4 grid items and set them all to 50% you would create a 2 column / 2 row grid.
You can even use the +Add new grid item to duplicate the block and place it at the end of the grid.
- You must be logged in to reply to this topic.