I have a top-bar on several of my websites, that is shown via iframe, however it looks awful on mobile devices, so i was wondering if i could put it inside a div and then target the div through css with display none if the screen is smaller than a certain size.
The ideal thing would be to show one iframe on desktop and another on mobile devices.
I'm thinking something like:
#media only screen and (max-device-width : 320px)
#div {display:none;}
I have absolutely no idea of how to display an iframe with a different source, which is what would be the ideal solution for me.
Hope you guys can help me
#media handheld and (max-device-width : 320px)
{
#div {display:none;}
}
Check your device width too and use the same in max-device-width feature.
If I understand you correctly, you want to display a different URL based on the screen width. I would suggest making two iframes, one of them on display: none and the other on display: block. And then switch their display-properties when the screen is smaller than x px.
Something like:
<style>
iframe {
width: 100%;
height: 200px;
}
#mobile-iframe {
display: none;
}
#media handheld and (max-device-width : 320px) {
#normal-iframe {
display: none;
}
#mobile-iframe {
display: block;
}
}
</style>
<iframe id="normal-iframe" src="http://test.com"></iframe>
<iframe id="mobile-iframe" src="http://test.com/help/"></iframe>
Experiment with it here: http://jsfiddle.net/zTzRA/
Related
Good afternoon, I am making a page layout using tables on HTML, but there's an issue that I'm stuck with. One of the instructions is that the images resizes according to the screen size, but I'm not allowed to use JS or CSS, only HTML. I have an idea on how to do it with CSS, but I'm not allowed to use it.
What I've tried until now is:
<td width="35%" height="10%"><img src="https://blog.udacity.com/wp-content/uploads/2020/06/HTML_Blog-scaled.jpeg" width=100% height=100%></td>
The problem is that the height in the <td> doesn't seem to change anything. The goal is that the image proportionally resizes, not getting like too thin or too large depending on the screen size.
For Mobile
#media screen and (max-width: 540px) {
img {
width: 50px;
height : 50px;
}
}
For Tablets
#media screen and (min-width: 540px) and (max-width: 780px) {
img {
width: 80px;
height : 80px;
}
}
I am trying to make a site responsive, and when it scales down, I want to cancel out the images. All my images are in HTML and I am trying to make them not show up as the screen scales down.
For this you can use media-queries.
Example:
#media screen and (max-width: 768px) {
.image-1 {
display: none;
}
}
This will not display the image when the screen size (width) is smaller than 768px.
You can learn more about media-queries here.
CSS media queries are used for this
#media only screen and (max-width: 600px) {
/* anything here will have properties mentioned here
if you want to hide all the images, use "img", else, use your specified class, such as .myImage */
img {
display: none;
}
/* OR */
.images-to-hide {
display: none;
}
}
In (max-width: 600px), you put the maximum screen width after which the styles stop working - or rather - the minimum value needed for these styles to be applied
Here's a more detailed tutorial: W3Schools.com - Media Queries
(It works on other browsers but not chrome)
I want to apply a style only when the browser size is less than 1400px
with max-width not working
#media only screen and (max-width:1400px) {
.heading-left {
left: -0.5%;
}
}
with min-width its working
#media only screen and (min-width:480px) {
.heading-left {
left: -0.5%;
}
}
But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)
Fiddle for this
https://jsfiddle.net/j4Laddtk/
Have you tried adding the viewport in?
<meta name="viewport" content="width=device-width, initial-scale=1">
Working JSFiddle
Viewport is used when rendering responsive pages and is therefore mostly used when dealing with mobile websites, but when dealing with media queries it helps tell the CSS what the actual device-width is.
Is your browser zoom-ed at different than 100% level ? If so, zoom to 100% (Ctrl+MouseWheel)
Try this method.
This will target based on device
#media screen
and (max-device-width: 1400px)
and (min-device-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
To target based on browser window area
#media screen
and (max-width: 1400px)
and (min-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
You need to place the #media queries after you declare your standard
Another thing that can happen is that you do something really stupid like:
#media only screen and (max-width: 1400) { ... }
Make sure you put the px to identify what the quantity of your max-width is.
#media only screen and (max-width: 1400px) { ... }
Not that I've ever been stuck for an hour on something so simple..
This worked for me
#media screen and (max-width: 700px) and (min-width: 400px) {
.heading-left { left: -0.5%; }
}
If you've tried everything and you're still stuck, remember that media queries need to be at the bottom because CSS is applied from top-down.
If you have
.container {
color: white;
}
and you want the font to be pink for screens less than 600px wide, your other media query needs to be below the original .container style.
.container {
color: white;
}
#media only screen and (max-width: 600px) {
.container {
color: pink;
}
}
So if your media queries are at the top the default colour of white will override the media query for pink.
This problem caused me several hours to figure it out with Bootstrap 3 when it just doesn't work. The reason is in the header of each web page, it needs this meta view element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More details https://www.w3schools.com/css/css_rwd_viewport.asp
#media only screen and (max-width: 1000px) {
/*Don't forget to add meta viewport in your html*/
}
If it's not working try to inspect elements in the browser by navigating to the network in developer tools and toggling disable cache.
Sometimes it's not working because of the browser cache.
There is one thing I would like to add here, which is only applicable if you have different CSS files. If some values do not seem to be having any effect then check if the CSS file that has the media queries is at the bottom inside the element or not. It is best to always put the media queries CSS file (if made in a different file) at the bottom of all other CSS links.
I am using a wordpress responsive theme, however I need the footer to not appear on any screen size smaller than an ipad. When viewed on an iphone 5 size screen the footer is too bulky and on some pages covers the content. In this instance it would be much neater to remove this for mobile phone size screens. Is there a CSS command, or any alternate method, to remove the footer below a certain screen size?
Many thanks in advance, Phil
I would say :
#media (min-width: 0px) and (max-width: 480px){
#footer {
display : none;
visibility : hidden;
}
}
Or shorter :
#media (max-width: 480px){
#footer {
display : none;
visibility : hidden;
}
}
A CSS media query should work
#media only screen and (max-width: enter breakpoint) {
#footer {
display: none;
}
}
I'm trying to do a CSS for just my desktop, therefore i used the media query like below to link my css with my desktop.
My desktop resolution is 1440 x 900. Hence, my media query css for desktop is like this below
#media (max-width: 1440px) {
#loginpage {
position:relative;
margin-top:15%;
}
#headerbodyadmin {
position:relative;
margin-top:20%;
}
}
I tried used this method as well.
#media only screen and (max-width : 1440px){
}
Unfortunately, it's not working. I checked the various media query tutorial and this seems to be the correct way to implement css for my desktop resolution 1440x900.
May i know did i do anything wrong here?
Try adding one pixel to your max-width , #media (max-width: 1441px)
I checked the code and it working fine, make sure that you referenced id's in html page also.
Check this URL : http://jsfiddle.net/Ravichand/8kznk/
#media (max-width: 1440px) {
#loginpage {
position:relative;
margin-top:15%;
color:red;
}
#headerbodyadmin {
position:relative;
margin-top:20%;
color:skyblue;
}
}
I checked that and it works, here you can find example
http://jsfiddle.net/7VVsA/
#media (max-width: 1440px) {
#loginpage {
position:relative;
margin-top:15%;
background:red;
}
#headerbodyadmin {
position:relative;
margin-top:20%;
background:yellow;
}
}
Solution 01: Instead of max width. you can use min-width
Like
/*Sizes above 1024*/
#media (min-width: 1024px) {
}
Solution 02: Or you can try adding +1 to your width
Like
/*width 1441 to avoid any other conflict */
#media (max-width: 1441px) {
}
The width and height attribute describes the length for the view port and not the device screen resolution as device-width and device-height. If you use the width attribute it is possible that the considered value is smaller then your screen resolution width, because there is a border around the window or a scroll bar. Browsers on mobile devices usually utilize the entire width of the screen, so you don't see this effect there. Here what MDN says to the width attribute:
The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).
So if you want to trigger the styles if your device has a width resolution of 1440px I would use it like this:
#media (max-device-width: 1440px) {
/* your style */
}
You can read more about this in the MDN documentation. Maybe this question is also interesting.