Fixing Mobile “Single Page” Template Formatting

• 

  jdksportsmedia · Member · Dec 29, 2023 at 4:14 pm

  • Copy link
  • Add topic to favorites

  Does anyone have suggestions as to what I can do to fix this? After fixing up the website on desktop, this is what a single page looks like on desktop:

  

  And this is what it looks like on mobile:

  

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

• 

  staff-totoro · Staff · Jan 3, 2024 at 11:20 pm

  • Copy link

  Hi there,

  I see that you have customized your single post template (the on that all individual blog posts use to form their layout) and in investigating this issue I noticed that you placed your blog title and featured image within a group block that has a large amount of padding added in the block layout settings.

  

  The issue is that these settings may look good in the desktop view, but on mobile where everything shrinks down to fit the screen, this much padding has the effect of “squeezing” the content. If you remove these settings you should see the mobile view will change to allow more text to be shown across the screen.

  If I can ask, what were you trying to do by adding this padding initially? Were you using the settings to help center your title and featured image or limit them so they do not display at full width? Or did you have something else in mind?

  Thanks for the additional info!