Need help? Check out our Support site, then


Change width of entire page

  1. On the header image, replace the #branding rule you have now with the following, which will for the most part keep your name and you centered in the header area on smaller screens.

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

    Ok, great job, we are closer. I'm waiting on my iPhone and iPad to update at the moment, but I think I now have a way to get to the bottom of this. Just have to wait for my iThingies to update.

  2. No surprise, you fixed the header problem. Now let's get the blog from defaulting to the left of the screen in tiny text. And then I think I can leave you alone!

  3. Wait. My name is half cut off still. Baby steps. What now?

  4. Sorry, I should have mentioned this: create a new header image and the line of text for your name must be less than 320px in width (the width of an iPhone screen in portrait orientation). I would suggest 300px to be on the safe side, and make sure the name is centered in the image. Upload that image to your media library, get the URL of that image and then replace the URL in the #branding background declaration in your custom CSS.

  5. Easy. I can do that .... tomorrow. Thanks! What about the positioning of text?

  6. You mean the view in the iPhone? If so, I'm waiting on my iThingies to finish their updates so I can tether and troubleshoot directly on the iPhone.

    Or are you talking about something else?

  7. Yes, the view on mobile via iThingies. I can wait. No worries. Thanks.

  8. You are welcome, and I think I know what is happening, I just need to verify the change I'm going to propose and make sure it works. I'd rather not run us around in circles trying a bunch of things.

  9. Agreed.

  10. Sarah, problem fixed. The text widget you had in the bottom of your sidebar had some bad code in it and was causing the issue. I've removed it and put it into the "Inactive Widgets" at Appearance > Widget and named it Bad code causing issue on iPhone.

    You will have to redo the code in that widget so that it is valid HTML. If you are not sure what is up with it, just let me know what you wanted to do in that widget and I can help you with the code.

  11. Would you look at that?! Problem solved. Thanks.

    At first I couldn't remember what the code was for, but then I realized it was something I found online while I was trying to troubleshoot a problem myself -- and feel empowered and smart. I fixed my problem, but apparently caused the problem you just fixed.

    What that "bad code" was/is for is to make the header image clickable. Without that code only the top portion of my header image is clickable and I wanted the whole image --- or at least the area around my name to take readers back to the home page. Make sense?

    It's late. I'm done for the night. We shall commence tomorrow if you're available! Thanks again for all your help.

  12. Sarah, I can make the entire image clickable for you. I'm off for the night, but will do that for you in the morning.

  13. I think you're in Hawaii, which means right now it's around 9 a.m.

    I think after this last fix I'll be golden. Pretty excited. :)

    No rush, but I'll be looking forward to your next message. Thanks.

  14. Sarah, I'm temporarily a Texan. Perhaps a couple years and back living in Hawaii.

    Add the following to your custom CSS to make the entire header clickable.

    #branding .header-link {
        min-height: 300px;
        width: 100%;
    }
  15. Fixed. Thanks!

    I guess I have one more question. Is it possible to change the font to sidebar headers? And if so, can you enlighten me?

  16. To change the widget title font, add the following. I included a size declaration in case you need it. The !important needs to be there to override the Typekit font, which has a more specific selector.

    .widget-title {
        font-family: museo-1,museo-2,"Droid Serif",Georgia,"Times New Roman",serif !imporetant;
        font-size: 1.462em;
    }
  17. Excellent. Thanks for allllll your help!!!!

  18. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic