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 photo and text in a horizontal Flex container with a 20–30px gap or margin-left on the text.  
  • Set text alignment to right and adjust layout for responsiveness on smaller screens.

To align the text in the "MEET US" section so it stays fixed to the right of a photo with a 20–30px gap, you need to adjust the layout using Webflow’s flex or grid tools.

​

1. Use a Flex Container

​

  • Wrap the image and text in a parent div block.
  • Set the parent div’s display to Flex – Horizontal.
  • Set Justify to Start and Align to Center (if vertical alignment is needed).
  • Use Gap in the Flex settings or add margin-left to the text container:
  • For 20–30px separation, either:
    • Add a Gap: 20px (in the Flex layout settings), or
    • Add Margin-Left: 20px to the text block.

​

2. Align the Text to the Right

​

  • Inside the text container, set the text alignment to Right.
  • Ensure that the text container div is only as wide as needed, or manually set its width (e.g., 40-60% depending on layout).
  • If needed, apply Padding-Right to keep content away from the edge.

​

3. Ensure Responsiveness

​

  • On smaller viewports, consider changing the parent layout to Vertical (Column) under the Flex settings, so the image stacks on top of the text.
  • Adjust margins/paddings as needed for mobile.

​

Summary

​

Wrap the photo and text in a Flex container (horizontal), apply a gap or margin-left to space them, and set the text to align right within its container. Adjust for responsiveness using Webflow’s layout overrides.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I add multiple images to a product page in Webflow's e-commerce setup? The current e-commerce pages for product collections are set up differently from what I see on the forum and University pages.
How can I use basic math to calculate and display the total time for a recipe page in Webflow CMS?
What are the uses of Webflow and its integrations with third party tools?
Does Webflow's Native Pagination have any compatibility issues with Finsweet CMS load attributes when working with embed codes targeting fields in collection lists?
Is it possible to block access to my Webflow website for certain countries using a code or third-party tool?
Why does hosting external resources on a subdomain not resolve the "Access-Control-Allow-Origin missing" error in Webflow? Is it because the Webflow site is not hosted on the same server as the subdomain and is only pointed to with an A record? Is there another solution or a way to set header policies in Webflow to address this issue?
How to adjust line height in Webflow's new UI? Need help with fixing bunched-up heading text.
Why did the checkout button disappear after connecting PayPal and enabling checkout on my Webflow website?
Does Webflow have built-in blogging capabilities for my clients who are bloggers?
Is it possible to create a text animation on Webflow, where the text appears to be deleted and written again, like in the example given?
Is there a way to identify tablets without using breakpoints in Webflow, in order to ensure hover effects and menus work properly on devices like the iPad Pro?
How can I implement chart.js into Webflow using an html embed element or a div?
How can I add a table to my Webflow blog? I have tried multiple methods like adding tags and headings, but none of them seem to work. Could someone please assist me?
How can I display form data from multiple fields on a different page in Webflow?
Can I create a div box with sharp corners in Webflow similar to the example shown?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?