blog looks messed up on smartphone

lindalind · Member · May 15, 2013 at 6:37 am
Copy link

Add topic to favorites
I just changed the design on my wordpress.com blog and it looks great on a computer but on my iPhone everything looks messed up. It seems like the whole website is pushed to the right so I can only see a tiny bit of my images etc. What can I do to fix this? The url is http://www.LindaLind.com/blog

The blog I need help with is: (visible only to logged in users)
raincoaster · Member · May 15, 2013 at 6:46 am
Copy link
Are you using the Custom Design upgrade?
lindalind · Member · May 16, 2013 at 6:14 am
Copy link
yes!
raincoaster · Member · May 16, 2013 at 6:52 am
Copy link
Then I’ll flag this to move into the CSS forum instead. When you do custom design, you DO have to account for different browsers, and that includes mobile ones.
lindalind · Member · May 16, 2013 at 7:00 am
Copy link
ok thanks. I was just trying to change the width of the side widget area a little bit and make the post area a little bigger so that I could have bigger pictures. I don’t know why it got shifted to the right on some browsers. I’m not very good at CSS so if you have any idea how I can change this back I would really appreciate it.
thesacredpath · Member · May 16, 2013 at 7:07 am
Copy link
Linda, if you go to appearance > custom design > edit CSS, do you have this selected?

On Mobile
Include this CSS in the Mobile Theme
thesacredpath · Member · May 16, 2013 at 7:09 am
Copy link
Also, do you have the mobile theme activated at appearance > mobile?
lindalind · Member · May 16, 2013 at 5:24 pm
Copy link
Hi! Yes both of those are selected… should I deselect them?
thesacredpath · Member · May 16, 2013 at 7:49 pm
Copy link
Since your site is not a responsive theme design, you need the mobile active.

You might try deselecting the

On Mobile
Include this CSS in the Mobile Theme

It will mean the mobile goes back to the standard mobile design, but it would be readable.

The alternate would be to turn off the mobile entirely and then just let people view the full site.

I’m not sure what is messing up the mobile theme as I’ve never worked with CSS and those themes before.
thesacredpath · Member · May 16, 2013 at 8:01 pm
Copy link
I do notice that there are some inconsistencies in the widths you have set, but I don’t know if that is an issue or not.

Change the width in #access back to 940px to match the parent div widths.

I would also suggest redoing your custom header image and make it 940px wide. Right now it is 1024px wide and that might cause some issues although I’m not sure.

Lastly you need to make the standard theme and WordPress stuff in the footer visible. We are not allowed to hide the WordPress and theme credits here at WordPress.com.
lindalind · Member · May 16, 2013 at 11:59 pm
Copy link
Thank you so much! I did what you wrote and it finally looks good again.
I have one last question if I may ask. My site can now scroll slightly to the right and back when I look at it on a laptop. It didn’t use to be like that and I was wondering if you know how I can change it back so that you can only scroll up and down. Once again thank you so much for your help!
thesacredpath · Member · May 17, 2013 at 12:14 am
Copy link
The width on your site looks good now at 940px, except for the header image, which is 1024px in width. You can upload a new header image at 940px wide, or alternately you can add the following CSS to take care of the issue.
```
#header {
overflow: hidden;
}
```
All it does is tell the browser to ignore the extra width on the header image.
lindalind · Member · May 17, 2013 at 11:18 pm
Copy link
Great thank you so much for all your help! I will make a new header that is 940px :)
thesacredpath · Member · May 18, 2013 at 3:32 am
Copy link
You are welcome.

No items found.