Archived topic
Media and text block mobile stack
5 replies · Started by Brian on July 29, 2020
Hi,
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?
Kind Regards,
Brian Thompson
Hi there,
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/LqMs7puisP
Hi Leo,
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?
Kind Regards,
Brian Thompson
Hi there,
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/0eYOXmMvOd
Hi Tom,
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:
https://www.tfmltd.com/about-us/
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?
Kind Regards,
Brian Thompson
Hi there,
select the Grid Block parent:
https://docs.generateblocks.com/article/grid-overview/#editing-our-grid-block
And set the Horizontal gap to 0.
Then add some padding to the Grid item containing your text.
Note:
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.
