Need help? Check out our Support site, then


Twenty Eleven: Is it possible to make the page the full width with no background

  1. Tracy, no killing in the forums... we work only on Happiness here. :)

    Let me craft some media queries for the site title and description to control positioning for different screen sizes.

  2. I wouldn't blame you!

    Thanks thescaredpath

    Tracy

  3. Ok, add this at the very bottom of your current custom CSS and see what you think. I've made sure everything works all the way down to iPhone portrait width of 320px. I also tightened up the menu spacing under 768px in width.

    @media screen and (max-width: 767px) {
        #site-description {
            float: left;
            margin: 0.9em 0 0 1.3em
        }
        hgroup {
            height: 100px;
        }
        #access li a {
            line-height: 1.7;
        }
        #access ul ul {
            top: 3em;
        }
    }
    
    @media screen and (max-width: 360px) {
        .wf-active #site-title a {
            font-size: 180%;
            text-align: center;
        }
        .wf-active #site-description {
            font-size: 22px;
            text-align: center;
            margin-left: 0.8em
        }
    }
  4. Hi thescacredpath

    Apologies for not replying sooner - thanks a million for working on this.

    I have added the code above and it looks miles better. I have played a little with a couple of the values and I don't think I have broken anything. I preferred left aligned to centered and altered the left margin a tiny bit. I was trying to get consistent alignment of the text along the left hand side.

    The menu of pages is not quite aligned the same on the left - can you suggest what I could add to alter this a little?

    In the Fonts section, I also reduced the size of the Headings value and the font size percentage for the menu headings - it dawned on me (perhaps a little late I hear you say!) that the majority of users would probably be using their phones or smaller devices so don't need these things as big as I originally thought.

    Thanks again

    Tracy

  5. The site title and description are looking great, Tracy. Nice job!

    Find the following in your custom CSS and edit the left and right padding to what I have below.

    #access a, #access ul ul a {
        color: #2E4556;
        font-family: tekton-pro-1,tekton-pro-2,Helvetica Neue,Helvetica,Arial,sans-serif;
        font-size: 150%;
        font-weight: 600;
        padding-left: 0;
        padding-right: 44px;
    }

    Then find this and change it to a positive 1.3em.

    #access ul {
        margin-left: 1.3em;
    }
  6. Thank you - only what I have learnt from you though.

    I added the code above and although it was a bit better on the phone size screen I haven't left it in it because....

    1. It moved the menu left margin too far over to the right on desktop and tablet size

    2. It made the hover background colour move over so it was started with the first letter of the page name

    3. The alignment wasn't consistent between portrait and landscape on the 2 phone sizes before but the difference became even more obvious

    I wondered if this is as good as we are going to get it without messing up all your good work so I played a bit more with some of the values in the code you had already given me for the site title and description to move them to the left a bit more so the difference wasn't as noticeable.

    There is still a difference between portrait and landscape for some reason but hey I think I will have to live with that.

    What do you think?

    Thanks again

    Tracy

  7. Tracy, your site is looking awesome. It might take a bit of mucking about to get everything to align just right, and other things already in your CSS may have to change. Funny I was not seeing the issues you mention when viewing your site at different browser/screen widths.

    Your site though, is looking very nice.

  8. Hi thescaredpath

    Apologies for delay in replying.

    I just wanted to say a really huge thank you for all your help and patience, it is very much appreciated.

    My next job is to take some decent pictures and play with the headers and make a home page.

    Until the next time..... (oh no I hear you say!!)

    Kindest regards

    Tracy

  9. Tracy, thanks and you are welcome, and if you have other questions, we are here to help. (And I'd never say, "oh no!) :)

Topic Closed

This topic has been closed to new replies.

About this Topic