Tailwind is not working when I try to use different grid layouts depending on screensize. It completely ignores the code if I put it after a md:, lg: or xl: tag. This happens only when I try to change something that has to do with grid. Example:
<div class="grid grid-cols-3 md:grid-flow-col">
It only listens to grid-cols-3, applying it to every screensize despite my trying to control the layout.
I've tried REINSTALLING without anything happening. Saw another stack overflow where that was ticked as the resolution for another user. Did not work for me.
I've tried creating MANUAL CLASSES, adding media queries inside in my css file and calling that in the div, like this:
<div class="grid grid-cols-3 trying-this">
#media (min-width: 768px) { .trying-this { grid-auto-flow: column !important; } }
My version of tailwind is 3.2.1.
Does anyone have any ideas on how to solve this? I'm completely stuck.
Related
I'm a bit confused about something that is hopefully quite simple, I'm extremely new to tailwind CSS, and even after looking into documentation I was not able to find the solution myself.
I have an image that I want visible for larger screen sizes, but hidden for smaller screen sizes.
I tried adding "sm:hidden relative" classNames to an img tag, I expected it to set the img to hidden on devices smaller than 768px.
The Opposite of what I want happens, the img shows on all devices up to 768px, but none bigger
Here is the section of my tailwind.config.cjs with media query overrides;
screens: {
xs: "480px",
ss: "620px",
sm: "768px",
md: "1060px",
lg: "1200px",
xl: "1700px",
},
My Img tag is as follows;
<img src={astronaught} alt="hero-astronaught" className=" z-[5] w-[100%] h-[100%] sm:hidden relative" />
If I only have relative, without the sm:hidden, as expected, the img shows on all devices, if I add the above code, it shows on smaller devices, but not devices larger than 768px, I am extremely confused.
I thought that the way it works logically with sm:hidden relative was "on sm devices, it is hidden, otherwise, it is relative"
Inspecting via console shows that the media query is being applied as follows in full-screen mode;
#media (min-width: 768px)
<style>
.sm\:hidden {
display: none;
}
Inspecting via console during responsive mode for a mobile device, shows no media query at all being applied.
An important thing to note is that I have used these media queries throughout the website and they work fine for padding and margins etc.
Any help would be appreciated, Thanks
Edit: If switching around the order, e.g. hidden sm:visible - then the image does not show on any device. If I inspect the class, it shows that the visible tag is applying, but so is the .hidden class, setting display to none
The way that tailwind media queries work, is that e.g. doing sm:hidden says "for all screens equal or greater than sm: use hidden". So if you do lg:hidden, it counts for both lg and xl and larger, while sm counts for all sizes from sm and up.
If you want to achieve what you're describing, I'd simply do the opposite:
hidden sm:block.
This will make it show from 768px and up.
I managed to find the solution, if I switched the classes to invisible sm:visible, then it worked correctly, but I want hidden, not invisible, as they work a bit differently, and so I realised that the issue was with having relative as my "opposite" to hidden. the new classes go as follows sm:block hidden - Thanks to Sebastion for helping me to properly understand media queries in tailwind!
I have a problem with scaling leaflet map to fit mobile devices. I'm building an application using React, Leaflet(+React-Leaflet) & OpenStreetMaps.
If I'm placing component like footer or zoom control on the bottom of the screen, they appear either half or not at all, as they are hidden behind mobile devices menu.
Here's an example.
Web version
Mobile version
In this case, the zoom control component does not appear at all in the mobile version. If I change maps height property to 90vh for example, it appears again.
Mobile version with 90vh
Of course now it works, but looks ugly and isn't responsive. How can I fix this?
I have followed this example, but it doesn't seem to help.
I fixed this. In case this same problem occurs to someone else in the future, here is my solution.
When you are adding css properties to your Map component, rather than using "height: 100vh;", use "height: 100%;" like shown in this example. You should use a wrapper container set to position fixed, or absolute to get height 100% working correctly. Here is and example:
Rendering Map component
<div className="map-wrapper">
<Map/>
</div>
CSS
.map-wrapper {
width: 100%;
height: 100%;
position: fixed;
}
.map {
width: 100%;
height: 100%;
position: relative;
}
I'm familiar with Bootstrap and how to make it show/hide objects via responsive classes. However, Stencil appears to use it's own class names, and I'm unable to find reference to them. I have found some Stencil documentation, but I can't find this in it.
I'm using the theme Exhibit and found in the sidebar code that I can make an object appear in the drawer on small screens by declaring class="drawer-item drawer-extras". I can't find what is needed to make an object disappear from the sidebar, so that it is not in the drawer on small screens.
You can add css to hide or transform these items by saying something like
#media (max-width 768px) {
.drawer-item {
display: none;
}
}
For information on nesting these media queries, you can check Using multiple #media (max-width) CSS
I asked something similar before, but I guess I wasn't really clear and that's maybe why my question was voted down twice. Let me see if I can make a point here.
I'm using Nivo Slider on a website I'm working on I'm and very glad with its behavior, especially because it resizes automatically when I'm using different viewport sizes. It works great on my monitor, it works great on my smartphone and it works great on my tablet. It resizes like magic!
I've read all the code and I couldn't find how Nivo Slider does it. No media queries or viewport metatags. I'm really interested in making my website resize the way Nivo Slider does.
Would love to hear from all of you who are familiar with Nivo Slider or who might give me a helping hand.
If necessary: http://dev7studios.com/plugins/nivo-slider
I like to use it like this, to get responsive without problems:
css
#nivoSlider, #nivoSlider img{width:100%;height:auto !important}
HTML:
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="nivoSlider" class="nivoSlider">
<img src="" />
</div>
</div>
Just figured it out: it uses width:100%. I didn't realize it could be that easy.
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
left:0;
margin-top:100px;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
I am using CSS3 hover and transitions to show and hide an image. On mobile devices I would like to use the same transition for touch events.
Basically, the first touch would perform the hover effect or rollover, and the touch up would perform the roll off.
I would like to stay away from using JavaScript to do this. If there is a way to do it with pure CSS3 that would be the best option.
Use the :active pseudo-class in your css, then add ontouchstart="" and onmouseover="" to the body tag.
The following code is excerpted from my site, in which I have buttons that get smaller and glow white when hovered(on pcs) or held down(on touch devices)
<style>
.boxbutton:active{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-o-transform:scale(0.9);
transform:scale(0.9);
-webkit-box-shadow:0px 0px 20px #FFF;
-moz-box-shadow:0px 0px 20px #FFF;
-o-box-shadow:0px 0px 20px #FFF;
box-shadow:0px 0px 20px #FFF;
}
</style>
<body ontouchstart="">
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div>
</a>
</body>
The following edits are no longer relevant because I have deleted the original, incorrect instructions, but if you were here before these may still be helpful
EDIT: I have discovered it works more reliably if, rather than putting ontouchstart="" in each link, put it in the <body> tag. So your body tag should look like this<body ontouchstart=""> and your links look like this
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div></a>
EDIT 2: I have figured out that, rather than copying your CSS and use screen size queries for desktop, just add `onmouseover="" to the body tag also, so the :active pseudo class will be called by the mouse on the desktop AND by touches on mobile. You can just ignore the rambling about media queries if you do this.
If you don't want to modify your HTML code, you could try this:
<script>
document.body.addEventListener('touchstart',function(){},false);
</script>
If anyone is still having this issue in 2020 and beyond this article helped me.
My issue was that :hover effect wasn't working on iPhones in the Safari browser. I couldn't really use the JS solutions I found on other answers and resources because the elements I wanted to attach :hover to were created dynamically on fetching data from a 3rd party API. Just adding ontouchmove to the root HTML element and :hover to the appropriate element in the CSS folder fixed it. (Sorry for my English, I'm not a native speaker :p)