CODEWITHSUNDEEP
csshtml
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