Home Forums Exoplanet Full home page header image on mobile?

Tagged: , ,

This topic contains 4 replies, has 2 voices, and was last updated by  rickodria 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #7546

    rickodria
    Participant

    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!

    #7548

    Andy
    Keymaster

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

    rickodria
    Participant

    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?

    #7564

    Andy
    Keymaster

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

    rickodria
    Participant

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

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

You must be logged in to reply to this topic.