I am currently trying to add some of Gutenberg's "wide with" blocks to a theme. In blog posts they, as they are supposed to, extent further to the left and right than the text of these blog posts.

On desktop displays this works just fine as there is sufficient empty space on both sides of the text. But when viewing these blog posts on phones, where the text fills the screen horizontally, these "wide with" blocks don't fit on the screen and produce horizontal scroll bars.

Is there any recommended way of dealing with this? For example, is it possible to turn images that are "wide with" on large screens into "normal width" for smaller screens?

  • Is this a theme that you've developed? – Jacob Peattie Feb 7 '19 at 12:06
  • This is referring to a self-made theme, right. But I ran into the same problem with a Genesis framework-based theme. – rocketbamboo Feb 7 '19 at 14:49
  • Well what I was getting at was if it's your own theme then you must have written the CSS for the wide class yourself, right? In which case you just need to use standard CSS media queries to change the behaviour on mobile. – Jacob Peattie Feb 7 '19 at 14:51
  • Thanks - that's what I was already thinking of. I was merely wondering whether I am missing something as most guides that explain how to add the .alignwide and the .alignfull classes don't address the issues on mobile devices at all, even though this is a problem that most designers must encounter. – rocketbamboo Feb 7 '19 at 15:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.