How can I change the width of a block holding two logo images on my "coming soon" page in Webflow to be 50% width on mobile portrait without it being left-aligned?

Published on
September 22, 2023

To change the width of a block holding two logo images on your "coming soon" page in Webflow to be 50% width on mobile portrait without it being left-aligned, you can follow these steps:

  1. Select the block that contains the two logo images by clicking on it in the Webflow Designer.
  2. In the right-hand sidebar, under the Styles tab, scroll down to the Width section.
  3. In the Width section, click on the dropdown menu to change the width property to "Percentage."
  4. Enter "50" in the input field to set the width to 50%.
  5. To center-align the block on mobile portrait, you can use a combination of Flexbox and horizontal alignment settings:
    a. In the Styles tab, scroll up to the Display section and change the display property to "Flex."
    b. Next, scroll down to the Justify section and click on the dropdown menu to change the justify-content property to "Center."
    c. Finally, go to the Position section and click on the dropdown menu to change the position property to "Relative."

Following these steps will ensure that the block holding the two logo images on your "coming soon" page in Webflow is 50% width on mobile portrait without being left-aligned.

Additional Tips:

  • You can adjust the width percentage as per your design requirements.
  • You may need to adjust the positioning and alignment settings of other elements within the block to ensure they stay centered.

Example CSS:

.block {  width: 50%;  display: flex;  justify-content: center;  position: relative;}

Additional Questions:

  1. How can I align a block to the center on mobile portrait in Webflow?
  2. What are some best practices for optimizing images in Webflow?
  3. How do I create a responsive layout in Webflow using Flexbox?