Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature Request: Add size-specific helper classes for padding, margin and elevation

See original GitHub issue

It would be nice to have size-specific helper classes for padding, margin and elevation, something like mx-xs-0 or elevation-lg-2, so that one can create a layout where a container has margins and elevation on desktop, but on mobile it’s “full-screen” without margins.

Issue Analytics

State:
Created 6 years ago
Comments:7 (5 by maintainers)

Top GitHub Comments

2reactions

johnleidercommented, Aug 22, 2017

Awesome, I actually implemented that functionality in the new v-bottom-nav documentation !

2reactions

jacekkarczmarczykcommented, Aug 20, 2017

After merging https://github.com/vuetifyjs/vuetify/issues/974 this should be possible to do using $breakpoint:

<v-xxx :class="{'elevation-0': $breakpoint.smAndDown, 'elevation-2': $breakpoint.mdAndUp}">

Same with grid offsets, margins etc. Quite lengthy code but should work

Top Results From Across the Web

CSS Spacing helpers - Vuetify

The helper classes apply margin or padding to an element ranging from 0 to 16. Each size increment was designed to align with...

Spacing - Bootstrap

Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.

How can one fix CSS issues like padding, margin, font size ...

Padding is used to add space around an element's content. Padding is different from the margin. A content is bounded by padding which...

Margin and padding | U.S. Web Design System (USWDS)

Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology....

CSS padding property - W3Schools

Note: Padding creates extra space within an element, while margin creates extra space around an element. This property can have from one to...