Mobile version of Scrappy is not showing properly

  • Resolved Annie83

    (@annie83)


    12 years, 3 months ago

    The mobile version of my site (https://www.annemariesintjago.nl)uses only about 60% of the width of the screen width. About 40% of the width (to the right) is showing the backgroundcolour (which is brownish).
    In online emulators the content uses 100% of the screen width, but on my iPhone only 60%.
    I have no idea how to get this right. Or if it’s just my phone, or a problem with CSS (or maybe PHP, which I know next to nothing of)
    I changed the width of the following CSS code from 800 to 600 (otherwise my iPad2 would use this CSS code, which I think doesn’t look too good). However, I had the same problem before I started making changes, so It shouldn’t have anything to do with that.
    So this is my code for the screens up to 600px

    @media screen and ( max-width: 600px ) {
	#content {
		margin: 0;
		padding: 1em;
		width: 92%;
	}
	#primary {
		clear: both;
		float: none;
		width: 100%;
	}
	#secondary {
		clear: both;
		float: none;
		margin: 0 auto;
		padding: 0;
		width: 92%;
	}
	.footer-sidebar {
		clear: both;
		display: block;
		float: none;
		margin: 0 auto;
		width: 92%;
	}

    I hope you can help me.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Caroline Moore

    (@sixhours)

    This seems to be happening when header text is hidden in favor of using a custom banner. Not sure about the fix yet, but you can add:

    #masthead hgroup {
   display: none;
}

    … to your child theme’s CSS or a Custom CSS plugin to hide it and prevent the site from scrolling to the right on small screens.

    Thread Starter Annie83

    (@annie83)

    Yeah…Errr… I actually changed the CSS parent stylesheet itself (since I had been unaware of the fact that changing the parent CSS is not the smartest thing to do). So I put your code in the parent stylesheet and I have to start making a child-theme, I know ;))

    And YES! It works!     Thank you very very much. Can’t express how happy I am ??

    By the way (for your information, maybe it comes in handy some time), prior to adding the above code to the CSS sheet, the mobile browser on a blackberry showed everything properly.

    Theme Author Caroline Moore

    (@sixhours)

    Happy to help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mobile version of Scrappy is not showing properly’ is closed to new replies.