Image responsiveness in template

[MariS]

Hi Hubspot team 

I am having difficulty with my image sizing. The image in my template was fine on desktop, but on mobile it was stretching outside of the screen. 

I found the following article, which suggested I edit my CSS to include 

img{max-width: 100%; height: auto;}

But then my image became too small and doesn't fill the space on desktop (though it's now perfect on mobile). 

What can i do to have my image respond to both desktop and mobile? Page example (now with an image too small on desktop) : http://ace.altdigital.co.za/facebook-reporting-template 

Thanks

[dessery · Accepted solution]

Hi there

If the orignial size of the image is smaller than your container, max-width: 100% will ensure it only ever goes as large as the original image is.

To help illustrate that, if you have an image that is 300px wide, and a div surrounding it that is 500px wide, the image will only ever be displayed at a maximum of 300px wide, however if your div is 250px wide, your image will be 250px wide.

Two options are to either swap the image for a larger version, or if you change max-width to just width, it will fill the full container regardless of the image size. It is worth considering though that if you go for the second option, the quality of the picture probably won't not be very good if you are stretching it a long way.

I hope that helps

All the best

David

[dessery · Accepted solution]

Hi @rickbyrd

This is actually quite a different issue to the OP so it may be best to create a new post, but from a quick look, I am assuming it is the banner at the top of the page which the "Apply in minutes" box runs over. If so, this doesn't actually use an HTML <img> tag so the solution would be a bit different. The first thing I would do though is take the CSS you provided and modify it as below:

.homehead {
    background: url('https://www.bigpictureloans.com/hubfs/BPL_Hero_Images/March2018_Home%20Page%20Hero%20Image_Winter_Fe...');
    background-repeat:no-repeat;
    background-size: 100%;
}

This should force the image to take up 100% of the browser width, so as the screen gets smaller, the image itself will get smaller.

I hope that helps

All the best

David

[dessery · Accepted solution]

Hi there

If the orignial size of the image is smaller than your container, max-width: 100% will ensure it only ever goes as large as the original image is.

To help illustrate that, if you have an image that is 300px wide, and a div surrounding it that is 500px wide, the image will only ever be displayed at a maximum of 300px wide, however if your div is 250px wide, your image will be 250px wide.

Two options are to either swap the image for a larger version, or if you change max-width to just width, it will fill the full container regardless of the image size. It is worth considering though that if you go for the second option, the quality of the picture probably won't not be very good if you are stretching it a long way.

I hope that helps

All the best

David

[rickbyrd]

We are using an image in the homehead section of our stylesheet.  Where would I put the code img{max-width: 100%; height: auto;} in the stylesheet?

Thanks!

Rick

[dessery]

Hi @rickbyrd

Is this on an email template? If so, if you open up your template in the design manager, click on the Edit button and click 'Edit head' and add it in the editor there, just make sure you include it inside style tags:

<style type="text/css">

</style>

If you only want it to appear on mobile devices, you may need to also wrap it in a media query, something like:

@media screen and (max-width: 650px) {

}

I hope that helps

All the best

David

[rickbyrd]

David,

No this is on our website - https://www.bigpictureloans.com.  The image does not resize along with the rest of the site when viewing the site from a mobile device.  

The image is a background image that we use within the stylesheet.  

.homehead
{
background: url('https://www.bigpictureloans.com/hubfs/BPL_Hero_Images/March2018_Home%20Page%20Hero%20Image_Winter_Fe...');
background-repeat:no-repeat;
}

I am not sure how/where to add the code to the stylesheet to have it resize.

Rick

[dessery · Accepted solution]

Hi @rickbyrd

This is actually quite a different issue to the OP so it may be best to create a new post, but from a quick look, I am assuming it is the banner at the top of the page which the "Apply in minutes" box runs over. If so, this doesn't actually use an HTML <img> tag so the solution would be a bit different. The first thing I would do though is take the CSS you provided and modify it as below:

.homehead {
    background: url('https://www.bigpictureloans.com/hubfs/BPL_Hero_Images/March2018_Home%20Page%20Hero%20Image_Winter_Fe...');
    background-repeat:no-repeat;
    background-size: 100%;
}

This should force the image to take up 100% of the browser width, so as the screen gets smaller, the image itself will get smaller.

I hope that helps

All the best

David

[rickbyrd]

David,

Thanks!  It did help the mobile version but created a problem on the desktop version and the form.

I'll create a new post for this.

[dessery · Accepted solution]

Hi @rickbyrd

If it is causing an issue at the desktop size then you can use a media query to ensure that the CSS will only be applied at a certain screen size, for instance, instead of using the previous code I suplied, you could do the following:

.homehead {
    background: url('https://www.bigpictureloans.com/hubfs/BPL_Hero_Images/March2018_Home%20Page%20Hero%20Image_Winter_Fe...');
    background-repeat:no-repeat;
}

@media screen and (max-width: 650px) {
    .homehead {    
        background-size: 100%;
    }
}

You will just need to tweak the max-width: 650px to be the maxiumum width that you want that CSS rule to stop applying at.

I hope that helps

All the best

David

[MariS]

Thanks David!!