Hiding elements in certain viewports changes their behaviour

easier seen than explained. Check the video, basically if I hide an element in other viewports it changes the behaviour and positioning of that element in the viewport where it remains visible. Basically it becomes full width despite being inline block text set to auto width.

https://vimeo.com/133461732

Hi @Mowgli, thanks for the video, Could you share the site read-only link: Share a read-only link | Webflow University

It will be easier to see what’s happening :slight_smile: Cheers, Dave

here it is. Follow what the video shows and you’ll see the problem

https://preview.webflow.com/preview/checkout-bug?preview=5a4c4e1e28070ba98a40d6ecaf8fa427

Hi @Mowgli, I did take a look at this, and I think the issue is that on mobile views, you have the float on the visa class set to float off, and also float is off on the paragraph text. The text element is wrapping to a new line and with float turned off, the text element fills the parent element, which in this case is a column.

I would make a couple of adjustments on the mobile view:

a. add float left to the Visa class:

b. Set your visibility on the “card ending mobile fix” class so that it hides at the viewport you want

c. add float left to the “card ending mobile fix” class and top margin of 10px

Try that and see if it helps to fix the design issue.

​I hope this helps. If not, please let me know – I’m happy to assist further! :slight_smile:

Cheers,
Dave

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