[Resolved] Change order (photo and image) on mobile.

Home Forums Support [Resolved] Change order (photo and image) on mobile.

Home Forums Support Change order (photo and image) on mobile.

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

    Hi,

    For the mobile version, Im trying to display the title h2 before the image.
    Desktop version: I use the grid system (2 columns). Left side is the image. Right side is h2 + Text + list.
    Since my second container have more than the h2, I can’t use the order value option.

    Is there any CSS that will work?

    Thanks a lot!

    #2158694
    Elvin
    Staff
    Customer Support

    Hi Brian,

    Can you specify which part of the site do you want this applied on? Sharing a screenshot of the section with indicator would help a lot.

    I’ll inspect the site to check if perhaps it can actually be done with just CSS. 🙂

    If it’s the image and description within the GB Grid Block, you can change the order of things on mobile as shown here –
    https://share.getcloudapp.com/OAu6LdOj

    You basically have to select the Container block within the Grid block and click on it’s “Mobile” tab.

    You should see an “Order” text field. This allows you to set what displays first.

    A wise man once said:
    "Have you cleared your cache?"

    #2158971
    Brian

    Hi Elvin,

    Thanks for you quick answer.
    Here is a screenshot of the desktop view: https://share.getcloudapp.com/mXuYmLzW
    The section is on the home page.
    I only want to have the title on first position (and then the image). With the mobile order option, the order will also affect the headline and the rest of the container, which I don’t want.
    I looked for a CSS solution, tried a few things but nothing worked so far.

    Thanks again for you help!

    #2159007
    David
    Staff
    Customer Support

    Hi there,

    you can’t move blocks between grid columns – instead you need to:

    1. Above the Image Block add a duplicate of the H2 Headline.
    2. Now with your.2 x Headline blocks, select each one and in Advanced > Additional CSS Classes you can add the relevant GP hide-on-* classes see here:

    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    For example the new duplicate headline you could add:

    hide-on-desktop hide-on-tablet

    and on your original Headline add:

    hide-on-mobile

    #2159330
    Brian

    Hi David!

    Thanks for you super quick answer! This is exactly what I was looking for, these built-in classes works very well.

    Have a good day!

    #2159332
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.