Struggling to create a card game using Bootstrap 4 and Vue due to lack of front-end development skills. Looking to build two rows with responsive rounded images, each with a height of 25%.
Here is the component code:
<template>
<div>
<div class="row h-25">
<img src="images/retro.jpg" class="card img-fluid" alt="Responsive image">
<img src="images/retro.jpg" class="card img-fluid" alt="Responsive image">
<img src="images/retro.jpg" class="card img-fluid" alt="Responsive image">
</div>
<div class="row h-25">
<img src="images/retro.jpg" class="card img-fluid" alt="Responsive image">
<img src="images/retro.jpg" class="card img-fluid" alt="Responsive image">
<img src="images/retro.jpg" class="card img-fluid" alt="Responsive image">
</div>
</div>
</template>
This is my stylesheet:
.card {
border-radius: 10%;
}
The rounded images are not fully responsive despite trying different approaches. Seeking guidance or assistance from someone with expertise in this area.