Custom Module image issue

[krissyhack]

Hello! I am working on inserting a module used on one page on our website and inserting into a different template page on our website. We have this module working correctly here. (it is the cards that the model homes are on)

On a desktop, the image is appearing just fine, but on mobile or tablet, it is severely zoomed in regardless of the image dimensions I put on the image and the title text is left justified only on desktop not on mobile. See the preview issue here by clicking on the AVAILABLE HOMES square a bit down the page. 

Here are screenshots as well: Correct Mobile ViewCorrect Desktop ViewIncorrect Desktop View (Banner text is left justified)Incorrect Mobile View - photo enlargedphoto enlarged pt. 2

[tjoyce]

It's the slick slider in HubSpot. I have seen this exact issue before without a really good work-around. The problem is that slick is initializing on page load but your content isn't available until the button is clicked to show the homes. So, slick doesn't know what width your images should be because they aren't visible yet in the viewport. I would opt to remove the slider and go for a basic grid in this case.

tim@belch.io

[kcarpintieri]

Hi there!

The desktop version looks fine to me. The image is very zoomed in on mobile though. Maybe try to apply an inline style to the image?  Or apply a class? 

.responsive {
  width: 100%;
  height: auto;
}

or 

.responsive {
  max-width: 100%;
  height: auto;
}