How can I align the Select-Field (clothing size selection) in the center on Safari? How can I fix the horizontal display issue with my Navigation options on Webflow?

Published on
September 22, 2023

To align the Select-Field (clothing size selection) in the center on Safari in Webflow, you can follow these steps:

  1. Select the parent element of the Select-Field in the Webflow Designer.
  2. In the Style tab, go to the Flexbox settings.
  3. Set the Justify property to Center. This will horizontally center the Select-Field within its parent element.
  4. If the Select-Field is not center-aligned vertically within its parent element, you can also set the Align property to Center. This will vertically center the Select-Field within its parent element.
  5. Preview your site in Safari to ensure that the Select-Field is now centered.

To fix the horizontal display issue with your Navigation options on Webflow, you can try the following solutions:

  1. Check if there are any custom styles or CSS that could be conflicting with the styling of your Navigation options. Inspect the elements using the browser's developer tools and look for any conflicting styles. If found, either remove or modify those styles to resolve the issue.
  2. Make sure that the Navigation options are properly structured using HTML and CSS. Ensure that each option is contained within its own list item <li> tag, which is within a <ul> container.
  3. Verify if the Navigation options have width settings that are causing them to display horizontally instead of vertically. Adjust the width properties to make sure they fit within the designated space.
  4. Double-check if there are any breakpoints or media queries that could be affecting the display of your Navigation options on different screen sizes. Adjust the styles accordingly to ensure consistent horizontal display across different devices.
  5. Test your site on different browsers to see if the issue is specific to Safari. If it is, you may need to use browser-specific CSS to target and fix the issue specifically for Safari.

Remember to preview your site and test changes on Safari and other browsers to ensure that the alignment and display issue are resolved correctly.


Additional Questions:

  1. How can I vertically align elements in Webflow?
  2. How can I create a responsive layout in Webflow?
  3. What are the best practices for optimizing SEO in Webflow?