I'm currently using vuetify 3 with nuxt 3 and I need to customize the grid-breakpoint globally in scss. I have tried different solutions propose in the documentations and nothing seems to work.
I followed the guide here https://next.vuetifyjs.com/en/features/sass-variables/ and it didn't work
// ./assets/styles/main.scss
#forward 'vuetify/settings' with (
$grid-breakpoints: (
'xs': 0,
'sm': 390px,
'md': 768px,
'lg': 1024px,
'xl': 1440px,
'xxl': 1920px,
)
);
included it in app.vue
<style lang="scss">
#use './assets/styles/main';
</style>
my expectation was to have see the view port changes occur at those breakpoints, but the default vuetify breakpoints are still applied.
<v-row>
<v-col
v-for="(category, index2) in section.categories"
:key="index2"
cols="12"
lg="4"
>
...
</v-col>
</v-row>
I expected to see 3 columns at a view width off 1025px upward, but this is the case only from 1280px
Related
I would like if it's possible get css variables from sass variable. I have the next sass variable:
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px,
);
And I'm trying to do an iteration as the next:
#each $key,$val in $breakpoints{
// Here I want to generate the css variables with a for or manually
--breakpoint-#{$key}: $val; // I tried to do something like this but it doesn't works
}
Expected output result:
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1400px;
Change your loop as below. Notice I replaced $val by #{$val}:
:root {
#each $key, $val in $grid-breakpoints {
--breakpoint-#{$key}: #{$val};
}
}
The syntax #{…} is called interpolation and it is the only way to inject dynamic values into a CSS variable (custom property). Here is a quote from the doc:
CSS custom properties, also known as CSS variables, have an unusual declaration syntax: they allow almost any text at all in their declaration values. What’s more, those values are accessible to JavaScript, so any value might potentially be relevant to the user. This includes values that would normally be parsed as SassScript.
Because of this, Sass parses custom property declarations differently than other property declarations. All tokens, including those that look like SassScript, are passed through to CSS as-is. The only exception is interpolation, which is the only way to inject dynamic values into a custom property.
$primary: red;
:root {
--primary: #{$primary}; // this one works
--primary: $primary; // this does not
}
I want to make an image have border radius only when the screen is large, otherwise I want it to have straight edges, how can I do that?
I am using Nextjs and Tailwind CSS
You just need to add the lg: or xl: prefix on whatever class you want to conditionally apply according to screen size, take a look at the docs
Here's an example code:
pages/index.js
export default function Home() {
return (
<div className="h-full w-full grid place-items-center">
<div className="w-32 h-32 bg-red-500 lg:rounded-xl"></div>
</div>
);
}
You can check the sandbox
On some mobile devices (e.g. iPhone 5/SE) the vuetify v-bottom-navigation looks as follows:
To prevent this, I want to move the buttons closer together, so that it looks like on other devices:
My approach was to pass the small prop / class but it didn't work:
<v-bottom-navigation>
<v-btn small>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<!-- ... more buttons here ... -->
</v-bottom-navigation>
You can override the padding and min width of the buttons and adjust it to your needs:
<v-bottom-navigation>
<v-btn class="my-btn" small>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<!-- ... more buttons here ... -->
</v-bottom-navigation>
.v-btn.my-btn {
min-width: 20px !important;
}
Also take a look at the component API and SASS variables
I have a laptop with 15.6'' screen and an external monitor with 23'' screen. I have a .vue component with this code:
<template>
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500">
Hello
</div>
</template>
It shows this when I view it on laptop screen:
the teal color which corresponds to the xl screen size.
The div has the same teal color when I move it to the external monitor.
However the difference between the screen sizes is significant. If both the 15.5'' and 23'' are considered to be xl, how does one achieves better responsiveness?
For instance, I have a navbar with several navbar items. When I view it on the laptop screen, I need to make the padding px-2 small to get them all to fit:
However on the 23'' screen I have space to add more padding/margin, but can't do it because the changes would affect the laptop view as well:
This is the code of the NavbarItem.vue:
<template>
<li class="flex-1 md:flex-none md:mr-3
sm:text-xs md:text-xs lg:text-xs xl:text-xs
border rounded-full">
<a class="inline-block py-2 lg:px-5 xl:px-2
text-white no-underline" href="#">
{{text}}
</a>
</li>
</template>
<script>
export default {
props: ['text']
}
</script>
I tried adding lg:px-5 but it doesn't affect anything, unless I remove xl:px-2. When there's xl:px-2, the lg class is ignored.
xl has a min-width of 1280px. Check breakpoints.
Your 15.6" and 23" both screens falls under minimum of 1280px. I recommend adding additional screen.
// tailwind.config.js
module.exports = {
theme: {
screens: {
'xxl': {'min': '1920px'}, // this is to support your 23". Make sure your 15.6" screen is less than the min px value passed here
},
}
}
Then your class="inline-block py-2 lg:px-5 xl:px-2 xxl:px-4"
Give this a try & keep me posted in the comments below. Cheers!
I need to use bootstrap 12 columns grid to get a responsive form based on the parent div's size.
As an exemple, whatever the size of the screen, the content need to see the div A's width and base the bootstrap's responsive design on that width.
My goal is to base my responsive design on the size of a modal window (in dhtmlx). If the user resize the modal window, the row should follow the rules (e.g. col-xs-12, col-sm-6, etc, but based on the size of the modal window, not the screen).
This fiddle show a modal window with some bootstrap form inside. I need the form to be responsive to the size of the modal form, not the screen size.
class="col-xs-12 col-sm-6"
As #makshh mentionned in the comment, it does not seem to be possible to do this right now. The only way I found is from another stack overflow question by #tsdexter:
$(document).ready(function(){
$('.somecontainer').on('resize',function(){
if ($('.somecontainer').width() < 640) {
$('.somecontainer').addClass('m');
} else {
$('.somecontainer').removeClass('m');
}
});
});
I just managed to make the grid system inside a modal act responsive to the modal's breakpoints in Bootstrap 4 with scss. Since the modal's max-width is responsive itself on some breakpoints, we need to generate new css on those breakpoints for that specific modal size (sm, md, lg, xl) which just overrules the Bootstrap's css media queries
Just copy/paste everything into a separate scss file, activate it and you are good to go
// This is a stripped version of the original "make-grid-columns" mixin from Bootstrap
#mixin make-modal-grid-columns($breakpoints) {
#each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
#include media-breakpoint-up($breakpoint, $breakpoints) {
#for $i from 1 through $grid-columns {
.col#{$infix}-#{$i} {
#include make-col($i, $grid-columns);
}
}
}
}
}
$breakpoint-sm: 576px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
.modal {
// Overrules all .col css inside .modal-sm to a single col
.modal-sm {
#include make-modal-grid-columns((
xs: 0
));
}
// modal-md (no specific class is also modal-md)
#include make-modal-grid-columns((
sm: $breakpoint-sm
));
.modal-lg {
#include make-modal-grid-columns((
md: $breakpoint-lg
));
}
.modal-xl {
#include make-modal-grid-columns((
md: $breakpoint-lg,
lg: $breakpoint-xl
));
}
}
FYI: it generates 350 lines of code