Non-responsive image header

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter spitfire85

    (@spitfire85)

    2 years, 2 months ago

    Good morning, Following the update of the “blueStreet” theme, my background image was deleted. I created it using CSS:

    radhika1992

    (@radhika1992)

    2 years, 2 months ago

    Hi

    Thanks for contacting to us.

    To make image header image responsive add the below css code inside the appearance >> customizer >> additional css box.

    @media only screen and (max-width: 479px) and (min-width: 200px){ .navbar3.navbar-inverse { position: relative; } body .page-mycarousel {padding: 52px 0;} } @media only screen and (max-width: 820px) and (min-width: 480px){ .navbar3.navbar-inverse { position: relative; } body .page-mycarousel {padding: 98px 0;} } @media only screen and (max-width: 1100px) and (min-width: 821px){ .navbar3.navbar-inverse { position: relative; } body .page-mycarousel {padding: 128px 0;} }

    Let us know if you have any confusion.

    Thanks

    Webriti Support Team

    • This reply was modified 2 years, 2 months ago by radhika1992.
    Thread Starter spitfire85

    (@spitfire85)

    2 years, 2 months ago

    Hello

    Thanks for you quick response.

    I added the command lines in the additional CSS but I only have a very small part of the image at the top left. My image is 1599×380 pi 183k.

    How to get the whole picture.

    Thanks

    Here my CSS

    .page-mycarousel {

    background: url(http://www.aeroclubdubocage.fr/wp-content/uploads/2024/01/page-header-pr-page-daccueil.jpg)!important;

padding:180px 0;

    }

    .page-mycarousel img {
    display: none;
    }
    @media only screen and (max-width: 479px) and (min-width: 200px){ .navbar3.navbar-inverse { position: relative; } body .page-mycarousel {padding: 52px 0;} } @media only screen and (max-width: 820px) and (min-width: 480px){ .navbar3.navbar-inverse { position: relative; } body .page-mycarousel {padding: 98px 0;} } @media only screen and (max-width: 1100px) and (min-width: 821px){ .navbar3.navbar-inverse { position: relative; } body .page-mycarousel {padding: 128px 0;} }

    radhika1992

    (@radhika1992)

    2 years, 2 months ago

    HI

    Also add the below css code inside the additional css box.

    @media (max-width: 1100px){ body .page-mycarousel { background-size: cover !important; }}

    For your information We have managed the header image feature in much better way in our pro theme as you need. If you want further you can use.

    Feel free to contact us for further assistance.

    Thanks & Regards

    Webriti support Team

    Thread Starter spitfire85

    (@spitfire85)

    2 years, 2 months ago

    Hello

    Wonderful it’s works, thank you very much !

    Thanks & Regards

    sptefire85

    Akhilesh

    (@atul-rahman)

    2 years, 2 months ago

    Hi

    We are glad to know that it has been resolved.

    If you like our theme and support, please give rate us here.

    Feel free to contact us for further assistance.

    Thanks& Regards

    Webriti Support

    • This reply was modified 2 years, 2 months ago by Akhilesh.
    • This reply was modified 2 years, 2 months ago by Akhilesh.
Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Non-responsive image header’ is closed to new replies.