I have a project that has custom "desktop", "tablet", and "mobile" breakpoints, however I have a page where I want to do a 4th one-off breakpoint. I don't want to commit it to the overall styles page just yet and I was wondering if there was a way to define the breakpoint "inline" on the className? ie something like this:
<div className="grid desktop:grid-cols-4 [1120px]:grid-col-3 tablet:grid-cols-2...
You can create a class for one-off breakpoint styling using tailwind class with #screen and #apply. The styling method could be different with different CSS preprocessor.
Example using scss:
.one-off {
#apply w-full;
#media only screen and (min-width: 1440px) {
#apply w-1/4
}
#media only screen and (min-width: 1120px) {
#apply w-2/4
}
#screen mobile {
#apply grid-cols-1;
}
#screen tablet {
#apply grid-cols-2;
}
#screen desktop {
#apply grid-cols-4;
}
}
Related
So I I am trying to style a custom wordpress theme, however the breakpoints I'm using are being applied at all screen sizes, literally just overwriting the styles I've already written. I have never had this problem before, and I have used this exact code on other, non-WordPress sites. In fact I literally copied it over from a site I made in Gatsby.
this is my _breakpoints.scss file
$breakpoints: (
"xs":0,
"sm":30rem,
"md":45rem,
"lg":60rem,
"xl":75rem,
);
#mixin xs {
#media (min-width: map-get($breakpoints, "xs")){
#content;
}
}
#mixin sm {
#media (min-width: map-get($breakpoints, "sm")){
#content;
}
}
#mixin md {
#media (min-width: map-get($breakpoints, "md")){
#content;
}
}
#mixin lg {
#media (min-width: map-get($breakpoints, "lg")){
#content;
}
}
#mixin xl {
#media (min-width: map-get($breakpoints, "xl")){
#content;
}
}
#mixin breakpoint($bp: 0) {
#media (min-width: $bp) {
#content;
}
}
and this is the element I am working on. the element should be hidden until the lg breakpoint (60rem/960px)
.hero-logo-container {
display: none;
#include lg {
display: block;
}
}
I did wonder was it something odd with flexbox, but like I said I've literally just used the exact same _breakpoints .scss on another site and it works fine. I have also thought that this may be some odd quirk of WordPress?
any help you can give me would be appreciated
I have tried hard-coding the file path to the image, in case that was the culprit (rather than using get_theme_file_uri()) but that wasn't it, other styles are just being similarly overridden.
I have recreated what has been built so far in basic HTML, with the same SCSS files and the problem is happening there.
I just can't see what I'm doing wrong...
What is the best practice for using breakpoints in CSS? I need to have a mobile breakpoint, tablet (768*1024) and desktop.
Is it with sass variables? CSS custom properties it maybe other way?
You use media queries. https://www.w3schools.com/css/css_rwd_mediaqueries.asp
For example:
#media only screen and (max-width: 600px) {
body {
background-color: #f00;
}
/* css here will take effect when the query is true */
}
This will turn the background-color of body to #f00 (red) when the width of the screen is 600px or less.
So what I discovered is that there are 2 most common ways to work with resolution breakpoints. The first one is to write the breakpoints in scss variables and then use them as literal (interpolation).
$desktop: 'screen and (min-width:1024px)';
And then use it like so:
#media #{$dektop} {
color:red;}
The second way which I prefer is to use mixins with #content
#mixin on-dektop {
#media screen and (min-width:1024px) {
#content }
}
And use it like so:
#include on-desktop{
color:red;
}
There is an excellent article at css-tricks website
https://css-tricks.com/snippets/sass/mixin-manage-breakpoints
I want to change the width of a div\grid via a media query for desktop users, but can't get the style to apply.
Here is the div in Chrome dev tools:
So I want to set the width of my .ticketInforHeader div. I tried to do this, but it does not do anything:
#media screen and (min-width: 992px) {
.ticketInfoHeader {
width 30%;
}
}
Try using
#media screen and (min-width: 992px) {
.ticketInfoHeader {
width 30% !important;
}
}
I guess if you're using Bootstrap's grid the width of the columns will be defined by the already existing classes like .col-md-4
You might need to add an !important to overwrite the Bootstrap style
#media screen and (min-width: 992px) {
.ticketInfoHeader.col-md-4 {
width 30% !important;
}
}
but that doesn't look really good in the code and I feel it breaks the logic of using bootstrap's grid.
I have a styles.css file. Now i'm going to write css - media queries for mobiles/tablet devices. In styles.css, i mentioned differnt font-sizes to diffent classes. Now i need to apply all 'font-size's to 'medium' for mobile devices. How to apply?
i have applied font-size:medium; to mediaqueries css. it is working fine. but for ex:.dynamicdata{font-size:14px;} in style.css. i need to apply replace font-size:medium to all classes which i have applied fonts-sizes for mediaqueires css.
I would do this...
#media screen and (max-width: 480px) {
/* disable webkit text size adjust (for iPhone) */
html {
-webkit-text-size-adjust: none;
}
.class1, .class2, .class3 {
font-size: 1.2em;
}
}
new to css3 media queries and responsive design.
I would like to know how to show something (say a div) on small screens only but not on large screens.
I've tried something like:
#media (max-width: 480px) {
.show-on-small-only{ display:block; visibility:visible;}
}
...
and anything larger has eg:
#media (max-width: 768px) {
.show-on-small-only{ display:hidden; visibility:none;}
}
it doesn't seem to work as intended.
might be worth pointing out that i'm using bootstrap 2.0
It's a better practice to make all your default style mobile-friendly and then use min- media queries to size up:
div { /*put whatever your default styles are first*/ }
/* Then use the media query to hide it at 481 and wider */
#media all and (min-width:481px) {
div { display:none }
}
Look at 320andup and Skeleton and the CSS of this page for examples. Look at the helper classes towards the bottom of this CSS for differences between invisible/hidden etc.
You can put this first
/* for small screens, only execute in if statement */
#media only screen and (min-width : 320px) and (max-width : 768px) {
.smallOnly {
visibility:visible!important;
display:block!important;
}}
Then at the bottom of it put it for large screens (always execute since not in if statement)
.smallOnly {
visibility: none;
display: none;}
The important tg makes it so that anything with important always overwrite everything else and it will be the master rule regardless of where it is in the file.