In my quest to implement a fluid template for responsive design viewports, I encountered an issue. The layout looks good on medium viewports (md) but fails to scale correctly on smaller viewports (sm or xs). This is because the height of the parallax background image remains fixed at 380px, causing some v-cards to be hidden.
I am seeking guidance on how to adjust the setup so that all v-cards are displayed in a column layout on smaller viewports.
HTML
<div id="app">
<v-app id="inspire">
<v-parallax src="https://vuetifyjs.com/static/doc-images/parallax/material2.jpg" height="380">
<v-layout row wrap align-center justify-center>
<v-flex xs12 sm12 md3>
<v-card class="elevation-0 rounded-card">
<v-card-title primary-title class="layout justify-center">
<h1>TITLE 1</h1>
</v-card-title>
<v-card-text>
ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus enim et justo eleifend pharetra. Nam consectetur, nulla in viverra mattis, ipsum libero faucibus odio, at eleifend mauris arcu non nibh. Aliquam congue augue sed sapien tristique, eget faucibus risus pulvinar. Nullam ut nunc felis.
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 sm12 md3 offset-md1>
<v-card class="elevation-0 rounded-card">
<v-card-title primary-title class="layout justify-center">
<h1>TITLE 2</h1>
</v-card-title>
<v-card-text>Proin felis diam, placerat ut lacinia viverra, dapibus ut sapien. Curabitur non dolor sed tortor aliquet lacinia. Maecenas ut porta velit, vel elementum sem. Quisque tincidunt vel nisl quis dignissim. Suspendisse accumsan leo sed neque sodales, in congue metus egestas. Maecenas molestie,
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 sm12 md3 offset-md1>
<v-card class="elevation-0 rounded-card">
<v-card-title primary-title class="layout justify-center">
<h1>TITLE 3</h1>
</v-card-title>
<v-card-text>
Quisque non felis massa. Suspendisse vel aliquam orci, eget aliquet est. In efficitur nisi vel massa volutpat, vitae varius velit volutpat. Duis non maximus nunc, ut tincidunt eros. Aliquam erat volutpat. Vestibulum libero justo, euismod et massa finibus, tincidunt euismod libero.
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-parallax>
</v-app>
</div>
CSS
.rounded-card {
border-radius: 50px;
}
.card__text {
font-size: 1.2em;
padding-top: 0;
padding-bottom: 3em;
}
JS
new Vue({
el: '#app',
})