WordPress.org

Forums

Scrappy
[resolved] Mobile version of Scrappy is not showing properly (4 posts)

  1. Annie83
    Member
    Posted 2 years ago #

    The mobile version of my site (http://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.

  2. Caroline Moore
    Member
    Theme Author

    Posted 2 years ago #

    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.

  3. Annie83
    Member
    Posted 2 years ago #

    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.

  4. Caroline Moore
    Member
    Theme Author

    Posted 2 years ago #

    Happy to help!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic