On my card, I have placed an oval that should be responsive on small screens but it is not.
https://i.sstatic.net/UxWBr.png
https://i.sstatic.net/S26w9.png
My goal is to make the oval expand.
This is the CSS code I am using:
<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 am using Vuetify V-card in my setup:
<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>