I’m having trouble making my exported Figma design fit properly on different screen sizes. The main issue is with an image that has dimensions of 1920x720 pixels. When I view it on my screen, it’s way too wide and I have to scroll horizontally to see the whole thing.
I’m working on a MacBook with a 19:10 aspect ratio display. No matter what CSS properties I try, the image just won’t scale down to fit my viewport properly.
Here’s what I’ve attempted so far:
.hero-image {
width: 100%;
height: 100%;
}
I also tried viewport units:
.hero-image {
width: 100vw;
height: 100vh;
}
And even experimented with vmin/vmax:
.hero-image {
width: 100vmin;
height: 100vmax;
}
None of these approaches work. The image stays at its original size and doesn’t scale to fit the screen. Another issue I’m running into is that when I resize the browser window to be smaller, elements get cut off instead of adapting to the new size.
What’s the right way to make Figma designs responsive so they work across different screen sizes?
You’re setting explicit height values - that’s what’s breaking everything. The image gets locked to its original dimensions and won’t scale properly. I made this same mistake when I first moved from design tools to web dev. Try this instead: css .hero-image { width: 100%; height: auto; display: block; } height: auto is key here - it lets the browser calculate height based on width, keeping everything proportional. Also check that your container has proper constraints. Figma exports are notorious for this stuff. I usually wrap them in a div with max-width: 100% and overflow: hidden to kill that horizontal scrolling. The display: block gets rid of inline spacing that causes overflow. This should make your 1920px image scale down nicely on your MacBook without breaking the aspect ratio.
Your problem is that you’re not constraining the image dimensions properly. Setting both width and height to 100% confuses the browser - it doesn’t know which dimension to prioritize. I hit this same issue when moving from static designs to responsive layouts. Use max-width: 100% and height: auto instead. This keeps the aspect ratio intact while making sure the image never overflows its container. For hero images, try object-fit: cover if you want cropping or object-fit: contain if you want letterboxing. Viewport units can work, but 100vw usually creates horizontal scroll because of the scrollbar width. Just use width: 100% on the container and let the image scale inside it. Make sure you’ve got box-sizing: border-box set too - otherwise padding gets added to the total width and breaks things.
Check for margins or padding - they’re probably the culprit. I had the same problem and it was default margins on my container adding extra width. Add margin: 0; padding: 0; to both your image and container. Also look for any min-width properties - those’ll stop things from scaling down on mobile.
The problem is that browsers treat fixed dimensions as absolute pixel values instead of flexible ones. When you export at 1920x720 from Figma, the browser won’t scale it properly. I had this exact issue on a client project - the hero banner looked great in Figma but broke on everything except large desktops. Here’s what fixed it for me: wrap the image in a container with a defined aspect ratio. Set the container to position: relative and add padding-bottom: 37.5% (that’s 720/1920). Then position your image absolutely inside with width: 100%; height: 100%; object-fit: cover. This keeps your design intact while making the image scale properly across all devices without causing horizontal scroll.
You’re not resetting the browser’s default CSS first. I hit this same problem with large hero images from design files. Add a CSS reset to your stylesheet: * { box-sizing: border-box; } and body { margin: 0; padding: 0; }. The horizontal scrolling happens because browsers add default margins and factor the scrollbar width into viewport calculations. For your image, use width: 100%; max-width: 1920px; height: auto; instead of viewport units. The max-width stops it from getting bigger than the original export on wide screens, while width: 100% scales it down on smaller devices. Viewport units like 100vw cause overflow issues since they don’t account for scrollbars. This approach works reliably across different projects and screen sizes.