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?
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'm using CK editor plugin for strapi. The markdown module is desactivated so ck editor returns html. On the frontend i'm using react (next.js) . Everything seems to be working fine, but the resizing is not working. When I resize an image I get a <figure> tag with a inline size of the width of the resized image and classes image image_resized, however the <img> tag inside <figure> has an attribute of sizes='100vw'. the image is bleeding out of the <figure> tag and is never actually resized even though I can see the correct width is passed to <figure>
I checked the documentation but couldn't find anything , did I miss something ? Am I to do something on my frontend so the images resize correctly ?
You can just do at global styles:
img{width:100%;}
or
figure img{width: 100%;}
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'm trying to nest an iframe inside a div to fix the height of the iframe by fixing the height of the div.
My problem is the amount of the iframe that shows on a desktop browser is different from the amount that shows on a mobile browser (safari and chrome of iOS). It's like 3em on mobile does not equal 3em on desktop
Below is the div/iframe html:
<div name="iframe-div" style="height:3em; overflow:hidden; font-size:12px">
<iframe src="http://blog.mycitylives.com/2012/02/twn-links/" frameborder="0" scrolling="no" " width="90%" height="810px">
</iframe>
</div>
It's being displayed on the iframe src link above.
the 'em' unit is a relative measurement, literally referring to the width/height of the 'm' character for the font type and font size. so, i would expect the size of a mobile to naturally be smaller than a desktop. the css interal to the iframe page may be causing conflicts as well.
try using pixels or a percentage instead.
this is pretty frustrating...
basically i'm creating a menubar on a site, and have used css sprite to have a hover effect where the image changes as you hover over it. this is working fine, but i can't display multiple images inline because i have to use display:block in the css for the sprite/hover class for it to work.
here is some of the css code i have:
.x a {display:block; width:100px; height:100px; overflow:hidden;}
.x a:hover img {margin-left:-100px;}
/* ie6 needs this fix*/
.x a:hover {zoom:1;}
and then here is the code in the php file (it's part of a wordpress theme, this bit going in the header.php file):
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
note: the image used is a horizontal sprite, so two images merged into one (100x100 turned into 200x100).
this alone works fine, but then when i add something to it like:
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
<div class='x'><a href='#2' alt='#2'><img src='#2' /></a></div>
it makes it go to a new line. i thought it may be a padding issue where it's overflowing on the line, but i've tried doing just two images (total area taken up maybe 210px) and it's in a 911px container area and still goes to a new line.
i've tried using < span> tags, tables, inline-block, and several other things but still no success. at one point i got it to stay inline but then the image was placed beneath all the others, in the correct horizontal position but wrong vertical position.
the goal is to have about 8 100x100 images all in a row in the menu bar, with one spacing in between each one, in a container with width 911px. they all will be in the 'x' class so that the image changes when hovered over.
sorry for writing so much but wanted to get it clear. please help!
The divs are rendering as blocks, which is why the images aren't sitting beside eachother.
If I understand what you're trying to achieve correctly, adding a rule
.x { display: inline-block }
will do what you want.
I made a JSFiddle to try it out: http://jsfiddle.net/XZWzW/