Suits theme on mobile

• 

  shanibums · Member · Jan 26, 2014 at 5:13 pm

  • Copy link
  • Add topic to favorites

  I just switched over to the Suits theme and working out the CSS coding. I thought I’d take a look with my phone to make sure it was compatible from both desktop to mobile. However, it looks like the right side gets cut off when viewing my blog on my phone. I’m not concerned about my sidebar. But the actual blog content, images, and header image are being cut off.

  I’ve used other themes before and it would display correctly. Is there anything I can do to fix this?

  http://www.http://shanibums.com/

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

• 

  shanibums · Member · Jan 26, 2014 at 11:02 pm

  • Copy link

  I have resolved this on my own. My header image is cut off along the sides, but luckily my site name is centered so I can tolerate it for now. Here is the resolution to allowing my content to fit within the screen.

  /* Mobile (Portrait) */
  @media only screen and (max-width: 1060px) {
  	.site-header .home-link,
  											.main-navigation,
  											.site-main,
  											.site-footer .sidebar-inner,
  											.site-info,
  											.site-main .sidebar-container,
  											.one-footer-sidebar .site-footer .widget-area,
  											.two-footer-sidebars .site-footer .widget-area,
  											.three-footer-sidebars .site-footer .widget-area {
  		margin: 0 auto;
  		width: 90%;
  	}
  
  	.site-main .sidebar-container {
  		float: none;
  	}
  
  	.site-main .content-area,
  											.single-attachment .content-area,
  											.full-width .content-area {
  		margin-right: 0;
  		margin-left: 0;
  		width: 100%;
  	}
  }
  
  /* Mobile (Landscape) */
  @media only screen and (min-width: 1060px) and (max-width: 1060px) {
  	.main-navigation,
  											.site-footer .sidebar-inner,
  											.site-info,
  											.site-main .sidebar-container,
  											.one-footer-sidebar .site-footer .widget-area,
  											.two-footer-sidebars .site-footer .widget-area,
  											.three-footer-sidebars .site-footer .widget-area {
  		margin: 0 auto;
  		width: 90%;
  	}
  
  	.site-main .content-area,
  											.single-attachment .content-area,
  											.full-width .content-area {
  		width: 100%;
  	}
  }