Reply To: Responsive Page Header

Home Forums Support Responsive Page Header Reply To: Responsive Page Header

#209411
Tom
Lead Developer
Lead Developer

Unfortunately that’s just the nature of background images – it has to do with the aspect ratio.

The ratio on a desktop is different than on mobile, but the image still has to fill the area, so certain part of it aren’t shown.

One solution is to create an image just for mobile, then apply it using some CSS:

@media (max-width: 768px) {
    .blog .generate-content-header {
        background-image: url( 'URL TO YOUR MOBILE BACKGROUND IMAGE' );
    }
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/