Change width of entire page

  • Author
    Posts
  • #1684002

    sarahjclark
    Member

    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

    #1684004

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

    #1684005

    sarahjclark
    Member

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

    #1684006

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

    #1684007

    sarahjclark
    Member

    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!!!

    #1684009

    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.

    #1684010

    sarahjclark
    Member

    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?

    #1684011

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

    #1684012

    sarahjclark
    Member

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

    #1684013

    sarahjclark
    Member

    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?

    #1684014

    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.

    #1684015

    sarahjclark
    Member

    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!

    #1684016

    sarahjclark
    Member

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

    #1684017

    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.

    #1684018

    sarahjclark
    Member

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

    #1684019

    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?

    #1684020

    sarahjclark
    Member

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

    #1684021

    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.

    #1684022

    sarahjclark
    Member

    Agreed.

    #1684023

    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.

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