Hide section issue on mobile

Hello,
I am having an issue with my hero section. I designed one hero to be shown on desktop and tablet but then be hidden at mobile viewports. I then designed a second hero section that would only be shown at mobile viewports and hidden on desktop and tablet. Everything works fine, except the mobile hero section. The image should be centered within a Flex div, but it seems to completely ignore the Flexbox unless I show it on all viewports, then it is positioned correctly. Please view this video:
https://www.useloom.com/share/6b06ee6de5404510ad5fbe463d121902

@Brando Any idea as to what I am doing wrong?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

It is ignoring your display setting entirely, actually. You can’t even set it to display: none.

Hi @kbowman

This definitely looks like some buggy behavior.

I was able to reproduce this and have reported it to the team.

While we look into a fix for this, you can use the Style Panel as a workaround to create this build. Here is a quick video showing how: Screen Recording 2017-11-09...

I’ll post back here when I have more information!

Thanks again for bringing this to my attention!

1 Like

@Brando - Thanks! Wow, it looks like I keep on finding the bugs… :slight_smile: I would have posted in the “bugs” channel, but I thought maybe it was something I was doing wrong.

Hopefully, there will be a solve for this and the pesky nav “bounce” issue soon.

1 Like

@Brando
Thanks for the video that workaround works great for now, although it did reveal another issue. I have the corner logo(top left) act as a “back to top” button, which targets the hero section. Since I am hiding the hero section(that has the target id) the button does not work on mobile. Any suggestions on this problem?

Best,
Keith

Keith,

Good question!

In this case you can set the anchor point to be another element that is visible. In the past I have added a transparent 1x1 pixel div where I want the anchor point to be, then you can set the ID for this element and position the div wherever you’d like the point to be.

Hope this helps!

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.