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
Related
I've been tasked with developing a wordpress site for my company with almost 0 web development experience. I've been fiddling with CSS a bit and I've come up with this steaming pile of trash.
Anyways, I only need to develop it for 3 resolutions (Company standards). However, auto-scaling websites are complete magic to me. So I've decided to hardcode elements for each of 3 specific resolutions (1920x1080, 1440x900, 1024x768).
Here's the code:
768 Users
#media (min-width : 768px)
{
.sidebar
{
right: 115px;
bottom: 40px;
}
}
900 Users
#media only screen and (min-width : 900px) and (max-width: 900px)
{
.sidebar
{
right: 155px;
bottom: 65px;
}
}
1080 Users
#media only screen and (min-width : 1080px)
{
.sidebar
{
right: 155px;
bottom: 65px;
}
}
Diagram
Question:
The issue is, the hardcoded scaling I've done only works for
the /768 Users/ and the /1080 Users/.
Every change I make in the /900 Users/ section does nothing, how do I fix that?
In your code, (min-width : 900px) and (max-width: 900px) will only target a width of exactly 900px, which is not desirable.
One technique is to use a "mobile-first implementation" in which you start with the smallest size first and work your way up. Think of it as styling for the smallest viewports first and then adding to those styles for increasingly larger viewports.
For example:
/* start with smallest "mobile viewport" styles here, as a default */
#media (min-width : 768px) {
/* add styles for 768px and up */
}
#media (min-width : 900px) {
/* add styles for 900px and up */
}
#media (min-width : 1080px) {
/* add styles for 1080px and up */
}
You might find this article informative: An Introduction to Mobile-First Media Queries
#media only screen and (min-width : 900px) and (max-width: 900px) meaning from 900px to 900px.... so nowhere at all.
If I understand your problem correctly, this should work:
#media only screen and (min-width : 900px) and (max-width: 1080px)
Your going to use CSS3 media queries to essentially define each viewport you are supporting; and from within write your styles per. There a few ways to call this - but I've found the below the simplest to test starting out... You will also have to make sure your meta viewport tag from within the HTML doc is properly defined.
#media (max-width:900px) and (min-width:400px) {
.foo {
display:none;
}
}
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*/
}
}
let's say I have a grid element :
<div class="row">
<div class="span4">...</div>
<div class="span5">...</div>
</div>
When i am on a normal desktop screen .span4 and .span5 are horizontally aligned. However when the screen is smaller, let's say phone both the divs get stacked up 'vertically'
this is really great but i want to prevent this from happening on a specific div. It has enough space to keep the horizontal layout.
Note
There is always the possibility to create my own non responsive .span (.myspan2, myspan4,...) but besides is there lazy solution to that? i dont want to add 8 lines of code for one element in an entire project.
You can write media queries to specific resolution for the div to arrange your layout . Like
/* Large desktop */
#media (min-width: 1200px) { write your styles here }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { write your styles here }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { write your styles here }
/* Landscape phones and down */
#media (max-width: 480px) { write your styles here }
What should be really simple is not working at all. I just want to set a div to display none until the width is greater than 980px. However it only works while the screen is at 980px but nothing more or less than that!!
/* Should work while screen is 980px or less */
#media (max-width: 980px) {
.large-screen-hide{
display: none;
}
}
I think you need to check for both min-width and max-width.
Try
/* Should work while screen is 980px or less */
#media screen and (min-width: 1px) and (max-width: 980px) {
.large-screen-hide{
display: none;
}
}
From CSS Media Queries on the Mozilla Developer Network.
u need to set the type of media
#media screen and (max-width:980px){
.large-screen-hide {
display:none;
}
}
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.