Forum Academy Marketplace Showcase Pricing Features

100vh image won't stick to left side

So I’m using the ZC dynamic height plugin to size my image to 100vh but I want that image to stick to the left side of my page/viewport. So basically align-left & keep it’s square proportions. I’ve tried it all but no luck… Is it possible to combine these settings? What would I need to do?

@renzetc There are a two main issues I see with your current approach:

  1. Square proportions: As the page gets resized across different screens by different users, it’ll be impossible to keep the image in that shape and have it stretch from the top to the bottom. It’s not a Bubble issue - one couldn’t do that in legacy code either since it’s a logical impossibility. :slight_smile: (Unless I misunderstood what you are trying to do - in that case, it’d be useful seeing some existing page out in the wild that does what you want to accomplish.)

  2. Image margins: There are currently both top and bottom margins above the image which Bubble will try to enforce by not stretching your image across the whole height of the page, despite any plugins or CSS you assign the element. Tweak the image so that its top touches the top of the page and its bottom touches the bottom of the page, eliminating the margins, and your plugin should work. Alternatively, just add this to the page HTML header:

<style>
#productGrid {
    min-height: 100vh;
}
</style>
1 Like

I don’t understand how this is not possible? All I want is for the image to be both 100vh high and 100vh wide, so square, and I want it to stick to the left side of my viewport.