Image and Content Offset

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.

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

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.

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 1 year, 7 months ago by lisia.

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.