Troubleshooting problem with Vuetify's parallax fluid template

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',

    })

Answer №1

SUCCESSFULLY RESOLVED

adjusting the v-parallax height to occupy 100% of the viewport

<v-parallax src="https://vuetifyjs.com/static/doc-images/parallax/material2.jpg" height="100%">

while also including this in the CSS

.parallax {
   min-height: 380px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Getting started with a project using meteor.js and vue.js

As a beginner in meteor.js, I am eager to create a project using both meteor.js and vue.js. However, I am struggling to find the right method for managing files in meteor.js. Could someone please assist me by providing a demo project or video link that c ...

Uncover the HTML tag associated with specific text on a webpage with the help of selenium

<div class="searchSummary floatL"> <span>18</span> results for "gloves" </div> Can someone assist me in using Selenium to extract the 'span' tag containing '18'? I am trying to specifically retrieve the 'sp ...

Tips for decreasing the placeholder font size within a mobile media query

I'm encountering a strange issue. I successfully managed to decrease the font size of the placeholder text for my desktop design, but it's not working for my mobile phone media query. I started with the desktop version and used a max width of 480 ...

In a Heroku app deployed in production, Axios interceptors do not transfer data to the API

Continuing my journey of debugging my live application, here is part 2. In the previous installment, I was able to identify and fix the root cause of the issue that was hindering my progress. Now, as I send requests to my API deployed on Heroku using an ...

The best way to centralize the input group in bootstrap

I attempted to center align my search bar, but it stubbornly stays to the left. Here's the code I'm using: <head> <style> html { overflow: auto; } html, body, iframe { ...

Locate an original identifier using Selenium WebDriver

In search of a distinctive identifier for the "update profile picture button" on my Facebook account to utilize it in automation testing with Selenium WebDriver and Java. I attempted driver.findElement(By.className("_156p")).click();, but unfortunately, i ...

How can I align two div buttons at the top and bottom to appear on the left and right sides?

How can I change the position of two buttons from top and bottom to left and right as shown in the second image? I am utilizing Floating Vue, so the buttons will be contained within a div. Is it feasible to adjust their position accordingly? Check out th ...

Adjusting the width of row items in Angular by modifying the CSS styles

I am envisioning a horizontal bar with items that are all the same width and evenly spaced apart. They can expand vertically as needed. Check out the updated version here on StackBlitz https://i.sstatic.net/MFfXd.png Issue: I am struggling to automatica ...

Dynamically change the fill color of an SVG using styled-components

I've been attempting to target the fill property of my SVG using CSS in styled-components without any luck. Here is my SVG: <svg width="65" height="19" viewBox="0 0 65 19" fill="none" xmlns="http://www. ...

Use CSS properties to isolate and extract the logo from the Sprite image

If we have a sprite image, like the StackOverflow sprite, and CSS properties like: background-position: 0px 0px; width: 250px; height: 61px; We can use the Chunky PNG library to crop out a specific part of the sprite. However, some websites use negative ...

Interactive YouTube video in a responsive classroom environment

Hello! I have a website at bit.ly/1EfgOsM and I am trying to align the video box with a YouTube video next to an image box. The width of the image box is set to 40%, so I want the video box to also be responsive with a width of 40%. The video box is in a s ...

Executing a JavaScript function within a Vue component script

I'm working on a simple component file for submitting a form, along with a JavaScript function to handle an action: <template> <div> <div class="modal-header"> <button type="button" class="close" data-dismi ...

Prevent Bootstrap 5 input fields from automatically adjusting to the height of a CSS grid cell

Below is some Bootstrap 5 markup that I need help with. The first example is incorrect. I don't want the Bootstrap input to be the same height as the grid cell. The second example is right, but I want to achieve the same result without using a wrapp ...

Remove the "href" from Zend2 navigation functionality

When using Zend2 navigation from an array passed in Zend\Navigation\Navigation, everything works smoothly if child items are opened on parent item mouse hover. However, undesirable actions occur when they are opened on mouse click, as the user is ...

The CSS style of the Div element is not being displayed properly when embedded with JavaScript

Currently, I am working on a simple page for practice purposes. The main issue I am facing is with a div element that has a red border and a blue background. Inside the div, there is a script tag calling an external JavaScript file. Surprisingly, the JavaS ...

Displaying a 404 error page in Vue Router 4 when users refresh the page

I'm currently developing a headless WordPress theme using Vue 3. After implementing vue router, everything seems to work fine when the page is initially loaded. However, I've encountered an issue where if the user changes the route and then refr ...

revealing the hidden message on the back of the card

I have been working on creating flipping cards for my website using CSS, but I am facing an issue. Even after styling my cards as per the provided CSS code, I am unable to make them flip when I hover my mouse over them. .row { padding-top: 25px; } .c ...

Webpack referencing incorrect node_modules directory

I am currently working on a Vue client project that incorporates a Vue library project. The Vue library project also utilizes some third-party packages such as vue-material. These two projects are connected through the client project's Package.json f ...

The Angular UI Bootstrap Datepicker fails to appear on top of the Bootstrap Modal

I'm currently working on an Angular app that utilizes UI Bootstrap. Within my app, I have a modal containing a Datepicker at the bottom. However, I've encountered an issue where the Datepicker remains confined within the modal when expanded. I at ...

Having trouble getting CSS Image Hover to work correctly?

I'm having trouble implementing a hover effect that changes the color of an image to blue when it is hovered over by the mouse. I've defined a class for the images and styled it in my CSS, but the effect isn't working as intended. I've ...