How to resize image for mobile only on SS7.0 Haute

Site URL: https://www.harveyaquino.com/

Hi! I would like for my banner image to display in full width in mobile view without expanding the image itself.

I've tried using this code,

/* mobile screens */
@media only screen and (max-width: 640px) {
#block-yui_3_17_2_1_1613893986644_10835{
  width: 250%;
  }
}

and got this,

However, when you zoom out in mobile view, you get this:

Thank you all for your help!

On 2/28/2021 at 12:31 PM, HarveyAquino said:

Site URL: https://www.harveyaquino.com/

Hi! I would like for my banner image to display in full width in mobile view without expanding the image itself.

I've tried using this code,

/* mobile screens */
@media only screen and (max-width: 640px) {
#block-yui_3_17_2_1_1613893986644_10835{
  width: 250%;
  }
}

and got this,

 

However, when you zoom out in mobile view, you get this:

 

Thank you all for your help!

 

 

It looks like you solved this by using Image Block?

3 hours ago, tuanphan said:

It looks like you solved this by using Image Block?

I am using an image block. However, when you zoom out in mobile view, the image is visibly enlarged hence the big space beside the page content.

I guess what I'm trying to do is for the image to be cut off in mobile portrait view so that when scrolling there is no extra room to zoom out to. 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
html, body {
    overflow-x: hidden;
}
}

I am having the sam Issue. www.lazyjackslagos.com when i have a banner image on homepage it zooms in way to much on mobile and crops the image

On 3/12/2021 at 6:08 PM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
html, body {
    overflow-x: hidden;
}
}

 

Thanks! It worked! 🙂