Mobile Styling Issues- Text & Logo

[GWS]

Hi guys

Have two queries relating to smartphone sizing.

1, Am finding that the site logo is being covered by the navigation box. The height of the background also reduces I tried reducing the logo width but did not seem to make much difference. Please advise.

2. I have some <h1> font as a heading on most pages that does not seem to reduce in size when screen reduces to mobile size. Is there a way to set text size so that there is one size for desktop, ipad and iphone?

many thanks
GWS

[GWS]

This reply has been marked as private.

[Raghavendra]

I inserted the following CSS into Custom CSS tab in theme options panel –

/* Tweaks for mobiles */
@media only screen and (max-width: 767px) {
#site-logo {
width: 180px;
top: 5px;
padding: 5px 0;
}
#mobile-menu-toggle {
right: -10px;
}
h1 {
font-size: 22px;
line-height: 32px;
}
}

Have changed the font size as well based on screen width. Pls have a look and get back to me if you have more queries. Thanks

[GWS]

Thanks Meteorite, that’s great!

Again with smartphone resizing, how would I reduce the padding between above and below the opening pages titles, as shown in attachment.

On smartphones it just adds unnecessary white space and scrolling, which is basically after customer feedback, I am looking to reduce.
.
It would be great if some mobile controls were included in the Theme options, I’m sure it would be a good selling point.

best regards and thanks again
GWS

[Raghavendra]

Made the following changes to Custom CSS and I think it looks much better –

@media only screen and (max-width: 767px) {
	.segment {
		padding: 30px 0;
	}
	.divider-fancy {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	h2, h3 {
		line-height: 28px;
	}
	#sidebars-footer {
		margin-bottom: 20px;
	}
}

[GWS]

Hi Meteorite

Thant looks much better.
Thanks very much for all your hands on help.

GWS

[Author]

Posts