Adapting Figma designs for responsive web layout

Other Questions Figma
1

I’m having trouble with a design I exported from Figma. The image is 1920x720 pixels, which is too big for my viewport. I have to scroll sideways to see the whole thing. This is frustrating!

I’ve tried a bunch of CSS tricks to make it fit:

.image {
  width: 100%;
  height: auto;
}

.image {
  max-width: 100vw;
  max-height: 100vh;
}

.image {
  width: 100vmin;
  height: 100vmax;
}

Nothing works! The image stays the same size and won’t fit my screen. I’m using a MacBook with a 19:10 display, if that matters.

Another issue: when I make the browser window smaller, it cuts off parts of the page instead of scaling things down.

I’ve tried these CSS rules on the body and other elements too, not just the image. Any ideas on how to make this design responsive? I’m stumped!

2

Mike, I’ve encountered similar issues when working with Figma exports. One approach that’s worked well for me is using a combination of ‘object-fit’ and ‘object-position’ CSS properties. Try this on your image:

.image {
width: 100%;
height: 100vh;
object-fit: cover;
object-position: center;
}

This should make the image cover the entire viewport while maintaining its aspect ratio. It might crop some edges, but it’ll prevent scrolling issues.

For overall responsiveness, consider using CSS Grid or Flexbox for your layout. These modern layout systems can help elements adjust more fluidly to different screen sizes. Also, don’t forget to use media queries to fine-tune layouts for specific breakpoints.

Lastly, ensure you’re using a responsive meta viewport tag in your HTML head:

3

hey mike, sounds frustrating! have u tried using ‘background-image’ instead of an tag? something like:

.hero {
background-image: url(‘your-image.jpg’);
background-size: cover;
background-position: center;
height: 100vh;
}

this might solve ur scaling issues. lmk if it helps!