0

I put this oval inside on a card. The card is responsive with small screens but the oval is not.

Here the oval is inside on a card on large screen

Here is on small screen

What I want to do is expand the oval.

Here is my CSS:

    <style scoped>
div.oval {
  position: absolute;
  right: 3.3rem;
  top: 10px;
  width: 130px;
  height: 50px;
  -moz-border-radius: 0 50% / 0 100%;
  -webkit-border-radius: 0 50% / 0 100%;
  border-radius: 150px;
  background: #5cb85c;
  border: 3px solid #555;
}
</style>

I use Vuetify V-card:

    <v-container fluid grid-list-md>
    <v-flex xs12 sm4 md4 lg2>
   <v-card>
       <v-card-title><v-icon>ev-station</v-icon><h4>Estacion</h4></v-card-title>
       <v-divider></v-divider>
       <v-list-tile>
           <v-list-tile-content>
               <div class="oval"></div>
           </v-list-tile-content>
       </v-list-tile>
       <v-list-tile>
           <v-list-tile-content></v-list-tile-content>
       </v-list-tile>
   </v-card>
    </v-flex>
</v-container>
Dane
  • 9,242
  • 5
  • 33
  • 56
Isaías Orozco Toledo
  • 1,919
  • 5
  • 19
  • 35
  • replace width by min-width and use left instead of right – Temani Afif May 07 '18 at 23:05
  • The width of your oval won't change because you are giving it a fixed width in pixels. Give it a width in percent instead and it will be responsive. – ecg8 May 08 '18 at 00:01

1 Answers1

0

Use width in percentages and keep a min-width so that it will not go beyond that limit

div.oval {
  position: absolute;
  right: 3.3rem;
  top: 10px;
  min-width: 70px;
  width: 20%;
  height: 50px;
  -moz-border-radius: 0 50% / 0 100%;
  -webkit-border-radius: 0 50% / 0 100%;
  border-radius: 150px;
  background: #5cb85c;
  border: 3px solid #555;
}
MontyGoldy
  • 739
  • 1
  • 13
  • 25