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!
Related
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.
I need to make a classic full screen landing page with a h1 title, a h2 sub-title and a call-to-action button to slide the content to the first div of the website. I really hope you can help me because the website should go online soon and this is the one thing that's stopping me from saying it's finished, I'll try to tell you everything so you have a better understanding on what's going on.
Here's my Fiddle: jsfiddle.net/daghene/szp7yf7h/1/
And this is an online version of the real page with the first bit of
content below it http://andreacordioli.com/macwip2
I'm using Skeleton Framework and the div containing the fullscreen image is outside the .container who's wrapping the grid, while the h1, h2 and button are inside it. Right now I have two problems:
for some reason, only in this part of the website, text bigger than a certain point exceeds the page width making the website scrollable horizontally under a certain point
I made it so the text gets smaller under the 550px mark which is where the Skeleton grid comes into play. I tested it on my Motorola Moto X which has around 1280x720 resolution and noticed if I check the website in landscape it doesn't trigger the smaller resolution text propieties and the text exceeds the width of the windo again: this happens on iPhones in Chrome tester too
What I wonder right now is: as of today, what's the best practise to make a 100% responsive landing page with such simple content that is always centered, works on all possible resolutions and device orientations withou exceeding borders and has the text always at a decent size never being too big?
For instance, the text exceeding the width is 8rem which equals to 80px in Skeleton. Here's the page I'm trying to achieve, which I'll need to serve a different image for on mobile when aspect ratio is X:Y where Y gets bigger than X somehow:
If you try it it kinda works and I even tested it on my old, first Samsung Galaxy Tab which has the super old Android 2 or 3 browser which gives me more problems than IE but actually centers everything correctly with this code...but the main issue is that the text isn't scaling properly and if the window is too narrow it either disappears on the right, making the window scrollable on the right and part of the big title unreadable, or if it gets too small(say my 1280x720 4,7" Moto X) the call to action button disappears since the screen window is too short and there's the browser bar too. I put overflow: hidden to this windows to be sure there's no horizontal scroll but the real problem is not the scroll, it's the text exceeding the div instead of getting smaller.
LAST NOTES!
If you check the css there's a "-1rem margin" on the H1 because as I
said for some reason in this specific section the H1, and just that,
doesn't center. The H2 and Button are centered, the H1 is not and
only here...don't get why.
If you try to make the window horizontally smaller you can see the text touches the window on the right side first(both in the Fiddle and in the other link where there's no html and body margins), still can't get why and I feel that's what's preventing the text to stay centered while getting smaller.
It looks to me that some of the problems you describe are because at viewport 550px wide, your h1 font jumps in size from 5rem to 8rem. But at this viewport size there isn't enough horizontal space to hold your h1 text and so it exceeds the width of its parent div, and hence appears to be off-centre.
I think a solution would be to tweak your CSS in http://andreacordioli.com/macwip2/css/includes.css starting around line 1047 to something like the following:
#media (max-width: 625px) {
.bigImage h1 {
font-size: 5rem;
}
...
}
Hope this helps!
We are working to make one of our responsive sites more accessible, but are struggling to get our heads around ARIA as it seems to go against the core principle of separating design elements from the HTML.
For example if an element is hidden in aria one would indicate it as aria-hidden="true". However most visibility is determined by media queries depending on screen size etc.
In other cases elements work completely different based on media queries. So at some sizes aria-haspopup="true" would be appropriate while on other resolutions the navigation is always visible.
Am I missing something, or are we at font tags all over again with this standard? Are we supposed to add / remove aria tags using javascript as appropriate?
Actually Kenneth, your question makes a lot of sense, and, yes - tooling for responsive sites is not ideal. I don't have an answer for you, but what I have to say is too long to be a comment...
Consider the following example:
You app has a menu button that opens a side drawer using a short sliding animation. Without a11y considerations, your job is easy (lets assume the drawer is on the left and has a width of 250px):
#media ... (min-width: 1000px)
#drawer {
left: 0;
}
#media ... (max-width: 999px)
#drawer {
left: -250px;
}
#drawer.opened {
left: 0;
}
(Not an exact syntax, add your own wizardy for the sliding animation)
To make this accessible, you'd have to do one of the following:
option 1
Don't use aria-hidden='true'. It's generally enough to hide the drawer using visibility:hidden or display:none. Of course, now you need to wait for the end of the sliding out animation to hide the drawer (or you
lose the animation).
option 2
Use aria-hidden='true'. You'll have to catch window resize and add / remove aria-hidden='true' when switching sizes (you lose the media query magic).
To sum things up, you're right. There's definitely room for improvement. This is especially true, considering the general shift to move stuff off of JS to keep things 60fps smooth.
You have to use the window.matchMedia function
For instance:
var mm = window.matchMedia("(min-width: 600px)");
mm.addListener(updateAriaHidden);
updateAriaHidden(mm);
var updateAriaHidden= function (obj) {
if (obj.matches) {
// set aria-hidden true/false when width >= 600px
}
else {
// set aria-hidden true/false when width < 600px
}
}
Using jQuery for instance, you can use the :hidden selector with a custom CSS class to set the aria-hidden attribute dynamically:
$(".toggleable:hidden').attr('aria-hidden', true);
$(".toggleable:visible').attr('aria-hidden', false);
The use of the custom class make it easy to match the elements which would change based on your media queries
There are 2 pages, that some part of the code is repeated, to this part of code, I apply this CSS:
#media (max-width: 767px) {
.sliderContent {
width: 100%;
}
}
When I check one page on an iPhone, it loads this CSS, but the other does not use this style.
I have added an alert with the screen size in both pages, and both have the same width.
Do you know where the max-width is taken? that could be making the difference between the two pages?
Can the HTML somehow affect the size of the min-width?
Max width is the width of the viewport in css pixels. What that declaration is saying is that when the viewport is less than 767px width, apply the .sliderContent style.
The reason it applys to the iPhone is that the reported width is less than 767px. If you were to open the page in question in a newer browser (IE9+, Chrome, Firefox, etc), and resize the window below 767px you'll see the same result.
https://hacks.mozilla.org/2013/09/css-length-explained/
I have a responsive wordpress theme and have designed an image with a image mapped active area which when clicks reveals a content div.
When re-sizing window the active area moves (of course) as the image size and position is different. I have tried a plugin http://wordpress.org/extend/plugins/responsive-image-maps/ but this doesn't seem to work unless I am failing to interpret what I am supposed to do.
Below is the html and javascript call
<map name="circle"><area shape="circle" coords="58,290,53" href="javascript:unhide('welcome');"><div class="columns different sidebar right"><img class="scale-with-grid" src="../different.png" usemap="circle" /></div></a>
</map>
Any ideas where I should be putting the coords for the different media sizes? In the CSS, witihin the html calling the #media function?