I can't get my image to touch the border of the screen

Design help General
1

Resolved !! Thanks to AJ_Dev : changing the container’s 940px max-width to 100%

Hi everyone, I need to recreate a figma template, but I have trouble recreating a part where I have 2 columns and an image that has to touch the border of the screen.

If I want to remove some padding, then the image is not centered anymore.. Thank you very much for your help !!!

Here is the template I am trying to recreate :

Figma
Figma1920×2275 330 KB

Here is my site Read-Only: https://preview.webflow.com/preview/maries-amanti-pizzeria?utm_medium=preview_link&utm_source=designer&utm_content=maries-amanti-pizzeria&preview=a6b6c0d15948ddcc5063cf08f0f0923a&workflow=preview

2

Hi there,

When using columns, they have a default 10px padding on the left and right sides. To create a layout with two columns, you have two options:

Using Flexbox:

  1. Select the container element
  2. Set the display to “Flex” in the Style panel
  3. Add two div blocks inside
  4. Set each div block’s width to 50% (or your desired percentage)
  5. To remove the default padding, set both left and right padding to 0px in the Columns element settings

Alternatively, you can:

  1. Add two div blocks inside the Columns element
  2. Set their flex child settings to “Expand” in the Style panel
  3. Adjust the padding as needed

For more information about working with columns, check out the columns element documentation.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Hey @TinyMarie,

You can set the max-width property to 100% for the ‘Container 3’ element and it should ideally give you the visual as per the design you shared. Hope this helps.

4

Thank you so much AJ_Dev !! I tried the solutions ahead but it didn’t really work. BUT changing the container to 100% max width worked !! Thank you so so much

1 Like