I want to get the screen width as a variable for a simple if statement. Basically if the screen is > 768 it will display the normal website. If it's < 768 than it displays a more compact version. It's just a little fix for ipad resolution. I already know how to update the webpage once i get the info, just how do I get the values in the first place?
use javascript..
there is a property called
.screenwidth()
here is a link:
http://www.w3schools.com/jsref/prop_screen_width.asp
You could use CSS media queries:
#media all and (max-width: 768px) {
body {
background: #ccc;
}
}
Further reading:
http://css-tricks.com/css-media-queries/
You need CSS3 media queries
http://www.w3.org/TR/css3-mediaqueries/
http://webdesignerwall.com/tutorials/css3-media-queries
/* Any CSS for bigger screens / default CSS goes outside the brackets */
div {
/*here*/
}
p {
/*or here*/
}
#media screen and (max-width: 768px) {
/*css specific to small screens under 768px width here*/
div {
/*here*/
}
p {
/*or here*/
}
}
Related
Look at this page
There are 3 images on the right. When I look at my site with a mobile device, those 3 images stay there instead of centering in the middle, and so they make the page overflow/have a left-right scroll.
Any ideas on how I can fix it so that the images get centered when the page is viewed on mobile?
Thank you
Use a CSS media Query
The code used in the example you gave is
#media (max-width: 600px)
.about-us-images {
width: 100% !important;
}
The #media (max-width: 600px) part is telling the page to only apply those styles when a page width is 600px or less.
Adjust it to Your Preferences
You can adjust that to any size you wish or use the reverse to style any page that is 600px or wider using: #media (min-width: 600px).
Try this—
#media (max-width:600px) {
.about-us-text,
.about-us-images { width:100% }
}
Just add a class to the images div, and change the breakpoint as you wish. Looks like this now—
Here is what I had to do.
#media (max-width:600px) {
.about-us-text {
float: none !important;
width:100% !important;
}
}
#media (max-width:600px) {
.about-us-images {
width: 100% !important;
}
}
That did it.
I'm making a menu like this (jsfiddle), and I want to improve this like (when resizing the window):
If nav do not have any blank on right side, then omit the left side
A ...ohime sama > Ki ga tsuite ne ne > Mataseru nante rongai yo B
A ...suite ne ne > Mataseru nante rongai yo B
but do not omit #currentstage
A ...> Mataseru nante rongai yo B
A ...> Mataseru nante rong (with horizontal scrollbar)
Can I make this HTML+CSS only?
EDIT: I mean, this (jsfiddle) without Javascript. And though each of a.button's width is fixed, nav's width isn't. Its html is changable. So (I guess) media query won't be a good choice.
Use media queries in css identify the points at which the element has no space to show on the devise and specify what to do accordingly when such a width occurs below is an example of the common devise widths found and queried accordingly.
/* Large desktop */
#media (min-width: 1200px) { /*put your css code here*/
#stage1{
}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
DEMO
This can be done using css3 media queries. read more about it here: Mozilla MDN
Here is one example how you need to do:
CSS:
#media (max-width: 480px) {
nav div {
display: none;
}
#currentstage {
display: block;
}
}
Hope you can do the same for other screen sizes
I want to change the width of a div\grid via a media query for desktop users, but can't get the style to apply.
Here is the div in Chrome dev tools:
So I want to set the width of my .ticketInforHeader div. I tried to do this, but it does not do anything:
#media screen and (min-width: 992px) {
.ticketInfoHeader {
width 30%;
}
}
Try using
#media screen and (min-width: 992px) {
.ticketInfoHeader {
width 30% !important;
}
}
I guess if you're using Bootstrap's grid the width of the columns will be defined by the already existing classes like .col-md-4
You might need to add an !important to overwrite the Bootstrap style
#media screen and (min-width: 992px) {
.ticketInfoHeader.col-md-4 {
width 30% !important;
}
}
but that doesn't look really good in the code and I feel it breaks the logic of using bootstrap's grid.
I have been trying to hide an element at a max-width of 980px using media queries but for some reason it is still displaying.
If I use a media query with min-width the element disappears but with this code it is still showing and I can figure out why?
#media (max-width: 980px) {
.welcome-msg {
display:none;
}
}
Can anyone see anything wrong with my code? I'm using FF responsive design view fro testing at the moment.
With your current max-widthmedia query, display:none is going to apply until the document reaches a width of 980px, rather than at 980px.
From your question, it seems like you want the opposite to happen, which is why you've had success with min-width. Switching from max-width to min-width should solve things.
Otherwise, you are going to have to set your element to display: none in your non-media query css, and use display:block in your max-width media query.
CSS
/* Only applies while screen is 980px or less */
#media (max-width: 980px) {
.welcome-msg {
display:none;
}
}
/* only applies while screen is 980px or greater */
#media (min-width: 980px) {
.welcome-msg {
display:none;
}
}
/* if you must use max-width, this is a solution */
/* otherwise, use min-width IMHO */
.welcome-msg {
display:none;
}
#media (max-width:980px) {
.welcome-msg {
display:block; /* element will only show up if width is less than or equal to 980px */
}
}
If that's not what you are trying to accomplish, It would be helpful to have a Codepen example for us to better answer your question.
Good luck!
new to css3 media queries and responsive design.
I would like to know how to show something (say a div) on small screens only but not on large screens.
I've tried something like:
#media (max-width: 480px) {
.show-on-small-only{ display:block; visibility:visible;}
}
...
and anything larger has eg:
#media (max-width: 768px) {
.show-on-small-only{ display:hidden; visibility:none;}
}
it doesn't seem to work as intended.
might be worth pointing out that i'm using bootstrap 2.0
It's a better practice to make all your default style mobile-friendly and then use min- media queries to size up:
div { /*put whatever your default styles are first*/ }
/* Then use the media query to hide it at 481 and wider */
#media all and (min-width:481px) {
div { display:none }
}
Look at 320andup and Skeleton and the CSS of this page for examples. Look at the helper classes towards the bottom of this CSS for differences between invisible/hidden etc.
You can put this first
/* for small screens, only execute in if statement */
#media only screen and (min-width : 320px) and (max-width : 768px) {
.smallOnly {
visibility:visible!important;
display:block!important;
}}
Then at the bottom of it put it for large screens (always execute since not in if statement)
.smallOnly {
visibility: none;
display: none;}
The important tg makes it so that anything with important always overwrite everything else and it will be the master rule regardless of where it is in the file.