I'm trying to use Skeleton for my next project, but I can't really figure out whether it's as simplistic as it seems to me.
Am I right in thinking that the only thing it does out-of-the-box is stack columns on top of each other when the browser width reaches a specific breakpoint?
Is there no way to say "this column has 25% width when >800px, 50% when >600px and 100% when <=600px"?
Am I right in thinking that the only thing it does out-of-the-box is stack columns on top of each other when the browser width reaches a specific breakpoint?
it is exactly that, if you want it to have any other functionality you need to add your own css after skeleton.css has been declared.
It is a very simple css framework that is meant to be customized by the person using it.
IF you look in the css file right at the bottom you will see the following code:
/* Larger than mobile */
#media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
#media (min-width: 550px) {}
/* Larger than tablet */
#media (min-width: 750px) {}
/* Larger than desktop */
#media (min-width: 1000px) {}
/* Larger than Desktop HD */
#media (min-width: 1200px) {}
this is where you can add your custom css for the different screen sizes.
Related
I've been stuck on the following problem for a while now.
#media screen and (min-width: 414px) and (max-width: 600px) {
/* appropriate code */
}
#media screen and (min-width: 601px) and (max-width: 767px) {
/* appropriate code */
}
The issue I have is that when a screen is on the specific width of 767px, no styling is applied. What really confuses me is that on the other hand the specific width of 600px does work, while both are the max-width value of their respective media query. I have had this issue with other similar media queries but decided to simply provide you with those two to make my problem clear. I have tried out several things (verifying zoom value of browser, trying on different browser) but it doesn't seem to work. At first I thought it might be a bug but it's a recuring problem. Do any of you have an idea as to what might be the problem?
It's working correctly on my side. But for more accuracy, you can use decimal values like so.
/* 414 -> 413.7 600 -> 600.3 */
#media screen and (min-width: 413.7px) and (max-width: 600.3px) {
div {
color: red;
}
}
/* 601 -> 600.7 767 -> 767.3 */
#media screen and (min-width: 600.7px) and (max-width: 767.3px) {
div {
color: blue;
}
}
<div>Hello</div>
When min-width is used, it means the lowest width and styles are set for the higher width
When max-width is used, it means the maximum width and styles are set for the width less than that
When both are used, styles are applied when the width between the values is entered
I want to change a webpage design if device screen width is greater than 1024px for this I using #media only screen and (min-width: > 1024px){ } but it is not working .
Please tell me what is the solution .
Instead of using Demo
#meida only screen and (min-width: > 1024px){...}
use this
#media screen and (min-width:1024px) {...}
/* styles for browsers larger than 1024px; */
#media screen and (max-width:1024px) {...}
/* styles for browsers less than 1024px; */
}
The current code that you have tried to implement will do the trick, but only if you rectify the syntax errors in it.
So, instead of
#media only screen and (min-width: > 1024px){ }
you could do
#media only screen and (min-width: 1024px){
/* css rules here will apply only if the size of the screen is greater than AND equal to 1024px */
}
Note: #media query values specified for the min-width|max-width will be inclusive of the value itself as well. Meaning that if you want that a particular style apply to an element exactly when the width of the screen is greater than 1024px (and not equal to it), you should change the value to min-width: 1025px.
I'm having a bit of trouble with my media queries.
Building a site using a purchased responsive wordpress theme, and am now customising it.
I'm running into an issue where, because of how the design behaves over a range of screen widths, I am using media queries to make adjustments whenever the design breaks.
Trouble is, various elements are breaking in different ways at different widths (not surprising).
So instead of getting a nice, exclusive range of media query sizes (eg: max-width: 480px, min-width: 481px --> max-width: 780px, min-width: 781px --> max-width: 960px, minwidth 961px) it's turning into an overlapping mess of queries.
Here is a sample of what I've got in my CSS so far, with CSS removed just to save space:
#media only screen and (max-width: 961px) {
/* upto 961px */
#media only screen and (min-width: 885px) and (max-width: 961px) {
/* 885px upto 961px */
#media only screen and (min-width: 768px) and (max-width: 884px) {
/* 768px upto 884px */
#media only screen and (min-width: 480px) and (max-width: 767px) {
/* upto 767px */
#media only screen and (max-width: 550px) {
/* Shrinks top nav text size for smaller screens*/
#media only screen and (min-width: 481px) and (max-width: 550px) {
/* Adjusts search bar location*/
#media only screen and (max-width: 565px) {
/* Toggles correct Justified Image Grid for home page buttons */
#media only screen and (min-width: 566px) and (max-width: 721px) {
/* Toggles correct Justified Image Grid for home page buttons */
#media only screen and (min-width: 722px) and (max-width: 902px) {
/* Toggles correct Justified Image Grid for home page buttons */
#media only screen and (min-width: 903px) {
/* Toggles correct Justified Image Grid for home page buttons */
Pretty messy huh? Please be nice, am still learning this stuff :)
So my main problem now is: the elements I'm controlling with the last 4 media queries (targeting the Justified Image Grid) contain very simple declarations - basically making certain elements display or not. I thought I'd defined these queries fairly exclusively, but they are not working the way I expect them to.
Is the problem possibly with my mess of other queries? (Even though the Justified Image Grid are not referenced in other queries?)
More than happy to take suggestions on how to handle queries in this kind of situation, which I'd imagine happens quite frequently with web builds...
EDIT:
Here is the link to the test page: http://dev.thecyclery.net.au/home-test/
There are two image grid elements, and I only want to display one at a time.
Thanks!
Jon
one way to simplify things a bit is to remove the min-width portions of the queries that have both a min and a max. Then while using only max-width queries you order them from largest to smallest.
#media only screen and (max-width: 961px) {
}
#media only screen and (max-width: 884px) {
}
#media only screen and (max-width: 767px) {
}
These will automatically override each other when the screen gets below each respective setting.
Personally I only use the max-width settings and adjust them accordingly, hopefully you can get away with the same thing if you set it up correctly.
One reason that you may be having trouble is that if two queries have some of the same size parameters (overlapping conditions) whichever one is located last will take precedence over the other, and this might not be your intended outcome.
(Also, my personal experience with purchased wordpress themes has been less than satisfactory, you are typically better off customizing _s or one of the twenty___ themes that come with wordpress. The trouble with purchased themes is that they are usually designed with a specific intent (or specific plugins)... an intent that is almost never the same as your own intent.)
I'm trying to make my website design responsive.
So far, I've got the following rules:
#media screen and (min-width: 1000px) {
/* styles for screen width 1000px and wider */
}
#media screen and (min-width: 500px)and (max-width: 800px) {
/* styles for screen width between 500px and 800px */
}
For some reason, the last media query doesn't work. In fact, it completely strips all styles from every element on the page.
I've been looking around and I can't find any hint as to why this is or what I'm doing wrong...
I feel like I'm missing a concept or something... Everyone's talking to me about percentages, and while I'm taking that on board, I'm not seeing how it relates to the media queries not applying the style rules.
Can anyone provide any clarity?
Thanks in advance!
You don't have a closing comment tag.
#media screen and (min-width: 1000px) {
/* styles for screen width 1000px and wider */
}
#media screen and (min-width: 500px)and (max-width: 800px) {
/* styles for screen width between 500px and 800px */
}
Nothing else wrong here.
I'm trying to make my responsive CSS styles work only on tablets and smartphones. Basically I have a style for desktop, a style for mobile: portrait and a style for mobile: landscape. I don't want the mobile styles interfering with the desktop presentation at all. I have played around with countless media queries, but the result either the mobile styles are getting displayed on the desktop, or the mobile styles are displaying only on mobile devices but with only one set of rules (non-responsive). Is there a way I can keep the two completely separate?
My code I have right now goes like this:
/* regular desktop styles */
#media only screen
and (max-device-width: 600px)
{ ... }
/* mobile only styles when the device is 0-600px in maximum width */
#media only screen
and (max-device-width: 1000px)
{ ... }
/* mobile only styles when the device is up to 1000px in maximum width */
Why not use a media query range.
I'm currently working on a responsive layout for my employer and the ranges I'm using are as follows:
You have your main desktop styles in the body of the CSS file (1024px and above) and then for specific screen sizes I'm using:
#media all and (min-width:960px) and (max-width: 1024px) {
/* put your css styles in here */
}
#media all and (min-width:801px) and (max-width: 959px) {
/* put your css styles in here */
}
#media all and (min-width:769px) and (max-width: 800px) {
/* put your css styles in here */
}
#media all and (min-width:569px) and (max-width: 768px) {
/* put your css styles in here */
}
#media all and (min-width:481px) and (max-width: 568px) {
/* put your css styles in here */
}
#media all and (min-width:321px) and (max-width: 480px) {
/* put your css styles in here */
}
#media all and (min-width:0px) and (max-width: 320px) {
/* put your css styles in here */
}
This will cover pretty much all devices being used - I would concentrate on getting the styling correct for the sizes at the end of the range (i.e. 320, 480, 568, 768, 800, 1024) as for all the others they will just be responsive to the size available.
Also, don't use px anywhere - use em's or %.
What's you've got there should be fine to work, but there is no actual "Is Mobile/Tablet" media query so you're always going to be stuck.
There are media queries for common breakpoints , but with the ever changing range of devices they're not guaranteed to work moving forwards.
The idea is that your site maintains the same brand across all sizes, so you should want the styles to cascade across the breakpoints and only update the widths and positioning to best suit that viewport.
To further the answer above, using Modernizr with a no-touch test will allow you to target touch devices which are most likely tablets and smart phones, however with the new releases of touch based screens that is not as good an option as it once was.
I had to solve a similar problem--I wanted certain styles to only apply to mobile devices in landscape mode. Essentially the fonts and line spacing looked fine in every other context, so I just needed the one exception for mobile landscape. This media query worked perfectly:
#media all and (max-width: 600px) and (orientation:landscape)
{
/* styles here */
}
Yes, this can be done via javascript feature detection ( or browser detection , e.g. Modernizr ) . Then, use yepnope.js to load required resources ( JS and/or CSS )