Need help? Check out our Support site, then


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

  1. Hi

    I am using Twenty Eleven theme and want to make a few changes via the CSS upgrade but before I have added any CSS my site doesn't look correct on smaller devices ie phones

    It looks ok on a tablet in landscape and portrait.

    Not sure if this is relevant but the check box Include this CSS in the Mobile Theme is ticked at present.

    Many thanks for any help..... (hope sacred path is out there!!!)

    Tracy

    The blog I need help with is tracyfox.co.uk.

  2. oops - forgot to change the title of the post!

  3. Hi, The checkbox for applying the CSS to the mobile theme is for the dedicated mobile theme (Appearance > Mobile). That theme is typically used with fixed width themes that do not adjust for screen and device size. Since your theme does, and since you do not have the dedicated mobile theme active, that setting makes no difference.

    I see you have the background set to white right now, is that the general look you were wanting for the main site?

    The overall maximum width of the site (applicable to desktop systems) can be widened by increasing the max-width in #page. You can add the following CSS and then play with the max-width value.

    #page {
        max-width: 1000px;
    }

    I see on my iPhone that the title comes out like this (portrait and landscape orientation):
    tracyf
    ox

    That could be fixed by adding a space to the title between tracy and fox, or by making the text smaller for phone size devices, or by setting things so that the letter spacing is tighter for phone size screens.

    If you can give me a little more information on what you are wanting things to look like on smaller devices such as phones, I would be happy to help you achieve that.

  4. Hello again thescaredpath,

    You have kindly helped me in the past so many thanks for replying to my query.

    "I see you have the background set to white right now, is that the general look you were wanting for the main site?"

    The look I am after is a simple layout with the photos of my fabric to be the main focus. I wanted my content to 'fill the screen' instead of having the central column in the middle with lots of empty background space (hope that makes sense)!

    Which leads me to...

    I have added the code you suggested with a value of 1700px which seems to fill the screen - thank you for that. I hope this value won't create any problems elsewhere, I will change it if you think it isn't appropriate.

    "I see on my iPhone that the title comes out like this (portrait and landscape orientation):
    tracyf
    ox"

    It does this on my galaxy Samsung 3 but only in portrait mode, seems to behave in landscape for some reason.

    "If you can give me a little more information on what you are wanting things to look like on smaller devices such as phones,"

    I had naively assumed that the theme would automatically adjust itself to the smaller screens and would just look like a proportionally smaller version of how it looks on bigger ones....I did say naively...... Is that too much to expect?

    There are changes I would like to make in the 'header' area and wondered if I should make these first and see it affects this problem.

    These are:

    1. Remove the grey horizontal line at the top of the screen
    2. Remove the search box on the top right corner
    3. Reduce the amount of space at the top of the page above the site title
    4. Change the size, colour and position of the site title (make it bigger and move it to left aligned
    5. Change the size and colour of the site description (make it a little bigger)
    6. Move the position of the site description so that it is on the same line horizontally as the site title but is right aligned
    7. Alter the height of the header image so it isn't quite as tall.

    Hope this makes sense and apologies if I am not using the correct terminology.

    Thank you again for your help - it is very much appreciated.

    Kind regards

    Tracy

  5. Tracy, the 1700px maximum width will work fine even though the number of people using monitors greater than 1500px in width is quite small, and the bulk are still down in the 1024-1500px range. The theme will adjust for whatever width the of the visitor's screen/browser window.

    I had naively assumed that the theme would automatically adjust itself to the smaller screens and would just look like a proportionally smaller version of how it looks on bigger ones...

    The theme designers, for the most part, try and do exactly that, but they always keep the focus on the content as that is the most important thing on the site. When windows or devices get narrow, they will move the sidebar to the bottom so that the content can be as wide and readable as possible.

    The issue with the title is that the software cannot tell where to break your title since there are no space in the title. In cases like that where there is no obvious break point, it will just start moving the end characters to the next line one at a time as necessary.

    I was going to try and take this one bit at a time, but it got messy, so here it is all in one chunk. Paste it in and see what you think.

    #branding hgroup {
        margin-left: 0;
        margin-right: 0;
    }
    #branding #searchform {
        display: none;
    }
    #branding img {
        max-height: 200px;
    }
    
    @media screen and (max-width:480px) {
    #site-title a {
        font-size: 25px !important;
        }
    }
    
    @media screen and (min-width: 800px) {
    #branding {
        border-top: none;
    }
    #site-title {
        padding-top: 0;
        margin-right: 0;
        width: 55%;
    }
        #site-title a {
        font-size: 50px !important;
    }
    #site-description {
        width: 40%;
        text-align: right;
        float: right;
        margin-right: 0;
        position: relative;
        top: -35px;
        margin-bottom: 0;
        font-size: 130% !important;
        }
    }
  6. Hi thescacredpath,

    Thank you for the code - I have done as suggested and pasted all of it in.

    I am so pleased it is very much starting to look as I want it on the larger screens but the following is happening on smaller screens - Samsung Galaxy 3 and Samsung Galaxy Mini.

    The splitting of my site title is FIXED on both devices - huge thank you for that but...

    1. On both smaller devices the chunks of white space above and below the site title/site description remain.

    2. The horizontal border at the top of the page is still present in both portrait and landscape view on the Galaxy 3 and landscape view on the Mini.

    It seems like the smaller devices are ignoring some of the code changes that the big screens are displaying.

    Also, is it possible to

    a. left align the content column
    b. right align the widget column

    Thanks

    Tracy

  7. Hi thesacred path

    Not sure if have seen my reply to you above posted 3 days ago. Really hope you are still able to help me.

    Hope you are ok.

    Thanks

    Tracy

  8. Sorry for the delay, weekends can get in the way. :)

    Add the following to get rid of the line below 800px in width, and to get rid of the whitespace above the title.

    @media screen and (max-width: 800px) {
        #site-title {
            padding-top: 0;
        }
        #branding {
            border: none;
        }
    }
  9. Hi thescacredpath

    I have added the code you suggested but other weird and wonderful things are now happening and this could continue to go on and on and I am very conscious of that. There are other small changes I would like help with but feel I could be bothering you indefinitely just about the site text and its spacing!

    I wondered if it is possible to do away with having the site title and site description above the header as it currently is and have this text as part of the header image instead.
    Essentially the text would be 'over the top' of what ever image is at the top of the page. I have seen this on other sites and it does look good, do you know if this is possible for my site?

    Also, is it possible to

    a. left align the content column
    b. right align the widget column
    c. and make them both a bit wider

    I can't tell you how much I appreciate your help - I have to admit CSS is driving me a bit crazy!

    Tracy

  10. I wondered if it is possible to do away with having the site title and site description above the header as it currently is and have this text as part of the header image instead.

    Absolutely. You can turn off the header text display at Appearance > Header. Under "Header Text, deselect "Show header text with your image" and save. You can then incorporate the header text into your header image and upload the new header image. The header image will act as a link back to your site main page.

    a, b & c. Add the following and see what you think. I've decreased the left margin on the content and widened it and decreased the right margin on the sidebar and widened it and done a right alignment on the sidebar content. Add the following and see what you think.

    #secondary {
        margin-right: 2%;
        width: 23%;
        text-align: right;
    }
    #content {
        margin-left: 2%;
        width: 65%;
    }

    I checked to make sure the things don't go awry when the browser window is narrowed, and everything flows and looks good to me.

  11. Hi

    I have added the code but the text in the widget column didn't look quite right so I have 'text-align: right' to 'text-align: left' and it seems to look better.

    I would like make the alignment and text of the menu bar consistant with the other changes.

    Is it possible to

    a. change the size of the text in the menu (pages and child pages)
    b. move the menu text so it is left aligned the same as the content column
    c. ensure that the background colour that appears when you hover over doesn't extend further to the left than header image (hope this makes sense!)

  12. oops pressed submit by mistake!

    I have also removed the css that related to the site title and description - hope that was ok.

    Thanks again for your help.

    Tracy

  13. a & c. Change size of menu text (adjust as desired) and I think this also takes care of c. If not, can you explain c a little more?

    #access a, #access ul ul a {
        font-size: 110%;
        padding-left: 22px;
        padding-right: 22px;
    }

    b. Move menu left to align with content

    #access div {
        margin-left: 1.5%;
        margin-right: 1.5%;
    }

    Yes, removing the CSS related to the site title and description is just fine.

  14. Hi

    I have added the code you suggested - just tweaked the 'margin-left' a tiny bit and increased the font size.

    But now in the menu....

    a. when you hover over a page that has child pages the layout/spacing has changed. The child list and background colour seems to have moved up closer to the main page name. Difficult to explain this one but you should see what I mean.

    b. the first page name 'Hand Dyed Fabric' - when you hover over this the left hand edge of the background colour that appears isn't aligned with the left hand edge of the header image.

    Also, is this the most appropriate code to get rid of the colour and border that appears around the menu text?

    #access {
    background-image: none;
    box-shadow: none;
    }

    Thanks

    Tracy

  15. Hi Tracy, add this to space the submenu items down a little more.

    #access ul ul {
    top: 4.35em;
    }

    To move the first menu item over to the left aligned with the header image and end of the menu area, add the following.

    #access ul {
    margin-left: -1.2em;
    }

    Tracy, real close on #access background. My suggestion would be to change background-image to just background as in

    background: none;

  16. Hi thesacredpath

    #access ul ul {
    top: 4.35em;
    }

    background: none;

    These both worked perfectly - thank you

    I also added

    #access ul {
    margin-left: -1.2em;
    }

    as you suggested and the text is aligned but the hover background colour extends too far to the left and isn't aligned with the edge of the header image above it.

    tracy

  17. Tracy, not sure what happened, but when I view your site, the hover background on the first menu item on the left is shifted slightly to the right. On my browsers, changing the -1.2em to -1.7em aligns it.

  18. I take that back. It seems to depend on the browser window width. This is a hack-ish fix, but in addition to changing -1.2em to -1.7em, change your #page rule to look like this.

    #page {
        max-width: 1600px;
        overflow: hidden;
    }
  19. Ah haaaaa thesacredpath - you are a little star! I think you have finally cracked it. A huge thank you for all your help so far - it is very much appreciated.

    Could you tell me if it is possible to have a different header image at the top of each page? I am happy to post a new topic if needed.

    Thank again

    Tracy

  20. Apologies - forgot to add, is it possible to alter the font size of widget titles? They look really small and I would like to make them a bit bigger in the right hand column.

    Thanks

  21. For the widget titles, add the following and adjust as desired.

    .wf-active .widget-title {
    font-size: 12px;
    }

    Twenty Eleven supports the Featured Header image feature here at WordPress.com. If you set a featured image for pages and posts that is the size of the header image, that image will be used as the header for that page. Categories, archives and tags pages will use the header image set at Appearance > Header, as will any static page or post that does not have a featured image set.

  22. Hi thescacredpath

    I have added the code and it has worked perfectly - thank you.

    I haven't used Featured Header before so will have a play and work out how to do it - hopefully you will be around to help if I need it!

    Couple of things with the 'Facebook Like Box',

    1. for some reason the spacing below this widget appears to be larger than between the others. How can I reduce this so it is consistent?

    2. The text 'Find Me on Facebook' entered into the title box of this widget doesn't appear to be the same font and size as the others - not sure why this would be - is there a way to make it the same as the others?

    Thanks

  23. I'll be around, so let me know if you have additional questions.

    On the likebox widget, try this first.

    #facebook-likebox-4 {
        margin-bottom: 0;
    }

    If that isn't quite close enough, add the following and adjust the height value as desired (110px is what it is now).

    #facebook-likebox-4 iframe {
        height: 110px;
    }
  24. Wait, you will need to add the !important attribute to the height declaration as below.

    #facebook-likebox-4 iframe {
        height: 100px !important;
    }
  25. Hi,

    I have added
    #facebook-likebox-4 iframe {
    height: 100px !important;
    }
    as you advised and after playing about a little with the px value - it looks much better now, thank you.

    With regards to
    '2. The text 'Find Me on Facebook' entered into the title box of this widget doesn't appear to be the same font and size as the others - not sure why this would be - is there a way to make it the same as the others?'

    The penny dropped late last night that it is different because the text automatically becomes a hyper link. I have been trying out different fonts and changed them a little so this isn't as obvious now.

    However, I would like to change the font of the page names in the menu bar and try a couple out to see what they look like - is this possible?

    I want to keep the 'Body Text' as is but alter the menu which I can't do at the moment - when I change the 'Body Text' it changes the menu aswell - hope this makes sense.

    Thanks

  26. 2. As you figured out, the Facebook widget title is set to bold. Add the following to set it back to normal. Also, on hover, there is a text underline. If you want to get rid of that too, add text-decoration: none; to the rule below.

    .widget-title a {
        font-weight: normal;
    }

    To style the font and size in your menu, look in your custom CSS for the following and then just add or edit as desired. I included a font family declaration with just a placeholder font family.

    #access a, #access ul ul a {
        font-family: "Times New Roman";
        font-size: 130%;
        padding-left: 22px;
        padding-right: 22px;
    }

    Just in case you were wanting to change the menu to the font you are using for titles, I've included that Typekit generated font stack below.

    tekton-pro-1,tekton-pro-2,"Helvetica Neue",Helvetica,Arial,sans-serif

  27. Your reply did make me smile....you are one step ahead of me, anticipating what I would want to do next - excellent!

    You were absolutely right, I wanted to try out tekton-pro and perhaps heather btn.

    Facebook Widget

    Title no longer bold - thanks

    1. I have added what you recommended but it doesn't seem to remove the underline - not sure if I have done this right.
    .widget-title a {
    font-weight: normal;
    text-decoration: none;
    }

    2. I might be loosing the plot but on my screen it looks like the colour of the facebook widget title is just slightly different to the other widget titles. Am I imaging it or is it different because it is still a link?

    Tracy

  28. Change what I had given you to this (a bigger hammer). :)

    .widget-title a {
        font-weight: 400;
        text-decoration: none !important;
    }
  29. Ha ahh! Big hammer worked.

    Can't thank you enough for all your help and patience - you have been a star.

    Kindest regards

    Tracy

  30. Hi thesacredpath

    I know you will want to kill me but.....

    After living with it for a while, I don't like the site title and description as part of the header image which I had done to avoid the resizing issues I was having.

    I have put the code back in that you originally gave me to amend the site title and description (with some additional updates ie font size/colour, margin values).

    It looks very nearly how I want it to on my monitor and on my galaxy tablet (landscape and portrait) BUT it is not playing nicely at all on my phone in either orientation.

    Essentially the site title and site description overlap one another which was different from what it was doing before.

    Please help again!

    Tracy

Topic Closed

This topic has been closed to new replies.

About this Topic