Streaming live at 10am (PST)

Button not behaving correctly


#1

Hi,

I'm having issues with a button not behaving correctly, and I've tried looking at the interactions and I'm stumped!

When on the home page and one scrolls up, the arrow icon in the orange round button shrinks and moves to the right. Thoughts?

Looks fine:

Acting defunct:

Best,

Nathan

https://preview.webflow.com/preview/bluelakecreative?preview=68cfbfda25786cb12e08e263487bbcaa
http://bluelakecreative.webflow.io/


Here is my public share link: LINK
(how to access public share link)


#2

On the Service Section arrow you have 2px padding to the left ...


#3

@VladimirVitaliyevich If I make the 2 a 0, the arrow then starts on the left and then moves center when scrolling up...there is something animating it, but I've checked and found nothing.

Best,

Nathan


#4

Hello, @nathanphilsteele

Along with advice from @VladimirVitaliyevich you would want to make that icon position: relative OR set alignment: top if you want to leave icon absolute positioned.

Both ways will keep icon centered.

Cheers,
Anna


#5

Hi @sabanna @VladimirVitaliyevich,

I see now that the whole button shrinks up.

I want to say I've tried what you guys have suggested...have you made the adjustments in the read only view and saw that it completely resolved the issue? If so, maybe a screenshot or two showing exact settings?

Best,

Nathan


#6

There is some sort of code telling the button to shrink when I scroll up at a certain point...how do I go about finding it?

Best,

Nathan


#7

I deleted all the interactions in read only view and the button still shrinks, so it's none of the interactions. What could it be!?...something is only changing the size of the button, but not the arrow.

I'm also noticing that the orange "+" symbol of the Bonus is section on the Home page increases in size as well even though there is no interactions and nothing from "Transitions and Transforms" applied to it.

Thoughts?

Best,

Nathan


#8

Please don't leave me hanging :slight_smile: I'm truly curious as to what is causing the behavior.


#9

Hi @nathanphilsteele, taking a look, hang in there :slight_smile:


#10

I really appreciate it @cyberdave:blush:


#11

Hi @nathanphilsteele, thanks a lot for your patience :slight_smile: I made a little video with some suggestions:

I hope this helps!


#12

Impressive sir! Thank you! @cyberdave

As a side note, I've been more or less kind of getting a feel for css and web design through using your program. So, you guys should get some kudos for that. With that said, I'm a little frustrated at myself, because, while I was able to follow along via the video, I am more or less still scratching my head because I don't know why you did what you did...and I would like to.

Best,

Nathan


#13

Hi @nathanphilsteele, I hear ya. I am sorry that I did not go too much into detail on the "why" for that video. I sensed you had some urgency, thus the "just the facts" approach :slight_smile:

Regarding a good resource, I like @sabanna's suggestion: http://webdesign.tutsplus.com/courses/the-complete-guide-to-css-positioning


#14

Hi @nathanphilsteele. Glad to be mentioned in such a great company with @cyberdave, @sabanna and @VladimirVitaliyevich (if it's not by mistake :wink: My only advise is to look around and get an inspiration from different things surrounding you. Good luck!


#15

I can also recommend this course
http://webdesign.tutsplus.com/courses/the-complete-guide-to-css-positioning

"The Complete Guide to CSS Positioning", made completely by using Webflow. It is not a free resource, but I think the price is pretty much affordable.

Regards,
Anna


#16

Thanks @cyberdave! That's fair :grinning: Thanks for those resources!

That is very nice of you to say and much needed to hear

Have an amazing day!

Best,

Nathan


#17

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