Change header image from desktop to mobile

  • Resolved montecomis

    (@montecomis)


    1 year, 4 months ago

    Hi,

    can somebody give guidelines or the solution of how i can bring inside cover block (Gutenberg based site) a different picture when my site goes to mobile version, removing the first one of desktop pic? I am asking this because my header (inside cover box) although has dimensions of 1600x1200px getting blurred under mobile view.

    *i am using proteo theme.

    Thank you.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter montecomis

    (@montecomis)

    I solved it! I make the cover Gutenberg box react as a featured image and then put the below code:

    @media only screen and (max-width: 960px) {

    .headerImage {



        background-image: url('/wp-content/uploads/2023/10/w_coat_002b.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;

}

    }

    @media only screen and (min-width: 960px) {

        .headerImage {


        background-image: url('/wp-content/uploads/2023/10/header_image_AW_2324-1.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
}

    }

    Thanks!

    Hi @montecomis

    Your code looks correct. It uses media queries to apply different styles for different devices based on the width of their browser window.

    I am glad that it is now working, and we appreciate you for sharing these solutions. If you continue to face any issues or have any other queries, feel free to contact us. We’re here to help!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change header image from desktop to mobile’ is closed to new replies.