[kendrickw]

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?

[Skandha]

@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

[kendrickw]

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;
	}
}

[Skandha]

@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