White Space on Sides When Viewing in Mobile

• 

  lmcarey05 · Member · Sep 6, 2020 at 5:42 pm

  • Copy link
  • Add topic to favorites

  When I view my webpage in mobile, the text for the “Personal Bio”, “Professional Bio”, and “Accomplishments” pages is very narrow and centered, despite having set the template attribute to full width.

  In looking at the code, I think this has something to do with the grid layout relating to this section:

  <div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-8 column1-desktop-grid__start-3 column1-desktop-grid__row-1 column1-tablet-grid__span-6 column1-tablet-grid__start-2 column1-tablet-grid__row-1 column1-mobile-grid__span-2 column1-mobile-grid__start-2 column1-mobile-grid__row-1"><div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none">

  Does anyone know how to fix this?

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

• 

  slantedplanet · Member · Sep 6, 2020 at 8:26 pm

  • Copy link

  Hi there!

  I don’t see any CSS that you should change as a fix for this.

  I am speculating because I can’t see everything about your site that staff can see, but I suspect this relates to your layout (block) grid settings. You can have different settings for desktop, tablet, and mobile. The settings for tablet and mobile need adjustment. In the Layout Grid block settings, look for the section with the heading Responsive Breakpoints.

  If this tip doesn’t get you to a fix, I recommend taking advantage of live chat support where a staff person can review your settings and offer more specific guidance.

  I hope this helps!

• 

  lmcarey05 · Member · Sep 10, 2020 at 8:18 pm

  • Copy link

  Thanks so much! I was in CSS mode mentality and completely neglected this. Worked perfect.