I have a DIV in my HTML file with WIDTH: 2500px. That div carries horizontal flow of flow chart done with POSITION:ABSOLUTE. When i give browser print, it shrinks and reduces font size. But it shouldn't shrink and shouldn't reduce font-size as well. Please give me suggestions on this or give me some work-around.
Thanks,
Dinesh
Media queries are key.
#media print{
body{
font-size:16px;
}
}
Use
font-size in %(percent like 100% or 80%)While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
or Use Media Queries
#media screen and (max-device-width : 320px)
{
body or yourdiv element
{
font:<size>px/em/cm;
}
}
#media screen and (max-device-width : 1024px)
{
body or yourdiv element
{
font:<size>px/em/cm;
}
}
Related
I have a logo in my header that's too small. I found this piece of code where I can increase the size but I only want it to apply to computer screens and not to mobile or tablet. The code is:
.site-title img {max-width:100%; height:auto}
.site-description {display:none}
I want to change the 100% to 200% but only on computer screens.
Can somebody tell me which code makes that happen?
Responsive Web Design, using media-queries:
#media screen and (min-width: 800px) {
// this css will only be used when the screen size is min 800px
}
Media Queries are used to apply CSS rules to only matching devices. Specify a max-width or min-width to apply the style rules to.
#media screen and (min-width: 720px) {
body {
background-color: skyblue;
}
}
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/
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.
I have made sure the CSS file isn't cached and that the id/class names are correct. When I shrink my browser down to a size within that range it doesn't apply the CSS.
This is the CSS code:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
{
#body2 .content
{
max-width: 690px;
}
#navWaypoint #header
{
width: 690px;
}
}
I haven't experienced this issue before.
If you are shrinking your browser windows to evaluate your code here is your answer.
min-device-width and max-device-width refers to display resolution.
While min-width and max-width refers to the size of the browser window.
Use min-width and max-width instead of min-device-width and max-device-width and hopefully you will get what you want.
I've literally wasted the entire day trying to figure this out.
When I resize my browser to anything of lesser width than 778px, the screen goes black. (any height works, just width doesn't configure)
What i would like to do is add a mobile #media setting that actually displays what I currently have!
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
any ideas what's wrong with my code? I've been rain-man'ing through my css..
Code: http://jsfiddle.net/jwrg5/
Much appreciated!
Here is a clinical example for applying media queries (Fiddle):
#media (max-width: 480px) {
body {
background: red;
}
}
#media (min-width: 481px) {
body {
background: blue;
}
}
The stylesheet functions as follows:
When your viewport is wider than 480 pixels, blue background is rendered
Narrower viewports are rendered red.
Note that there is a difference between using max-width and max-device-width. The latter gives you the maximum device width, which does not allow you to as easily test your queries by resizing your browser window.