Figma html export messed up the layout

Developer Topics
1

I downloaded the html and CSS code for my design and when I open the html on chrome it looks perfectly fine and looks the same as the one I designed in Figma. However, there are white space on the side making the all the images doesn’t bleed properly .

This is the CSS styling for the grouped element
.element-EARTH {
box-sizing: content-box;
background-color: #000000;
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
}

.element-EARTH .div {
background-color: #000000;
overflow: hidden;
width: 1440px;
height: 8360px;
position: relative;
}

.element-EARTH .overlap {
position: absolute;
width: 1767px;
height: 1539px;
top: -278px;
left: -327px;
}

Is there something with my layout in figma or is there any quick way to fix it, thank you.

Screenshot 2024-03-04 at 22.59.30
Screenshot 2024-03-04 at 22.59.301920×950 49.8 KB

1 Like
2

This is a side effect of using “absolute layout”. You want a responsive design, so you need to use the auto layout features in Figma to signify how you want the background to behave.

Once you have it set up correctly, do a sync again and it should work correctly for you.

1 Like
3

Will try that for sure. I’ll keep them updated. Really Appreciate it :ok_hand:

1 Like
4

There’s not much of a difference , I’ve applied auto layout to all of the individual elements and the black bar is still there

1 Like
5

Hello @reszria!

Make sure to add Auto-Layout to the entire screen, starting from the container frame down to all the sections and elements within. Then, after doing so, make sure to test it by scaling the main frame horizontally to ensure it is responsive (all the elements are moving as they should).

Then you can re-sync and let us know if there are any changes! Thank you