after update: Banner image setting does not change to size mobile phone

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

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
https://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: https://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. https://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