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
Post a Comment