Flex children not respecting parent on live site

Hi all

Just had a site go live and have a Flexbox issue which appears to only be showing up on mobile.

Home page > the lightbox is set to Flex > Centre > Centre; position Relative; two of the children set to Absolute to have them sitting on the image, but the Play button is set to Static.

Looks fine in Webflow, but on the live site the logo and caption children are not respecting the parent and sitting at the top of the lightbox, but the play button – set to Static – does sit centred.

Looks the same on both Chrome and Safari.

Phone screenshot: using Chrome on iPhone 11 Pro Max

Webflow view:

Live site: annualnewsletter.afghanaid.org.uk

Really need this fixed ASAP. What am I missing?

Thanks
Mac


Here is my site Read-Only: [LINK][1]

hi @Mac_21 the best way to get help is to follow the forum post guide.

When posting please:

  • Required: Share your project’s Read-Only link and live site’s Published link
  • The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is IMPORTANT to share this link, as custom code (eg. javaScript) does not run in the Designer.
  • Describe issue in detail including what page, section and/or element is localized
  • Upload as many screenshots as possible or provide screencast videos to help others help you faster
  • Add a description and/or post a link to a working example of what you’re trying to achieve
  • Reply to users by tagging using the @ sign followed by their forum username like this: @forumMemberName

Thanks Stan.

Read-only link is there, and will add the published site, but where do I find the published .io link?

hi @Mac_21 here is one way how to fix it.

HI @Stan, really appreciate you taking the time to do this. Going to have a closer watch now at what you did.

Cheers
Mac

1 Like