What is the best way to increase padding in a Vuetify view element?

I have been attempting to increase the padding of my view by utilizing the "px-5" class on the container within the view. However, I am struggling to achieve the desired amount of padding. What I am aiming for is padding similar to what is shown in this screenshot from firebase:

https://i.sstatic.net/6tnsv.png

This is how my App.Vue appears:

  <v-content>
      <div class="page-wrapper">
        <page-header></page-header>
          <router-view/>
      </div>        
  </v-content>

Within the view:

<template>
  <div id="pageTable">
    <v-container grid-list-xl fluid px-5 pt-1 mx-auto>
      <h2>Mina ordrar</h2>
      <v-layout row wrap>
     <v-flex xs12 md12 lg12>
<v-data-table
      :headers="headers"
      :items="orders"
      class="elevation-1"
    >
    </v-data-table>
        </v-flex>
    </v-layout>
     </v-container>
  </div>
</template>

Any thoughts on what might be incorrect?

The current padding on my site can be seen below:

https://i.sstatic.net/kqNsH.png

Answer №1

To center the content, utilize the mx-auto class and add a max-width to the inner container.

Expanding on @ljubadr's suggestion, consider using the justify-center class on the wrapper, then use grid columns to adjust width based on breakpoints. For instance, applying sm-12 md-8 will occupy 2/3 of the available space starting from the medium breakpoint and above, but will take up all available space on smaller screens.

Answer №2

To customize the spacing in your app, you can modify the $spacer variable before importing the styling when using stylus loaders. The default setting is 16 pixels, but changing this variable will ensure consistent spacing across all elements.

If you have different requirements, you can also adjust the $spacer-x, $spacer-y, or $spacers variables. Here are their default values:

$spacer := 16px
$spacer-x := $spacer
$spacer-y := $spacer
$spacers := {
  zero: {
    x: 0,
    y: 0
  },
  one: {
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  },
  two: {
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  },
  three: {
    x: $spacer-x,
    y: $spacer-y
  },
  four: {
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  },
  five: {
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  }
}

(source)

If adjusting the margins of vuetify components does not meet your needs, consider creating your own utility classes to go beyond m-5/p-5.

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

Pictures failing to display in their designated location

Having trouble with my social media icons on the page. They either get hidden by other divs despite having a higher z-index or appear below the top section. I want them to be positioned to the right of the church image. I've tried different approaches ...

transitioning from font-awesome v4 to the latest version, v5

For a while now, I have been utilizing a responsive template. However, I am interested in updating its fa-module from v4 to v5. By downloading the free web package, replacing "font-awesome.min.css" with "all.min.css", and adjusting all references to the ...

Unlock the Power of Vue Draggable in Vue.js 3 with These Simple Steps

When attempting to implement Draggable in Vue.js 3, I encountered an error message: VueCompilerError: v-slot can only be used on components or <template> tags. Below is a snippet of my code: <draggable tag="transiton-group" name="s ...

Utilizing the layout of nuxt-child over the parent's design

I am currently exploring the world of Nested Routes and <nuxt-child> while working with layouts in nuxt.js. The parent component is housing the <nuxt-child>, giving us a view into the subroutes of the parent. My goal is to have Nuxt utilize t ...

Anomaly with Responsive Images in Internet Explorer 7

Something unusual has come up. In the process of developing a WordPress theme, I needed it to be completely responsive. I decided to create a "gallery" consisting of rows with 3 thumbnails each, which would open in a lightbox when clicked. To achieve this ...

row-1 css classes on the top in a project built with Blazor

I'm currently working on customizing the standard layout provided in Blazor projects like WASM or server, but I'm a bit perplexed by the top-row px-4 css classes. Within the HTML code that appears to define the top row/header section is this sni ...

Transitioning from Laravel blade to Vue.js: Managing tag handling techniques

Currently, I am working on a Laravel application that utilizes blade templates. My goal is to gradually transition these templates into Vue.js, so for a period of time, I plan to use both Blade and Vue.js in my code simultaneously until the full migration ...

Extracting data from an API response using the Vue.js 3 composition API

I need assistance with destructuring the response to access results. Below is the code snippet: export default { setup() { const result = ref(null) onMounted(async () => { result.value = await axios.get('https://randomuser.me/api? ...

Tablet-friendly dropdown menu

Seeking advice on implementing @media queries for tablets with a width of 991px. Currently, the CSS file is optimized for mobile devices but needs adjustments for tablet responsiveness in the dropdown menu. I attempted the following CSS code: @media (max ...

Background image for input button in Internet Explorer 6

Can you create a custom background image for the input type="button" in Internet Explorer 6? ...

What is causing the VueJS template ref to be undefined when dealing with multiple divs

I have been working on a simple Vue component and I am trying to access the DOM element from the template. The initial component works perfectly: <template> <div ref="cool">COOL!</div> </template> <script> export ...

Is there a way to modify the scroll ion-content's color scheme?

Is there a way to change the scroll color in Ionic to green, specifically for ion-content? Any suggestions on how I can achieve this? Below is my HTML code: <ion-header> <ion-toolbar> <ion-buttons slot="start"> ...

Guide to organizing the sequence of text in HTML and CSS

Seeking guidance on reordering text and adjusting spacing on my website. Below, I have attached an image where I intend to change the sequence of text and modify the spacing accordingly. I aim to switch the order from "Resume About Work" to "Work About Re ...

How to convert table headings in Bootstrap-Vue.js

For a few nights now, I've been struggling to translate the table header in my vue.js component. It seems like I'm missing something as I'm new to Vue.js and can't seem to figure out what's wrong. Translating within the HTML works ...

Tips on finding the most budget-friendly item in a Vue array

I'm working with an array called item.warehouse_positions that contains various prices and IDs. I want to display only one item.id with the lowest price. How can I achieve this? <div v-for='(item, index) in item.warehouse_positions' :key= ...

What is the best way to target an anchor element that includes a particular word using jquery or css?

I attempted $('a[title="*"]').find('contains("PDF")').css({'background-color':'red'}); Unfortunately, this code is not working as expected. To clarify, I am searching for a specific word in the title. ...

Displaying 2 unique div elements with distinct buttons on a single blade using Laravel and VUE

Hello everyone! I have a puzzle for you: I possess one blade, but when I am given two distinct buttons: <div class="col-md-12"> <button v-on:click="isHidden = !isHidden" type="button" class="w3-btn ...

I am facing an issue where the components are not being displayed by the Vue3 router

For my latest project, I decided to use Vue3. The first project I worked on using components and routers functioned perfectly. However, I have encountered an issue with calling the Header and Router Component in my Home page. It seems to be opening another ...

Ways to change the value of a property in reverse

I have a question about Vue and whether it is possible to achieve the opposite of using props. Let me clarify further with an example. Consider the following: const app = Vue.createApp({ data: function() { return { text: "Hello" } ...

Vuelidate - The Key to Ensuring Error-Free Logic in Validation

Explore the official example of vuetify's form validation (using vuelidate) with this code snippet: <v-text-field v-model="name" :error-messages="nameErrors" :counter="10" label="Name" required @input="$v.name.$touch()" @blur="$v.nam ...