Need help? Check out our Support site, then


Change width of entire page

  1. Hello. I am using a theme called Fresh and Clean. My site is: http://www.sarahjclark.com.

    I would like to do two things:

    1. Bring the entire page closer to the top, eliminating the black space
    2. Widen the page content (including the sidebar) to become flush with the pink boarder lines created in my background image.

    Can you help?

    The blog I need help with is sarahjclark.wordpress.com.

  2. Hi there, the following should take care of both 1 and 2 for you.

    #page {
        margin-top: 0;
        max-width: 989px;
    }
  3. It's like magic! Amazing it took two seconds for you and about two days for me! Thank you. :)

  4. You are welcome, and we were all where you are at one time. Keep at it, and we are here if you need help.

  5. Appreciate that. Thanks.

    One more question. I'm trying to increase the font size -- mainly in the blog posts. When I look at the page source, I just see what I've pasted below. I don't know what to change to increase the font. Can you help?

    <style type="text/css">/* Site Title */ .wf-loading #site-title { visibility: hidden; } .wf-active #site-title { font-family: museo-1,museo-2,"Pacifico",Georgia,serif; font-style: normal; font-weight: 300; font-variant: normal; }
    /* Headings */ .wf-loading .featured .entry-title { visibility: hidden; } .wf-active .featured .entry-title { font-family: museo-1,museo-2,"Droid Serif",Georgia,serif; font-style: normal; font-weight: 300; font-variant: normal; } .wf-loading .entry-title { visibility: hidden; } .wf-active .entry-title { font-family: museo-1,museo-2,"Droid Serif",Georgia,"Times New Roman",serif; font-style: normal; font-weight: 300; font-variant: normal; } .wf-loading .archive-title { visibility: hidden; } .wf-active .archive-title { font-family: museo-1,museo-2,"Droid Serif",Georgia,"Times New Roman",serif; font-style: normal; font-weight: 300; font-variant: normal; } .wf-loading .entry-content h1,.wf-loading .entry-content h2,.wf-loading .entry-content h3,.wf-loading .entry-content h4,.wf-loading .entry-content h5,.wf-loading .entry-content h6 { visibility: hidden; } .wf-active .entry-content h1,.wf-active .entry-content h2,.wf-active .entry-content h3,.wf-active .entry-content h4,.wf-active .entry-content h5,.wf-active .entry-content h6 { font-family: museo-1,museo-2,"Droid Serif",Georgia,"Times New Roman",serif; font-style: normal; font-weight: 300; font-variant: normal; } .wf-loading .widget-title { visibility: hidden; } .wf-active .widget-title { font-family: museo-1,museo-2,"Droid Serif",Georgia,"Times New Roman",serif; font-style: normal; font-weight: 300; font-variant: normal; } .wf-loading #comments-title { visibility: hidden; } .wf-active #comments-title { font-family: museo-1,museo-2,"Droid Serif",Georgia,serif; font-style: normal; font-weight: 300; font-variant: normal; } .wf-loading #respond h3 { visibility: hidden; } .wf-active #respond h3 { font-family: museo-1,museo-2,"Droid Serif",Georgia,serif; font-style: normal; font-weight: 300; font-variant: normal; }
    </style>

  6. Hi, the following will allow you to change the general content font size.

    .entry-content {
        font-size: 0.813em;
    }
  7. Awesome. Thanks!

    Last question -- I hope. After making some changes, the mobile display is janky. I have to use the scroll bar at the bottom to read all the text. In addition to that, there is a weird black box that covers the far right hand side of the screen.

    Is there code to fix this for mobile? I've checked and unchecked the box in the theme that allows for the CSS to be used in mobile, but it didn't help. :-/

  8. With responsive width themes, such as the one you are using, you need to stay away from fixed widths for elements (unless that is what the original has.

    In your CSS, find #content and change "width" to max-width as I have below and it should be all good.

    #content {
        max-width: 650px;
    }
  9. The checkbox in the CSS edit window is for instances when you are actually using the stand-alone mobile theme (Appearance > Mobile). Responsive width themes are designed to work on virtually all screen sizes from a smart phone all the way up to a large desktop monitor.

  10. Once again, you fixed my problem. Thank you. Only thing now is the header image seems to have stayed the original size in mobile, so only the far left corner of the header image is visible. Is there a fix for this too?

    Please say yes. :o)

  11. Change #branding in your CSS to the following (I've changed some of the attributes and added another. This is about the best I can do, and it leaves a pretty large white space between the bottom of the image and the navigation. Due to the way the theme is designed, it is a little difficult to get everything to flow nicely. I'm still working on it though.

    #branding {
        background: url("http://sarahjclark.files.wordpress.com/2014/03/wpheaderb.jpg") no-repeat scroll center top / contain rgba(0, 0, 0, 0);
        min-height: 300px;
    }
  12. Yeah, you're right. It leaves a lot of white space. I'll change it back for now. If you find a solution that eliminates the white space, I'd definitely be interested in implementing it.

    And if you drink Starbucks I'll tweet you out a gift card for all your help! Really appreciate how much you've already done. Really.

  13. Sarah, The one thing that could be done, would be to use the text based site title and tagline/description. We could then perhaps do the center thing on the image and style things so that the text would always be visible, even on smaller devices. We can add text shadows and such to the title and tagline so it would look very similar to what you have now.

  14. Here would be an example of what I'm talking about. I've make the text red for better visibility

    #branding {
        background: url("http://sarahjclark.files.wordpress.com/2014/03/wpheaderb.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
        min-height: 300px;
        position: relative;
    }
    #site-title a {
        color: #cc0000;
        font-weight: bold;
        font-size: 170%;
        text-shadow: 2px 2px 1px #000000;
        margin-left: 30%;
    }
    #site-description {
        color: #cc0000;
        font-size: 95%;
        text-shadow: 2px 2px 1px #000000;
        margin-left: 30%;
    }
    hgroup {
        position: absolute;
        bottom: 25px;
    }

    I have to run an errand and still need to make an adjustment for smaller screen sizes to keep the title from breaking to two lines.

  15. Hey, thanks. I tried that but it didn't seem to do anything.

    I won't be able to work on it much for the next day or two. Hopefully I can tackle this again -- with your help -- soon.

    Appreciate your time!

  16. I think you need to go to Appearance > Header and check the option for "Show header text with your image" and then apply the CSS to see the last example posted above working.

    You would also want to update the header image to one that doesn't have text embedded in it.

    Also, as thesacredpath mentioned, it's just one possible option.

  17. TheSacredPath -- are you available to assist me again?

  18. I certainly am. Fire away. :)

  19. Awesome. Thanks. It would be helpful if I could send you a screen grab, but if you have a mobile device, you can see what I'm talking about in this post....

    I added the latest code you sent a week or more ago and this time I see the change. It fixed the problem I had with the black box on mobile, however now the header image is an old version I created a loooong time ago and not the one I recently added, even though the html reflects the right image in your code. So I'm confused.

  20. I'm going to delete the old image from my library and see what happens....

  21. I'm crazy. None of what I said in the last two posts is true. I was looking at blogger and not wordpress. HELP. lol

  22. @sarah, you didn't give me a link to the post you are talking about.

  23. Sorry about that. I assumed you were able to read our thread of communication. My apologies! URL: http://www.sarahjclark.com

  24. now the header image is an old version I created a loooong time ago and not the one I recently added

    I tested http://www.sarahjclark.com/ and it redirected to http://sarahjclark.wordpress.com/

    I checked the custom CSS for http://sarahjclark.wordpress.com/ and I see this as the last at the bottom:

    #branding {
    	background: url('http://sarahjclark.files.wordpress.com/2014/03/wpheaderb.jpg') 0 0 no-repeat;
    	min-height:300px
    }

    If http://sarahjclark.files.wordpress.com/2014/03/wpheaderb.jpg is not the image you want to use, you should replace that link with a different image link.

    Also, just to note, the example thesacredpath posted earlier at http://en.forums.wordpress.com/topic/change-width-of-entire-page-1?replies=23#post-1681979 won't change any font details unless you have gone to your Appearance > Header page and checked the option for "Show header text with your image." I'm not sure if you're still wanting to try that example, so this is just a note in case you do.

  25. Thanks for your response, but my previous postings were a result of me looking at blogger and not WordPress. My issue now is the way my blog appears on mobile. There is a giant black box that covers half the screen.

    I do not want to change the page dimensions so I'm at a loss regarding how to eliminate the black box and am looking for guidance.

    TheSacredPath has been helpful in the past and I'm hoping we can work together again on this last concern of mine. Thanks!!!

  26. Sarah, I can't get the black area to show up in one of my development tools, and I can't view the source, or work on the CSS from my iPhone, so my suggestion is to remove all the custom CSS from your custom CSS window, save it to a plain text file for safe keeping and then view your site on the phone and see if the black area is gone (you may have to delete the cache on your phone first). If so, add each CSS rule in one at a time and save and then view your site and see if the black area has come back. Let us know the results. I don't see anything in your custom CSS that should cause this problem, but the above will eliminate that possibility.

  27. Okay, ready for this? Even with all the additional code removed, the black box remains. Even after clearing my cache and waiting several minutes to check mobile.

    I did as you said and removed each piece of extra code and saw the changes it made live on mobile. But nothing removed the large black box to the right of the screen -- even when all the code was removed.

    What in the world?

  28. Ok, thanks for checking that. Go to Appearance > Background and temporarily disable your custom background image and see if that makes it go away.

  29. Bingo.

    If you look at it live on mobile now, the black box is gone, which is nice.

    But the header image is cut off and you have to zoom into the page in order to read the text because it defaults far left.

    Making progress. :)

  30. I've tinkered with it some more, but haven't made any progress. Any ideas on how to make the text not flush left and be soooo incredibly small -- as well as fix the image header from being cut off?

Topic Closed

This topic has been closed to new replies.

About this Topic