Header blocks page content on iphone 7

This topic has 3 replies, 2 voices, and was last updated 6 years, 1 month ago by Skandha.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
October 4, 2018 at 10:27 pm #155821

kendrickw
Participant

When showing the page on smaller screen size, such as iphone 7, the header would block the page content. See pic: Picture of how header blocks page content

Any way to reduce the header size responsively?

October 5, 2018 at 2:12 am #155847
Skandha
Participant
@kendrickw: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
@media screen and (max-width:361px) {
	.site-description {
   		font-size:10px !important;
	}
}
```
This should solve the issue you are having.
Let me know if this works out!
Kind Regards,
Skandha
October 5, 2018 at 9:35 am #155876
kendrickw
Participant
Thank you for your suggestions, it works!!
This is what I ended up doing on my site:
```
@media screen and (max-width:420px) {
	.site-branding .site-title {
		font-size: 0.6em;
	}
	.site-branding .site-description {
		font-size: 0.5em;
	}
	.site-primary-wrapper {
		padding-left: 2px;
	}
	#footer-left-content {
		font-size: 0.2em;
	}
	#site-generator {
		padding-top: 2px;
	}
	.home.admin-bar .footer-bottom {
		bottom: 60px;
	}
}
```
October 8, 2018 at 11:59 am #156185

Skandha
Participant

@kendrickw: Hello there, I hope I was able to resolve your issue. If it’s not too much trouble, I have a quick request: could you please leave an honest review?
https://wordpress.org/support/theme/catch-fullscreen/reviews/#new-post
Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely appreciated. Thanks, and if there’s anything else at all that I can do to help,
don’t hesitate to let me know. Have a good day! 🙂

Kind Regards,
Skandha
Author

Posts