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!
In desktop view we have a left pane and a side pane. The left pane has a great deal of content, so much so that when rendered on a mobile device the side pane is missed by users.
When rendered on a mobile device the left pane is rendered first and then the side pane is rendered after the left pane. Is there a way to change this behavior so that the side pane is rendered above the left pane when in a mobile browser?
The first element found in the skin will be the first one rendered. There is no way to change that (as far as I know).
But it could be as easy as switching two div elements in the DNN skin page.
<div id="SidePane" class="SidePane" runat="server">
<div id="LeftPane" class="LeftPane" runat="server">
instead of
<div id="LeftPane" class="LeftPane" runat="server">
<div id="SidePane" class="SidePane" runat="server">
But depending on the CSS and the HTML design of the skin this could be an easy fix or completely destroy the site design. If you bought the skin at the DNN store (or another vendor) it could be worth trying to ask the seller.
We ended up accomplishing our goal by having a separate page for mobile with a different layout. DNN then has a capability to redirect to a different page if mobile device detected.
To place one pane over the other on certain screen sizes, we use z-index.
To do this, simply change your pane z-index using css:
#media (max-width: 767px) {
.leftpane{
z-index: 2;
}
.sidepane{
z-index: 3;
}
}
Let me know if this works for you. Thanks!
I have a Web-App written in Typescript with Angular.
This displays a huge SVG element with d3js and renders many smaller SVGs on it, at least 100. It also has a header, that is a .png image. This image is not rendered in IE11, in fact, after inspecting the DOM IE removes the whole element from it.
This is my code for rendering the .png.
<img ng-controller="Ctrl as ctrl" src="images/logo.png" class="logo"
tooltip="{{'version' | translate:ctrl.version}}" tooltip-placement="bottom"/>
If you refresh the page, it shows for a second, then get's removed.
This only happens in IE, not in Firefox or Chrome.
Is there any way to remove big control window from embedded mapsengine iframe?
Lets say im embedding 640x480 iframe of mapsengine and 1/4 of the screen takes mapsengine layer controls.
<iframe src="http://mapsengine.google.com/map/view?mid=z-CXoJOwaOdI.k77h0_UeoKiw" width="640" height="480"></iframe>
Super simple solution
Set the width at 517px or smaller. The control panel will disappear ... on desktop. It will magically appear on mobile.
Slightly More Complicated Solution
The CSS
<style>
#mapsengine-box-outer {overflow: hidden;}
#mapsengine-box-inner {
overflow: hidden;
width:590px;
height:590px;
border:5px solid #998;
border-radius:10px;
}
#mapsengine {margin: -30px 0 0 -350px;}
</style>
The HTML
<div id="mapsengine-box-outer">
<div id="mapsengine-box-inner">
<iframe id="mapsengine" width="1285" height="630"
src="https://mapsengine.google.com/map/embed?mid=*******">
</iframe>
</div>
</div>
I put up a page about this (including a mobile solution) on my site Maps Engine Manipulation – Removing iframe Controls (featureListPanel) and here's a CodePen to play with.
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?