Removal of white border around mobile theme header?

amaryshad · Member · Jan 4, 2015 at 8:06 pm
Copy link

Add topic to favorites
Hi,
When I have the mobile theme enabled, There is a white border around the header. Is there a way to remove this via CSS?

Thanks

The blog I need help with is: (visible only to logged in users)
timethief · Member · Jan 4, 2015 at 8:08 pm
Copy link
Twenty Eleven is a responsive layout theme. http://theme.wordpress.com/themes/features/responsive-layout/?sort=free

A responsive layout theme adapts to different screen sizes so that your website will work (and be optimized for) iPhones, iPads, Android and other mobile devices. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

The mobile theme is a completely different theme. When we use a responsive theme we disable the mobile theme Go to > Appearance > Mobile and disable the mobile theme.
amaryshad · Member · Jan 4, 2015 at 9:26 pm
Copy link
Thank you for your reply. I understand the difference between the responsive and mobile themes. I would like to enable the mobile theme, however, as an alternative. I just need to know if there is a way to remove the white header border when mobile theme IS enabled.
timethief · Member · Jan 4, 2015 at 9:30 pm
Copy link
Okay then I wanted to be sure you knew what I posted. Please be patient while waiting for a Volunteer or Staff who assist with CSS editing to log in and help you.
amaryshad · Member · Jan 4, 2015 at 9:54 pm
Copy link
Of course; thank you.
timethief · Member · Jan 4, 2015 at 9:58 pm
Copy link
You are welcome and best wishes. :)
staff-happychia · Staff · Jan 5, 2015 at 8:23 am
Copy link
As documented in the Include Custom CSS in the Mobile Theme section of the Editing CSS support document, there is a mobile theme specific HTML class name .mobile-theme. Could you make use of it and see if you can get rid of the unwanted border around the header.

I have no way to test this as this is something you are doing atop a responsive theme. But I hope you can sort the mobile style yourself as I see you have quite a bit of custom CSS already in place :-)
amaryshad · Member · Jan 5, 2015 at 7:30 pm
Copy link
Thanks so much for the reference to the support article. :-) I don’t really understand, however, how to use the .mobile theme or where to include it to achieve specifically what I am trying to do.

Are you saying that with a responsive theme, it’s better NOT to use the mobile option? I see how things could potentially get very messy with my CSS. The reason I’ve been considering using the mobile option is because I like how you can display just a short excerpt from each post rather than the entire thing when viewing on the smaller screen of a mobile device…
staff-happychia · Staff · Jan 6, 2015 at 9:11 am
Copy link
I noticed the white border around the header image of yours and one of my test blogs when I loaded your site in my iPhone.

Are you saying that with a responsive theme, it’s better NOT to use the mobile option?

Yes :-)

If you go to Appearance > Mobile screen in your dashboard to enable the mobile theme, WordPress says: Awesome! Your theme, Twenty Eleven, is already deemed to be mobile-friendly.

I noticed the styles getting applied to mobile theme if I select Include Custom CSS in the Mobile Theme option on the CSS Editor. However it depends on style to get both mobile and desktop work with the same theme.

Foe eg: I got your following custom CSS working on both mobile and desktop by selecting the Include Custom CSS in the Mobile Theme option :
```
#page {
    background-color: #deeaf6
}
```
I also got rid of the whitespace around the mobile header by setting padding to 0 however this screwed up padding on the desktop!
```
# branding {
padding:0;
}
```
So the bottom line is just don’t use the mobile theme and take advantage of responsive theme OR live with the whitespace around the header on the mobile theme :-)
staff-happychia · Staff · Jan 6, 2015 at 9:15 am
Copy link
Few corrections:

It depends on the type of the style to get the effect on the both mobile and desktop themes with a single rule.

Foe eg: I got your following custom CSS working on both mobile and desktop by selecting the Include Custom CSS in the Mobile Theme option :
```
#page {
    background-color: #deeaf6
}
```
So setting page background on both mobile and desktop themes using a single rule is easy but setting padding around header image with a single rule on both mobile and desktop themes is tricky.

Also second style in my previous update has unwanted space, just in case you want to try it. Following is the corrected style::
```
#branding {
padding:0;
}
```
amaryshad · Member · Jan 6, 2015 at 2:27 pm
Copy link
Hmmmm…
I’m a bit confused right now as to how to achieve this. Thanks so much for all of your advice. I may consider trying it at a later time, but for now, it might be better just to keep it simple and stick with the responsive layout. That way I can spend my time nit-picking over the actual content of my blog instead of the border. :-D
thesacredpath · Member · Jan 6, 2015 at 11:45 pm
Copy link
With the mobile theme disabled, on phone and tablet views, there is a bit of padding set in body. Given that the theme itself has quite generous whitespace to the left and right of the content , let’s try getting rid of that padding and see what you think I’ve also taken away the top margin on #page to use the full screen width and height on devices 600px and narrower. Add the following to the very end of your custom CSS.
```
@media screen and (max-width: 600px) {
	body {
		padding-left: 0;
		padding-right: 0;
	}
	#page {
		margin-top: 0;
	}
}
```
amaryshad · Member · Jan 15, 2015 at 6:09 am
Copy link
Thank you for your suggestion, thesacredpath. I added your indicated CSS, however, and it made no difference to the white border around the mobile theme header…
thesacredpath · Member · Jan 15, 2015 at 7:44 pm
Copy link
Twenty Eleven is a responsive width theme, which means you really don’t need to have the mobile theme activated at Appearance > Mobile. The theme will adjust for window/screen size, clear down to a phone. Try turning off the mobile theme and then visit your site on your mobile and see what you think.
amaryshad · Member · Jan 15, 2015 at 8:32 pm
Copy link
Yes, thank you, I am aware of that. I was looking to use the mobile theme as an alternative because I like how you can include just an excerpt from each post rather than the whole thing to save some “scrolling” space.
thesacredpath · Member · Jan 16, 2015 at 8:50 pm
Copy link
Ah, I understand. Add the following and then check things out on your mobile.
```
.mobile-theme #branding {
	padding: 0;
	margin: 0;
	background: none;
}
```
amaryshad · Member · Jan 16, 2015 at 10:06 pm
Copy link
Thank you! This did remove the white space around the header. :-)

It also seems to have removed the space between all of the images and the thin grey borders I had set up, so that the borders are now flush against the images. It’s not a big deal, but is it possible to apply the CSS you gave me to only the header rather than all of the images on the mobile theme?
thesacredpath · Member · Jan 17, 2015 at 2:41 am
Copy link
.mobile-theme #branding should only affect the header area where the header image is. #branding isn’t used anywhere else in Twenty Eleven.
amaryshad · Member · Jan 17, 2015 at 9:19 pm
Copy link
My mistake…I see what you mean. I removed the CSS you indicated and the grey borders were still flush against the images. I guess I just never noticed before because I always had it set on responsive theme until very recently.

Are the borders being flush against the images just a result of enabling the mobile theme? When viewing on a computer or a mobile device without mobile theme enabled, there is space between the border and the images.
thesacredpath · Member · Jan 22, 2015 at 3:44 pm
Copy link
Are the borders being flush against the images just a result of enabling the mobile theme? When viewing on a computer or a mobile device without mobile theme enabled, there is space between the border and the images.

You can add some padding back in in the mobile theme so there is some space between the border and image like this:
```
.mobile-theme img {
padding: 5px;
}
```

No items found.