Twenty Twelve
Top White Space Desktop vs Mobile (11 posts)

  1. OolongCha
    Posted 3 years ago #

    Hello, I'm working on this test site right now with a child theme of Twenty Twelve and just made a few tweaks to make it look just right.

    However, since there is a gray space from the background in the original Twenty Twelve theme at the top, I put in -20px for the top margin.

    body {
    	font-family: Georgia, Times New Roman, serif;
    	text-rendering: optimizeLegibility;
    	color: #000;
    	margin-top: -20px;

    Then to reduce the white space at the top, above the site title, I put in a -20px top margin for site-header.

    .site-header {
    	padding: 0px 0;
    	padding: 1.714285714rem 0;
    	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    	color: #000;
    	font-size: 24px;
    	font-size: 1.714285714rem;
    	margin-top: -20px;

    However, it makes the spacing inconsistent on mobile. It looks fine on an iPhone, but when in landscape view on Android, the site title is almost cropped at the top.

    Ideally, I'd like to remove the gray background space at the top entirely and move the whole site up if it didn't crop the site title when viewing on a phone. If that's difficult, then I'd be fine with leaving a bit of gray at the top, but I'd really like to reduce the white space so that it doesn't look so empty on desktop, yet not chopped off on phones. I'm not very experienced in coding for mobile devices and I'm not really a programmer either, but if anyone has any suggestions on how to code it better so that it looks more consistent on mobile, I would greatly appreciate it.


  2. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Look at using media queries http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Also/or avoid using static measurements like pixels.

  3. OolongCha
    Posted 3 years ago #

    Hi Andrew, thanks for that resource. I'm not entirely sure how to use media queries. I tried inserting the body and .site-header css within the brackets of the /* Smartphones (portrait and landscape) ----------- */ code, but it didn't change anything at all when I adjusted the values for the margin-top. There is a likely chance that I'm not doing something right since I'm not sure what I'm doing.

    Could you possibly give me an example of how it would work?

    Sorry and thank you! : )

  4. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Your website link doesn't work, can you make sure it's valid?

  5. OolongCha
    Posted 3 years ago #

    Oh, ack, sorry. Accidentally wrote an extra http://

    It's geechungdesign.com/vaxart2/wordpress/

  6. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Did you copy Twenty Twelve's stylesheet into your Child Theme?

  7. OolongCha
    Posted 3 years ago #

    Yes, I did. But I did make a number of changes to it so that it looks the way I wanted it to look.

  8. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    You should only import the parent's styles over.
    If you get time to, spot the difference your stylesheet with the theme's original stylesheet. Then separate your styles from the actual theme's styles. You should only have your CSS modifications in the Child Theme's stylesheet.

    I suspect there are syntax errors in your stylesheet, as the bottom styles are not working.

  9. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    At the bottom of your stylesheet, add an ending closing brace (}).

    Then to test out some Media Queries, add this;

    @media screen and (max-width: 800px) {
     body.custom-background {
      background-color: transparent;
      background: url("http://snag.gy/7kGjv.jpg") no-repeat;
     #page {
      display: none;

    Then resize your browser.

  10. OolongCha
    Posted 3 years ago #

    Ahh, woops, I just copied over Twenty Twelve and just kept working. Was working on a tight deadline, but now that it's slowed down, we're just fine-tuning the details. Thanks for that.

    I will try out this test now.

  11. Michael
    Forum Moderator
    Posted 3 years ago #

    in Twenty Twelve - the general styles are for narrow screens, then the section under the media queries is for wide screens.

    in style.css, in this section:

    /* Minimum width of 960 pixels. */
    @media screen and (min-width: 960px) {


    body .site {
    		padding: 0 40px;
    		padding: 0 2.857142857rem;
    		margin-top: 48px;
    		margin-top: 3.428571429rem;
    		margin-bottom: 48px;

    that margin-top is creating the 'white space' above the header.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic