CODEWITHSUNDEEP
css
Bob the Builder
Bob the Builder

Reputation: 175

Making clickable area of button match the button and moving arrow up to center inside

Sandbox link: https://codesandbox.io/s/vigilant-currying-h7c3r?file=/styles.css

.line and .arrow are the classes you want probably. Click create event and you see how the arrows are too low, and the clickable area is below the actual button as well as on the button. It even goes outside of the main div, which is #secondPage.

For the clickable area, I can't find anything about reducing it.

For centering text I tried this as well as a few other display: table-cell and text-align: center way. https://www.codecademy.com/forum_questions/50c29d469bc1e14c8b001f64

Upvotes: 0

Views: 675

Answers (2)

Stavros Tsompanidis
Stavros Tsompanidis

Reputation: 83

This problem occurs because your button has a fixed height, but the font-size is bigger in some screens. In order to fix this you should change your font-size and height to use the same metrics (e.g. both px,em,rem,vh etc) and make sure that the font-size will always be less than your height.

Things to remember when adjusting those two:

  1. Padding also consumes some of your height
  2. Line height must not be less than your font-size.

Upvotes: 1

Hiren Devganiya
Hiren Devganiya

Reputation: 359

Hi @secret This is happening because of the fixed height of button,

I made few changes in your CSS you can try with this one it's help you

.arrow {
    border-radius: 2vh;
    font-size: 2em;
    font-weight: bold;
    color: darkblue;
    width: 5vh;
    height: 2vh;
    line-height: 0; /* 1. Change Line Height otherwise you want to remove height */
    padding: 10px 0; /* 2. TOP - BOTTOM spacing */
    cursor: pointer; /* 3. Show cursor this is clickeble */
}

I hope It's Help You :) Thanks

Upvotes: 1

Related Questions