Change width of entire page

  • Author
    Posts
  • #1683767

    sarahjclark
    Member

    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.

    #1683854

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

    #page {
        margin-top: 0;
        max-width: 989px;
    }
    #1683858

    sarahjclark
    Member

    It’s like magic! Amazing it took two seconds for you and about two days for me! Thank you. :)

    #1683872

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

    #1683880

    sarahjclark
    Member

    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>

    #1683882

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

    .entry-content {
        font-size: 0.813em;
    }
    #1683889

    sarahjclark
    Member

    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. :-/

    #1683890

    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;
    }
    #1683891

    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.

    #1683892

    sarahjclark
    Member

    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)

    #1683893

    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;
    }
    #1683895

    sarahjclark
    Member

    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.

    #1683896

    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.

    #1683897

    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.

    #1683926

    sarahjclark
    Member

    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!

    #1683991

    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.

    #1683998

    sarahjclark
    Member

    TheSacredPath — are you available to assist me again?

    #1683999

    I certainly am. Fire away. :)

    #1684000

    sarahjclark
    Member

    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.

    #1684001

    sarahjclark
    Member

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

The topic ‘Change width of entire page’ is closed to new replies.