Responsive Hero Image Text

• 

  ddtcc50 · Member · Nov 4, 2022 at 8:09 pm

  • Copy link
  • Add topic to favorites

  Hi everyone,

  Curious if it’s possible to make the text on the hero image populate underneath when viewed on mobile.

  I don’t want the text to remain on top of the hero image on mobile because it affects the readability. Please keep in mind the website is being built on a personal plan.

  Thank you!

  The blog I need help with is: (visible only to logged in users)

• 

  staff-totoro · Staff · Nov 7, 2022 at 3:55 am

  • Copy link

  Hi there,

  It is not possible to set the cover block to create an extra area for text (outside the image) to display on mobile.

  However, you can use the Media & Text block to accomplish the same goal: https://wordpress.com/support/wordpress-editor/blocks/media-text-block/

  the way the block works the text is not over the image, but beside it. If you were to set the background color of the section (where the text is locate) to be the same color as the background of your image however, the effect would be seamless. On desktop the text will appear beside the image, and on mobile the text will stack, and appear to be below the image.

  Hope that helps. Please let us know if you have any more questions.

• 

  ddtcc50 · Member · Nov 7, 2022 at 4:56 pm

  • Copy link

  Hi,

  This helps a lot, thank you.

  Do you know how to make the block span the entire width of the screen like the cover block?

• 

  staff-zinnia · Staff · Nov 7, 2022 at 6:32 pm

  • Copy link

  The customization available for that block like width can be found in the block toolbar: https://wordpress.com/support/wordpress-editor/blocks/media-text-block/#toc