Responsive oval div

HTML & CSS
1

I’m trying to make a few oval div’s I’m using as buttons more responsive. Currently, when you shrink the page down, they stay the same size, but instead of being side by side, they stack. I would like the buttons to shrink down though. Is there a way to make them responsive so they will just grow or shrink with screen size?

html:

<div id="start" class="oval">
                        <br /> Mission Statement
                    </div>

css:

.oval {
    display: inline-block;
    background: linear-gradient(to bottom, #95bfe6, aliceblue);
    color: #002d62;
    border-radius: 50%;
    font-size: larger;
    border-style: solid;
    border-color: #002d62;
    border-width: 1px;
    margin-top: 12%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    height: 64%;
    width: 80%;
    line-height: 100%;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
2

Hi there ethanforbes89,

does this example help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
 
.oval {   
    position: relative;
    width: 80vw;		
    height: 40vw;
    margin: 2vw auto;
    border: 1px solid #002d62;
    border-radius: 50%;
    background: linear-gradient( to bottom,  #95bfe6, #f0f8ff );
    box-shadow: 0 0.75em 1em 0 rgba( 0, 0, 0, 0.24 ),0 1em 3em 0 rgba( 0, 0, 0, 0.19 );
    font-size: 4.3vw;	
    color: #002d62;
    text-align: center;
 }
 
.oval span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
}
</style>

</head>
<body> 
 <div class="oval">
  <span>Mission Statement</span>
 </div>

</body>
</html>

coothead

1 Like
3

Here’s another approach with three ovals in a list with anchors.

That’s what I remember from one of your recent threads.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scaling Ovals</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.oval {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.oval li {
  display: inline-block;
  width: 30%;
  margin: 1em 1%;
  padding-bottom: 10%; /*height ÷ width = aspect ratio*/
  position: relative;
}
.oval div {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  border-radius: 50%;
  border: 1px solid #002d62;
  padding: 5px 10px;
  background: linear-gradient(to bottom, #95bfe6, aliceblue);
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.oval div::before {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.oval li a {
  display: inline-block;
  width: 100%;
  border-radius: 50%;
  color: #002d62;
  font-size: 2vw;
  font-weight: 600;
  text-decoration: none;
}
.oval div:hover {
  background: lightblue
}
</style>

</head>
<body>

<ul class="oval">
  <li>
    <div><a href="#">Oval 1</a></div>
  </li>
  <li>
    <div><a href="#">Oval 2</a></div>
  </li>
  <li>
    <div><a href="#">Oval 3</a></div>
  </li>
</ul>

</body>
</html>
2 Likes
4

@ethanforbes89,
Here’s a version in flexbox that gives you more control over how the ovals scale.
You could also include some media queries for more control on smaller screens.

It also eliminates the <li> divs I used previously.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Ovals</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.oval {
  display: flex;
  flex-flow: row nowrap; /*nowrap is otional (use min-width on li with wrap)*/
  justify-content: space-evenly;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border: 1px solid;
}
.oval li {
  display: flex;
  flex: 1 1 30%;
  align-items: center;
  /*min-width: 140px; /*optional (remove if using nowrap)*/
  max-width: 300px; /*optional*/
  margin: .5em;
  border-radius: 50%;
  border: 1px solid #002d62;
  background: linear-gradient(to bottom, #95bfe6, aliceblue);
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.oval li a {
  display: block;
  width: 100%;
  padding: 3.25vw .5em;
  text-align: center;
  border-radius: 50%;
  color: #002d62;
  font-weight: 600;
  text-decoration: none;
}
.oval li a:hover {
  background: lightblue
}
</style>

</head>
<body>

<ul class="oval">
  <li><a href="#">Oval 1 Text</a></li>
  <li><a href="#">Oval 2 Longer Text</a></li>
  <li><a href="#">Oval 3 Text</a></li>
</ul>

</body>
</html>
3 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.