Change width of entire page
-
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
-
Sorry about that. I assumed you were able to read our thread of communication. My apologies! URL: http://www.sarahjclark.com
-
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.
-
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!!!
-
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.
-
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?
-
Ok, thanks for checking that. Go to Appearance > Background and temporarily disable your custom background image and see if that makes it go away.
-
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. :)
-
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?
-
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.
-
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!
-
-
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.
-
-
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?
-
-
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.
-
-
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.
WordPress.com Forums 
