Jacob
Jacob

Reputation: 111

How to prevent moving text when resizing text above it?

I have created a test page and I have a problem. I set that if I hover over sample 2, it will change it's font size.

#button:hover {
     background-color: pink;
     font-size: 15px; }

But if I hover over it, the sample 3 text moves down a little bit. How can I disable absolute moving of sample 3 ? Thanks

enter image description here

Upvotes: 2

Views: 77

Answers (1)

repzero
repzero

Reputation: 8402

if I hover over it (button), the sample 3 (assuming this is an element below button) text moves down a little bit.

Consider the following issue

  • You change the font size on hover and the entire layout including sample3 which is an html element shifts downwards. See snippet below

    #button1,#button2{
       width:100px;
    }
    #button1:hover {
      background-color: pink;
      font-size: 20px;
      position: relative;
    }
    <div id="button1">
      Option1
    </div>
    <div id="#button2">
      Option2
    </div>

    One way you can strategically prevent your layout from shifting or glitching is

  • use a min-height on the divs that you apply that hover on
  • adjust line-height a bit so that elements centers in the middle

    see snippet below

    #button1,
    #button2 {
      min-height: 45px;
      width: 100px;
      line-height:2em;
    }
    
    #button1:hover,
    #button2:hover {
      background-color: pink;
      font-size: 20px;
      position: relative;
    }
    <div id="button1">
      Option1
    </div>
    <div id="button2">
      Option2
    </div>

    Upvotes: 2

  • Related Questions