I am working on a design for a website and when you decrease the size of the page I want a specific image in the footer to disappear.
Is this even possible?
It's not only possible, but fairly simple with media queries:
#media screen and (max-width: 600px) {
.myImageClass {display:none;}
}
Yes, it is easily doable. I suggest you use CSS media queries to get the job done.
/* Normal CSS rules (always applies) */
#footer { display: none; }
/* Media query rules to override previous rules, as necessary */
#media screen and (min-width: 800px) {
#footer { display: block; }
}
This can be done either with CSS Media Queries or using Javascript. SmashingMagazine has a good article that can help you get started: http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
Related
I have a website with a fixed-width layout, and that cannot be changed easily. Its width is around 1300px, so it doesn't render well on a smaller screen.
I am looking for a solution to make the website looks good even on small screens. It should be possile, because if the user changes the browser zoom level to something like 75%, everything looks quite good. But I read that changing browser zoom level is not possible in JavaScript, and that the behaviour of this feature is not consistent across browsers.
Is there a standard solution (a library or something) to solve this problem?
You already put the tag "responsive" in your tags. This means you know that you want a responsive website.
You could create mediaqueries on specific width's and set the zoom property to a suitable value (but Firefox does not support this: http://caniuse.com/#search=zoom ; you can use transform: scale() as fallback).
EXAMPLE:
#media (max-width: 600px) {
body {
zoom: 0.75;
moz-transform: scale(0.75, 0.75);
}
}
The best solution would be to create mediaqueries on specific width's and take the effort of changing the width's of the elements. I don't see why the width can't be changed easily.
EXAMPLE:
#media (max-width: 600px) {
.myElement {
width: 600px; /* whatever, maybe 100%? */
}
}
For a start include this meta tag to your page's <head>:
<meta viewport="width=device-width, initial-scale=1.0">
The above will force the website to scale on mobile devices. But you need to do some more work using media queries
You can create different rules for different screen sizes:
#media(max-width: 768px){
/** Small Mobile Screens */
}
#media(min-width: 768px){
/** Large Mobile Screens, tablets e.t.c */
}
#media(min-width: 992px){
/** Desktops, Laptops */
}
#media(min-width: 1200px){
/** Larger Screens (Desktops, Laptops, e.t.c) */
}
You can set the width of your page to a different size in pixels for every screen
The nth-of-type is not working inside the media queries, but working outside the media queries in the same css file in IE 8.
I am using
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js" ></script>
and css:
.j-container:nth-of-type(1), .j-container:nth-of-type(3) {
background-color: #eee;
}/* It is working */
#media screen and (max-width: 480px) {
.j-container:nth-of-type(1), .j-container:nth-of-type(3) {
background-color: #ff0000;
}/* Not working */
#media screen and (max-width: 768px) {
.j-container:nth-of-type(1), .j-container:nth-of-type(3) {
background-color: #ff0000;
}/* Not working */
#media screen and (man-width: 769px) {
.j-container:nth-of-type(1), .j-container:nth-of-type(3) {
background-color: #ff0000;
}/* Not working */
IE8 doesn't support a lot of the CSS3 selectors like nth, IE8 also doesn't support media queries:
http://caniuse.com/#search=media%20queries
Also your media queries are not closed which can't help.
Your selecting the first and third of type in all your media queries so you could just use a normal class instead to change the background colour?
If you want this to work in IE8 you will need to use polyfills for both media queries and CSS3 selectors, here is a nice list for your viewing pleasure:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
I want to make my button controls resizable according to the screen sizes, like they should adjust themselves on other mobile devices as well(iPhones and iPads) .How is it possible?
Css3 has mediaqueries which allows you make screen specific styles. This is not very well supported in older IE's, that is why you always have to define an normal.
The cascading effect stays in affect, you do not need to redefine properties from normal in the mediaqueries (for example, background will be green in all scenarios)
/*normal*/
button{
width: 200px;
background: green;
}
#media only screen and (max-width: 600px) {
button{
width: 150px;
}
}
#media only screen and (max-width: 480px) {
button{
width: 100px;
}
}
This is called responsive design, the design responds to the widths. IE will do nothing, but if you are using Firefox and make the width of the browser smaller, it will hop automatically to the media styles
Well you gotta use media queries for that :
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Use percentage based sizes on your elements so that they scale automatically, or use media queries for specific window sizes, and set your element sizes accordingly.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can make them resizable by setting their width in percentage, so that they would resize according to the screen size,
.buttonclass
{
width:80%;
}
This should work..
if you want to use pixels, then make use of media queries according to various screens you need to support,
#media screen and (max-width: 480px) and (min-width: 320px) {
.buttonclass{
width:300px;
}
}
I Use This Code To Automatically Detect Users Screen Resolution And Redirect To Another Page
<script>
if (screen.width==1367 && screen.height==768)
{
window.location="http://www.yoursite.com"
}
</script>
But For Every Screen Resolution I Cant Edit The Site.
Is It Possible That I Just Make Single Page That Can Automatic Fit To Screen.
Thank-You IN Advance.
You could use CSS3 media queries rather than javascript to detect the device and load the page accordingly.
#media only screen and (max-width: 999px) {
/* rules that only apply for canvases narrower than 1000px */
}
#media only screen and (device-width: 768px) and (orientation: landscape) {
/* rules for iPad in landscape orientation */
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* iPhone, Android rules here */
}
You would also need to add the meta port view tag as below:
<meta name="viewport" content="initial-scale=1.0">
You can use media queries and specify different stylesheets for different screens.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
for example
<style>
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
For examples of already put up websites see: http://mediaqueri.es/
'defau1t' is write. Also you can set it by css like=> "width:100%"; you can check http://www.w3schools.com/js/js_window.asp too. Everything depends on your requirements.
I need to place some graphic elements in a div that is supposed to be seen on various screens with different resolutions (for example, mobile screens). Just for example, something similar to the "X" button that closes an overlay window. I might think of several options to implement it:
Have several JPEGs (one for each resolution) and select them in JavaScript
Render the graphics (it is simple) using HTML5 features
Any CSS support probably?
Anything else?
It would be great to have any kind of advice/well-known practice, so I won't reinvent the wheel.
css rule:
img {
width: 100%;
}
no?
And use #media rule:
#media only screen and (min-width: 768px) and (max-width: 991px) {
div {
width: 100px;
}
}