Streaming live at 10am (PST)

Hiding elements in certain viewports changes their behaviour


#1

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.


#2

Hi @Mowgli, thanks for the video, Could you share the site read-only link: http://help.webflow.com/faq/general/how-do-i-share-my-sites-read-only-link

It will be easier to see what's happening smile Cheers, Dave


#3

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

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


#4

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! smile

Cheers,
Dave


#5

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