Image and Content Offset

  • Resolved lisia

    (@lisia)


    3 years, 1 month ago

    Hello! In the block pattern “Image and Content Offset” the image and the text should appear one below the other in the mobile view. This would be great. Best regards, lisia

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author UXL Themes

    (@uxl)

    3 years, 1 month ago

    Hi @lisia

    The image and the text do already appear one below the other in mobile view.

    If it is not displaying properly on your website, could you please let me know your site URL and I’ll be happy to take a look. Thanks.

    Thread Starter lisia

    (@lisia)

    3 years, 1 month ago

    Thank you for your response. Unfortunately it doesn’t work well on my site in mobile view, which is just at beginning.

    https://hello.co.at/moderation/

    Best regards, lisia

    Theme Author UXL Themes

    (@uxl)

    3 years, 1 month ago

    Thanks for providing the link.

    I can see what you mean on mobile. The face in the image is covered on mobile.

    The pattern is designed so that the text box overlaps the image on the left and then on mobile the overlap moves to be lower and not cover as much of the left side of the image, but a bit more of the lower half of the image.

    It’s difficult to get it exactly right for all situations as we don’t know beforehand what content & images will be used on someone’s website.

    If I have understood correctly, you would like to have no overlap whatsoever on mobile?

    If so, please copy & paste this custom CSS at Appearance > Editor > Styles > Additional CSS:

    @media (max-width: 599px) {
  .wp-block-query.is-style-offset .is-style-offset-wrap {
    display: block;
  }
}

    The CSS code above will change the block style from grid to block and remove the overlap/offset on mobile only.

    Thread Starter lisia

    (@lisia)

    3 years, 1 month ago

    Thank you.

    First I could not see the field “additional css”. But then I found it with the url …/wp-admin/customize.php.

    Then I added the code and even added !important.:

    @media (max-width: 599px) {
  .wp-block-query.is-style-offset .is-style-offset-wrap {
    display: block !important;
  }
}

    Now it works in the mobile view.

    Thank you, best regards, lisia

    • This reply was modified 3 years, 1 month ago by lisia.
    Theme Author UXL Themes

    (@uxl)

    3 years, 1 month ago

    In WP 6.2 the Additional CSS can be found by clicking the three vertical dots to the right of the Styles heading.

    See image below from the site editor documentation.

    The !important declaration shouldn’t be needed, but leaving it there should do no harm either.

    Thank you for letting us know the custom CSS worked.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Image and Content Offset’ is closed to new replies.