css - Flex a circular hero button -


i'm working on mobile website. particular page includes giant red circular hero button. i'm struggling find way make responsive. if make 1 size, fits iphone 5 nicely, same size pushes rest of page off screen iphone 4. iphone 4 size makes terrible , small on iphone 5.

so behaviour i'm looking this:

  • the hero button should bigger in radius screen gets bigger
  • the hero button should not push other elements off screen or render wider it's container.
  • the other parts of page fixed size , layout , should stay way.

i've used flexbox similar constraints in past, doesn't seem fitting bill here. when make container of hero button flexbox, not increase in height, , have no idea how make width correspond.

how can make button expand fill available screen space?

you can use jquery this.

get screen size using $(window).height() , $(window).height() , set size of button accordingly


Comments

Popular posts from this blog

How to provide Authorization & Authentication using Asp.net, C#? -

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

How to use Authorization & Authentication in Asp.net, C#? -