CODEWITHSUNDEEP
cssmenucss-shapes
ynef
ynef

Reputation: 107

How to make round circle links responsive in css?

I have been struggling with this for quite some time now. Apparently using % width and height is not enough?

Right now I have fixed 100px width and height and border radius is half of it so it will make it look round. Line height is set to 100px so text would display vertically in the middle of those circles. I have no idea how to vertically center text in another way...

How do I make this menu responsive so it would become smaller as the screen size changes?

HTML:

<div id="menu">
 <ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul> 
</div>

CSS: 

#menu ul {list-style-type: none; padding: 0; margin: 0;}
#menu li {display: inline; float: left;}
#menu a {
    display: block;
    width: 100px;
    height: 100px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    border: 1px #a2a2a2 solid;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1em;
    text-align: center;
    line-height: 100px;
    margin: 5%;
}

Upvotes: 0

Views: 4483

Answers (1)

Paulie_D
Paulie_D

Reputation: 114990

If you want true 'responsiveness' you can use the vw units which are directly related to the viewport width.

Jsfiddle Demo

Support isn't bad: CanIUse.com

#menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#menu li {
  display: inline-block;
}
#menu a {
  display: block;
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
  border: 1px #a2a2a2 solid;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 4vw;
  text-align: center;
  line-height: 15vw;
  margin: 5%;
}
<div id="menu">
  <ul>
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link</a>
    </li>
  </ul>
</div>

Upvotes: 6

Related Questions