[Resolved] Image and Text layout in Desktop and Mobile

Home Forums Support [Resolved] Image and Text layout in Desktop and Mobile

Home Forums Support Image and Text layout in Desktop and Mobile

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1517820
    Lee

    Hello there,

    Under “Services” (in desktop mode) on my front page, I’ve laid out the images and text in a way that I like.

    But it doesnt look right in mobile mode. In mobile mode, I’d like for the image to appear “above” the text in each of the containers under “Service”.

    Could you please tell me how I might achieve this?

    Many thanks.

    #1517938
    Leo
    Staff
    Customer Support

    Hi there,

    The order option would be what you are looking for:
    https://www.screencast.com/t/PtJ3C0sN05xh

    #1518026
    Lee

    Hey Leo,

    Could you please tell me what I’d need to do with the order option? Do I need to input a specific number?

    #1518028
    Leo
    Staff
    Customer Support

    Yes – so 1 will show up first.

    #1518030
    Lee

    Hey Leo,

    I’ve tried that but nothing seems to change?

    #1518032
    Leo
    Staff
    Customer Support

    I cleared my browser cache but not seeing anything added.

    Which grid/container did you add it to?

    #1518061
    Lee

    Hey Leo,

    Have a check now. I’ve applied it to the image under “Kids Guitar Lessons”.

    In desktop mode the image appears to the right of the text, but in mobile mode it appears below the text. I want it to appear above the text and heading.

    And if possible, its there also an option to have the image appear “between” the Heading and text in mobile mode?

    Thanks again.

    #1518065
    Leo
    Staff
    Customer Support

    Can you add Order 2 to the text part?

    #1518072
    Lee

    Brill, that’s worked.

    And could you please tell me how I might order the image to be placed in between the heading and the text?

    #1518073
    Leo
    Staff
    Customer Support

    That’s not possible, unfortunately.

    You can only re-order containers that are directly under the grid wrapper and not the contents within the container.

    #1518081
    Leo
    Staff
    Customer Support

    I guess a work around solution would be to add the heading on top of the image as well then add the hide-on-desktop class so it only shows on mobile:
    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    #1518088
    Lee

    That’s OK. Many thanks again for your help.

    #1518090
    Leo
    Staff
    Customer Support

    No problem ๐Ÿ™‚

    #1518094
    Lee

    One more thing Leo,

    I’ve applied the order options to all of the images and texts, but for some reason it doesnt seem to be working for the Skype container? Any idea why this might be?

    #1518096
    Leo
    Staff
    Customer Support

    Can you provide the link to your site again?

    The info is erased as soon as the topic is marked as resolved for security reason ๐Ÿ™‚

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