[Support request] Media and text block mobile stack

Home Forums Support [Support request] Media and text block mobile stack

Home Forums Support Media and text block mobile stack

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1380509
    Brian

    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

    #1380668
    Leo
    Staff
    Customer Support

    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

    #1380758
    Brian

    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.

    https://ibb.co/tsGxdqd

    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

    #1381129
    Tom
    Lead Developer
    Lead Developer

    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

    #1391063
    Brian

    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

    #1391310
    David
    Staff
    Customer Support

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.