Home Gallery Image Zoom

[ashleyroth]

I have contacted Hubspot support who lead me to post here. The home page image slider on my website does not cover the full width of the page, which it used to do. 

I'm hoping someone can tell me why this is happening and how to fix it. 

Homepage link: https://www.abelhall.com/

Homepage preview link: http://www.abelhall.com/?hs_preview=cimDOyUp-6126278345

Code snippet: 

<style>
.home-gallery .hs_cos_gallery_main .caption.superimpose {
position: absolute!important;
top: 0;
background-color: transparent;
color: #fff;
padding: 0;
left: 0;
right: 0;
max-width: 1100px;
margin: 0 auto;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>

Thanks in advance!

Ashley

[jzilch]

@ashleyroth I was able to take a look at this page for you and believe I see what is causing the image you're using to not be full width. While there is an animation on the image that creates the zoom effect there is other CSS in which is keeping the image from expanding to the full width of the page. On the class here .hs_cos_gallery_main .slick-slide img which is part of our boilerplate CSS and there is a max-width and a margin: 0 auto which is going to center the image and that adds about 550px of margin to the left and right side of the image. 

Since we are not able to directly access the CSS in projects.css we can overrride or add additional CSS in your stylesheet attached to the template to help to solve this issue. 

.hs_cos_gallery_main .slick-slide img {
  width: 100%;
}

This will expand the image to be 100% of the viewport and therefore remove the large space on the left and right on larger viewports. I would try and add this into your stylesheet and that should help to expand the image for you. 

Let me know if this helps to remove those spaces

[ashleyroth]

This worked! Thanks so much!

[ConnorSlivensky]

That being said looking at your page it looks like it does grow to full-size and shrinks again on reload which makes me think it's some JavaScript related. Unfortunately, that's out of my wheelhouse but I hope that helps some.  

[ConnorSlivensky]

Hey Ashley.

Just so you know your last link won't work. You want to be sure when you post links they aren't app.hubspot.com as that is the internal URL, it directs those without portal access to login. You will need to publish it to let anyone outside your team and HubSpot see it without login. I'd suggest setting the URL to something outside your normal web structure so nobody accidentally stumbles upon it. 

[ashleyroth]

Thank you for letting me know. I have updated my original message with the actual code snippet so hopefully that will help.