Making a carousel fit entire page without scroll
I'm trying to create a variant of a client's homepage, but I can't figure out how to change an element's size so that it fills the entire area in different browser sizes but without having scroll on the page. The element on the page I'm trying to change is the carousel of the three images. The problem is I can make the carousel bigger with a hard coded size, but that isn't dynamic. Also, I'm having trouble making the images completely fit in the carousel. As of now they're being cutoff on top and bottom. I've tried making height and min-height 100% and making background-image cover and contain. None of these have worked even when I applied them to different parent divs. I need the carousel to go all the way to bottom of the page and eliminate the scrolling.
Do you have any suggestions on how to go about this? The variant is below:
Are you using the Edit HTML option or directly entering the jQuery method .replaceWith in your Variation Code?When you are using the Edit HTML option or the replaceWith method on static content it is great practice however you will want to be very selective of where you use it on your site.
As you grab larger blocks of content, it is likely that it will contain dynamic elements (as it is the case with a carousel). Edit HTML will replace a dynamic block of content with a static block of content. This is because the Edit HTML tool uses a .replaceWith method.
For more information, please see this Edit HTML article, here, specifically the paragraph titled 'Be cautious about using Edit HTML that contains dynamically loaded content.
I hope this helps!