Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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?

    #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

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Header blocks page content on iphone 7’ is closed to new replies.