[Jackie]

Hello

How do I do the following for mobile devices? (I’m browsing on Android):
– change the font
– remove the black bar at the top of the page
– reduce the header height so there’s no white space below the image

And how do I troubleshoot the CSS on mobile devices? (on my computer I use Inspect Element on Firefox)

This is my mobile CSS (the relevant bits):

@media only screen and (max-device-width: 767px), handheld, only screen and (max-width: 767px) {
div#respond,.post-meta,article#post-11 h1.entry-title,div.entry-meta,#branding #searchform,#slider-wrap a.more-link,.bp_members #em-wrapper,comments,small center a, h1#site-title a, h2#site-description, #hgroup {
display:none;
}
body {
font-family: “Helvetica Neue”,Helvetica,Verdana,Arial,sans-serif;
}
}

Thanks!
Jackie

[Sakin]

@webhive: It depend on your mobile devices screen Resolutions. So, change the resolutions as per you need from 767 to 768 or more. Can you post in your site URL as I don’t get what do you mean by black bar at the top. If you are talking about admin menu black bar at the top then this will be visible only for login users.

Just add in your custom css in “Appearance => Theme Options => Custom CSS” box.

/* Smaller then standard 767 (devices and browsers) ----------- */
@media screen and (max-width: 767px) {
/* Add in your Custom CSS here */

}

[Jackie]

Hi Sakin

Thanks for your reply.

The URL is headofhair.webhive.com.au.

The @media line works, because my other mobile CSS directives are applied. But I can’t change the font, the black bar or header height. I’m viewing on a Galaxy Tab.

Any help would be greatly appreciated!
Thanks
Jackie

[Sakin]

@webhive: I don’t know the resolution of your Galaxy Tab. So, I am guessing it will be 960 so giving you CSS To remove the admin bar and header space.

@media screen and (max-width: 960px) {
#wpadminbar { display: none; }
#header-content { padding: 10px 0; }
}

For font, go to “Appearance => Theme Options => Font Family Options” and change it.

[Jackie]

Hi Sakin

– The admin bar disappeared but now there’s grey space instead. How do I remove that?
– The #header-content line didn’t remove the space under the thin green line
– It’s ignoring the Font Family settings in Theme Options.
But the rest of this CSS works:

@media screen and (max-device-width: 767px), handheld, screen and (max-width: 767px) {
#main.clearfix {background-image: none; }
#header-content { padding: 0 0 0 0; }
article.hentry { margin-left: 0;}
#page.hfeed { width: 100%; max-width: 100%;}
#hgroup, #wpadminbar { display:none; }
}

[Sakin]

@webhive: I see that you are using 2 custom css. One from our “Appearance => Theme Options => Custom CSS” box and another from “Appearance => Edit CSS”. Please add one only.
Also for the grey margin, you can add the following css inside your mobile css.
#page.hfeed { margin-top: 0; }

We are able to change the font family from the Theme Options panel. After you select the font you need to click on “Save Changes”. Which font did you choose in?

[Jackie]

Hi Sakin

The grey margin at the top of the page where the admin bar was is still there.

So is the white space under #header-content

Font Family in Theme Options panel is set to Helvetica, Helvetica Neue, Arial, sans-serif but the displayed font is more like Comic Sans.

[Jackie]

Have fixed the grey margin at the top of the page with:
#page.hfeed { position: absolute; top: 0; }

But am still having difficulty with the white space under #header-content, and Font Family.

[Jackie]

The Samsung Galaxy Tab seems to force the Comic Sans font on all websites. Maybe I have no control over that.

I’ve removed the white space under #header-content with:
#sidebar-header-right {display: none; }
(There was nothing in the sidebar header but it was taking up space regardless)

Thanks Sakin

[Sakin]

@webhive: Ok thanks 🙂

[Author]

Posts