How can I align the text in the "MEET US" section to stay fixed to the right with a 20-30px separation from the photo in Webflow?
TL;DR
- Wrap the photo and text in a horizontal flexbox container.
- Add a 20–30px left margin to the text to maintain consistent spacing from the image.
To align the text in the "MEET US" section to stay fixed to the right of a photo with a consistent 20–30px gap in Webflow, you need to control layout using flexbox or grid and apply correct spacing.
1. Use a Flexbox Container
- Wrap your image and text inside a parent div block (e.g., named
meet-us-wrapper). - Set the Display property of this wrapper to Flex, and choose Horizontal (Row) direction.
- Set Justify to Start, and Align to Center or Stretch depending on vertical needs.
2. Arrange Elements Inside
- Place the photo (image element) as the first child inside the wrapper.
- Place the text block (heading/paragraph/etc.) as the second child, to the right of the image.
3. Add Margin to Create the Gap
- Click on the text element inside the flex wrapper.
- Apply a left margin of 20px–30px to create spacing between the photo and text.
- Make sure there's no conflicting margin on the image or surrounding elements.
4. Prevent Text From Wrapping Below the Image
- Ensure the parent wrapper has enough width or is responsive.
- If necessary, set a min-width on the text block or a flex-grow: 0 to prevent it from shrinking undesirably.
5. Responsiveness Tips
- On smaller breakpoints, consider switching the flex direction to Vertical (column) so the text stacks under the image.
- Adjust the margin values for responsiveness if needed.
Summary
Wrap the photo and text inside a flexbox container, position the elements side-by-side, and add a left margin of 20–30px on the text to maintain consistent spacing from the right of the image. Adjust layout properties for tablet and mobile views as needed.