Streaming live at 10am (PST)

Have pity on me - I need help with my first WF site, I hate CSS but love WF


#1

I have to say, while I love the ability to now design websites with Webflow, CSS is an absolute dog. The last time I coded was in Tables not Divs. So I have been out the loop in the online medium.

But seriously, I constantly fail to understand the logic behind how CSS rules work. There seems to be little consistency. Sometimes CSS works as expected and then I apply exactly the same method I have learnt to another layout and it's like relearning all over again. The amount of times I have pressed Block, then inline block, the absolute positioning, then centre align text (for an image!) and alike, I just can't tell you. Scaling, positioning and percentages (%) are again equally frustrating, and I have to do this 4 times for various devices! Seriously, anyone hand coding CSS has my utmost respect.

Anyway, I digress and really would love some advice on the following web site I have completed.
My interactions are all working but not the first time the site has loaded. If I rescroll over the areas that have interactions then they all work, but on initial viewing they don't. Have a look at this and tell me what I am doing so blatantly wrong.
I thank you.

Preview
https://preview.webflow.com/preview/mh3?preview=002e6ce0ec7c8c9ca12a4de37fb138ca

Live
http://mh3.webflow.io/


#2

I could be wrong, but I think it might be because you don't have an initial appearance set on an object, such as the Badge Popup with the Fade In interaction effect applied to it. Try zeroing the opacity as the initial appearance and I think that should work, the first time the site loads.

On another topic entirely, I think the move of your badger from off page right is causing the size of the page to be larger than the browser window. Again, I could be wrong but about this, but perhaps a staff member could jump in and explain how to fix that. I've attached a screenshot to show you what I mean. When attempting to scroll on a laptop via the trackpad, the page inadvertently, sometimes, moves horizontally, revealing this white space on the side.


#3

Hey @BUMPandHUSTLE

From what I can tell all you need to do is to set an initial appearance on those interactions.
If you need more instruction let me know.

Alex


#4

Yep - initial appearance seems to have solved the problem, although my transitions are a little off now I have set the opacity to none, I will try a different initial appearance for some of the elements to see if that makes a little more elegant solution.

Thank you both. Will be back for more!
Best
Bump n Hustle


#5

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