Full home page header image on mobile?

[rickodria]

Hi there, can anyone help with showing me how to display my full header image on mobile? Right now it just crops to the middle of the image. The website is http://www.thebeerandnow.com.

Not the very well versed in coding so a simple rundown would be super helpful, thank you!

[Andy]

It will “crop” the sides of the image on mobile in portrait mode because the screen/browser size will be higher than it’s width, so this is normal behavior.

A couple of different things you could try;

1. use a different image for display on mobile. Add this to ‘Appearance’ > ‘Customize’ > ‘Additional CSS’:
(use actual name of your image instead of ‘name-of-image-for-mobile-view.jpg’)

@media screen and (max-width: 768px) {
    .slide.slide-count1 {
        background-image: url('http://thebeerandnow.com/wp-content/uploads/2019/06/name-of-image-for-mobile-view.jpg');
    }
}

2. set a maximum height for the image area so the height will be not so high in relation to the width. Disadvantage of this is that the image will no longer fill the screen/browser window top to bottom.
Again add to ‘Additional CSS’:
(experiment with different heights, the ‘400px’ value til you get the look you want)

@media screen and (max-width: 768px) {
    #home-slider-section .bx-viewport,
    .slide.slide-count1 {
        max-height: 400px;
    }
}

[rickodria]

Hey Andy, thanks for your response. I’m trying to add the CSS that changes the image for mobile, but I’m not seeing anything change for some reason. I’m putting in the link for the image properly. Any reason why that might be?

[Andy]

Could you try it with the addition of !important rule, same as before but like this:

@media screen and (max-width: 768px) {
    .slide.slide-count1 {
        background-image: url('path-to-img.jpg') !important;
    }
}

[rickodria]

Awesome, that one worked. Thanks so much Andy, I appreciate it!

[Author]

Posts