I am looking to scale the image that lays on top of the background image from desktop to mobile but it does not seem to be responsive.
Looking for any suggestions.
what page on your site is this on?
Hey Jeremy! It is on my home page. I was just messing around with it, but it should be back!
Thank you, would love any insight.
B
I cant’ see the video can you provide the webflow.io link so I can get an idea what you are looking to do. Right now the image itself doesn’t seem to fill the space the actual image has white space all the way around it.
I am not sure how to send the webflow.io link? I am just sending the read only link webflow tells me to share?
The publish link is yourname.webflow.io. But I think your issue is the svg has space around the image so 100% width will never take the inner image to the edge.
https://embrace-your-shadow-co.webflow.io/
So should I put the svg within a container?
Which svg are you wanting to use this one? Do you want it to align with the bottom of the hero section and stretch to the full width?
I would like it to scale as I cascade down to mobile, so the mobile experience isn’t swallowed up by the giant logo, ideally sticking within a similar ratio to the header video but that will need to be scaled as well.
I set the height of the video in mobile to 56.25 VH as a test, is there a way to scale the svg more appropriately to fit that video size?
okay I think I got it. The image is huge if you use 100% width
you actually want to use 50-75% height
i’ll do a quick video give me a second.
your hero section is whatever height you want the video to be depending on device VH
place a div in the section and set it to absolute, full, and set to flex center / center justify.
That will centre the image
use a percentage on the height for your image. eg 50%, 70% It will scale according to the percentage you choose in relation to the VH of the section.
hope that and the video make it clear.
also you can set the BG video to absolute as well so it adapts to the section height
Jeremy,
Thank you so much for sharing your knowledge and taking the time to create that screen record, that helped tremendously!
I appreciate your time and wisdom!
Thanks again,
Brandon
1 Like
You’re welcome. It takes a few tries to wrap ones head around the concepts but once you see how they work you can create pretty cool stuff. love that wolf video and it’s a cool design. When I first was looking at it I didn’t clue in that I was only looking at the ears on the desktop. Once I figured out the image was huge it made sense.
Glad you like it Jeremy! I have a second question - it seems as though the video is being cut off (the Grim Reapers Scythe is being cut off and you can only see a staff, do you know how to fit the whole video?
So depending on the screen size the Scythe is being cut off. The BG video is responsive so it stretches. You can control it better on smaller sizes but harder on larger screen sizes for the desktop screens you might be better at 100VH down and adjust as you test on tablets etc. videos are generally 16:9 or 2:1 I went to go check out the site but you changed the share link to the webflow.io one. Both are helpful the share link let’s people go to a read only designer for your site. and the webflow.io one shows what the published site should look like. Let me know if you have any more questions. But that’s where I would start to play with it. as far as responsive goes’ you want it to look the best on the most common screen sizes. It won’t look perfect on all.
Jeremy,
Awesome let me play around with the VH size, here is the updated link - let me know if this works!
https://embrace-your-shadow-co.webflow.io/
Thank you!
1 Like