Alt background not responsive for one image only

[hillcapital]

I created a test page that I’d like to use with a full width text box with alt background. The image for this alt background isn’t responsive at all. I tested other images on this test page and they are responsive. I’m not sure what the problem is.

Website info will be posted below.

[hillcapital]

This reply has been marked as private.

[hillcapital]

I’ve solved the responsiveness, but when in smaller windows, there is a white space beneath the first alt background section.

[hillcapital]

Resolved by myself.

Solution if anyone is interested:
I solved the issue with a bunch of media queries for various sizes, selecting the class of the specific section and changing the height.

For example:
@media only screen
and (min-width: 495px)
and (max-width: 767px){
.home-row-simple {
min-height: 250px;
}
}

[hillcapital]

Actually, the issue is not resolved. On my phone, the white space is still there beneath the section.

[David Martin – Support]

Hi,

That looks to be because of the custom CSS:

Can you amend it with this:

@media only screen and (max-width: 979px)
@media only screen and (max-width: 768px)
@media only screen and (max-width: 474px) and (min-width: 301px)
.home-row-simple {
    min-height: 140px;
}

Thanks,
David.

[hillcapital]

Hi David,

I just added that custom css and deleted the ones I wrote with media queries. The white space is still there. Can you check?

Thanks

[hillcapital]

Update:

I used that code and also kept:

@media only screen and (max-width: 1024px) {
.alt-bg.alt-five {
background-image: url(“http://www.hillcapitalcorp.com/wp-content/uploads/2015/08/HCC-STR-Train.jpg”);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
}

The white space is gone now, but the image does not scale responsively.

[Rui Guerreiro – SUPPORT]

Hi,

You can use a different background image for that resolution, this way will also load a smaller image with maximum of 767px

Just replace the url below for the reduced image.

@media only screen and (max-width: 767px){
.alt-bg.alt-five {
    background-image: url("http://www.hillcapitalcorp.com/wp-content/uploads/2015/08/HCC-STR-Train.jpg");
}
}

Hope it helps.

-Rui

[hillcapital]

Hi Rui,

I used the new code you provided and added a smaller sized photo but its still not working. The image still doesn’t scale. Would it be possible if you or someone go into my website and fix it for me?

Thanks

[David Martin – Support]

Hi,

Remember to override your min-height and set the background size to cover for that. Working example:

@media only screen and (max-width: 767px) {
.alt-bg.alt-five {
    background-image: url("http://www.hillcapitalcorp.com/wp-content/uploads/2015/08/HCC-STR-Train-8001.png");
    background-size: cover;
    min-height: auto!important;
}
}

Thanks.

[hillcapital]

Ok, I updated with the new code. It works well on my desktop browser when I resize it, but with my phone, I can only see the word Transparent in the image and it is still large.

[David Martin – Support]

Hi,

The code provided is specifically for small screens, it works great for me on my iPhone6. What device version do you have?

Have you cleared your iPhone’s safari cache?

– David.

[hillcapital]

Hi David,

I have an Android (Samsung S6). I’ve cleared cache but the image still doesn’t scale. I’ve attached an image of how it currently looks on my phone.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

This seems specific to your device, as I do not have this device it’s very hard for me to test it.

My last thought is to target your devices screen dpi, can you add this and clear your device cache also.

@media (min-resolution: 577dpi) {
  
   /* Samsung S6 */
  .alt-bg.alt-five {
    background-image: url("http://www.hillcapitalcorp.com/wp-content/uploads/2015/08/HCC-STR-Train-8001.png");
    background-size: cover;
    min-height: auto!important;
   }

}

Thanks.