Responsive image for mobile screens

Site URL: https://www.binoodhasasi.com/work/chinatownxr

Hi,

I was working on my website and the mobile screens do not resize the first background image to mobile screen. Is there a custom css code  I can use to solve this? Attaching an image to show the issue. 

I'n not sure if this is the best way to do it, but it solves your problem😊

Change "40" below to your liking.

@media screen and (max-width: 800px) and (orientation: portrait) {
  [data-section-id="60654e74029be7381101a5ae"] {
   	max-height: 40vh;
	min-height: 40vh; 
  }
}

On 4/23/2021 at 2:48 PM, beeskay said:

Site URL: https://www.binoodhasasi.com/work/chinatownxr

Hi,

I was working on my website and the mobile screens do not resize the first background image to mobile screen. Is there a custom css code  I can use to solve this? Attaching an image to show the issue. 

You can also use this CSS (Add to Design > Custom CSS)

/* Chinatown XR - resize mobile image */
@media screen and (max-width:767px) {
[data-section-id="60654e74029be7381101a5ae"] {
    min-height: unset !important;
    height: 40vh;
    margin-top: 10vh;
}
}

Use this tool to find data section id, if you have similar problem in the future.