Support » Theme: Wallstreet » after update: Banner image setting does not change to size mobile phone

  • Resolved blondje1

    (@blondje1)


    After the update, my banner image is too big for tablet / mobile phone. How can I adjust the setting that when someone switches to a mobile phone, the photo adjusts itself and you see it in full?

    Thank you!

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

Viewing 12 replies - 1 through 12 (of 12 total)
  • Hi
    Thanks for contacting to us.
    To make image responsive add the below css code inside the
    Appearance >> Customizer >> Additional css box.

    @media only screen and (max-width: 480px) and (min-width: 200px) 
    { 
    .static-banner {
        height: 50vh! important;
        background-size: 100% 100% ! important;
    }
    }
    
    @media only screen and (max-width: 767px) and (min-width: 480px) 
    {
    .static-banner {
        height: 75vh! important;
        background-size: 100% 100% ! important;
    }
    }

    Let us know for any confusion.
    Thanks
    Webriti Support

    HI
    Did the above solution work for you?

    Thanks

    Thread Starter blondje1

    (@blondje1)

    Sorry your message was in the spam box.

    Thank you it worked. Only the photo now has a strange proportion. But I think there will be little that can be done about it.
    Thank you!!

    Hi! I followed the instructions sent by you to blondje1 and the site adjusted to the device, but the image was totally distorted, compressed from its width. Any new css to add to the first one or should i reduce the image size? If to reduce, in what size? I really need your help.
    Thank you in advance for your answers.
    Greetings

    Repeating the message, because I forgot to put the address of the website (sorry) Hi! I followed the instructions sent by you to blondje1 and the site adjusted to the device, but the image was totally distorted, compressed in its width. Any new css to add to the first one or should i reduce the image size? If it reduces, in what size? I really need your help.
    Thank you in advance for your answers.
    greetings
    https://sandovalmunicipal.com.br/

    HI@pmabsb

    Remove the previous css code you have added in custom css box.
    Use below css code.

    @media only screen and (max-width: 767px) and (min-width: 601px) 
    {
    .static-banner {
        height: 75vh! important;
        background-size: 100% 100% ! important;
    }
    }
    @media only screen and (max-width: 600px) and (min-width: 450px) 
    {
    .static-banner {
        height: 40vh! important;
        background-size: 100% 100% ! important;
    }
    }
    
    @media only screen and (max-width: 449px) and (min-width: 200px) 
    {
    .static-banner {
        height: 20vh! important;
        background-size: 100% 100% ! important;
    }
    }

    Change height value as your need.

    Thanks

    Dear Nagar, you are great! Thank you very much for your support. Now I’ll try my image and resize it to exactly the same values as yours (1593X748) and hope it works. Greetings from a happy man.

    Dear Nagar, the image is still a bit flat. As I don’t know where in the code I can move, according to your guidelines, I need you to indicate the line on which I have to change. I apologize for the insistence, but I am totally ignorant of the matter. I leave the link to facilitate your observation. greetings
    http://www.sandovalmunicipal.com.br

    Hi @pmabsb
    Don’t worry dear, we are always here for assistance.
    Let me know on which screen resolution size are you getting issue.
    Kindly tell us so that we can assist you better.

    Regards
    Webriti Support Staff

    Hello Nagar! I refer to the home page banner with measurements of 1593X757. The image is flattening. When you kindly sent me the css code, you told me you could change the height measurements, but I don’t know where. There are several lines with height measurements and I don’t know which one to move, nor what values to put. In some smartphones the image is not very flat, but it is still visible, in others, of smaller size, the problem increases. This is the website: http://www.sandovalmunicipal.com.br
    Grateful greetings

    Hi Nagar. On tablets and smartphones. The specific resolution I can’t answer, but the smaller the device, the greater the flatness. I hope the answer can help you. Best Regards. http://www.sandovalmunicipal.com.br

    HI
    If you don’t tell us in which screen resolution are you getting the issue, How can we assist you better?
    So One way is you can adjust the height value of my previous CSS code.

    Thanks

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.