I'm about to start designing my site that I coded in php. It's a rather complex site...
Obviously, I want to make it suitable for all browsers and devices.
Should I code the CSS using fixed pixels for normal computer dimensions and when I'm done with that make another stylesheet for other devices such as iphone and ipad?
Or should I attempt to make an adaptive site that works with all resolutions? In this case, should I look into CSS frameworks? Any recommendations?
Here's some tips for designing a web page that works on ALL screen sizes. I'll delve a bit into media queries and other things too.
On web pages I've done in the past they usually have existing graphics (usually banners/headers, etc.). so I usually design the web site using a maximum width for example, if the banner image that already exists is 900px wide I'm going to make the page 900px wide, more specifically the content wrapper will be 900px wide and it's contents will sum to 100%.
Keep everything in a global content wrapper. This is the easiest way to ensure the page size stays 100% consistent.
The sum that makes up the wrapper should always amount to 100%. Fill the wrapper, but it will never go outside of it. You may have numerous columns or divisions, which you can size at any percentage up to a sum of 100. (like, col1 width="33%", col2 width="33%", col3 width="34%" = 100%)
Try to pick images that work for ALL screen sizes. There is no built-in way to swap to mobile images when working with responsive web design (there are javascript solutions), but pick an image that looks good when scaled down.
Avoid scaling an image up. This is why i tend to make the max page size the same size as a header image (if there is one). If the page has no images, 100% liquid layouts are very good too.
If the content wrapper is fixed, turn it into a percentage with a media query :D example below.
I'm going to write up a basic example of a MAX width 900px page with columns that works on any site mobile/desktop.
default-style.css
img
{
max-width: 100%;
height: auto;
width: auto; /* ie8 */
border: none;
}
.content_wrap
{
width: 900px;
margin-left: auto;
margin-right: auto;
height: auto !important;
}
/* Columns */
#column-wrap
{
float: left;
width: 100%;
}
#column-left
{
width: 30%;
float: left;
}
#column-middle
{
width: 35%;
float: left;
}
#column-right
{
width: 35%;
float: left;
}
default-queries.css
/* Turn it into a liquid layout at our max-width of 900px */
#media screen and (max-width: 900px)
{
.content_wrap
{
width: 100%;
}
}
/* most smart phones */
/* This query will turn all 3 columns into 1 column at 540px */
#media screen and (max-width: 540px)
{
#column-wrap
{
position: relative;
clear: both;
}
#column-wrap div
{
margin-bottom: 10px;
float:none; clear: both;
}
#column-left
{
width: 100%;
}
#column-middle
{
width: 100%;
}
#column-right
{
width: 100%;
}
}
Now for the html :D
index.html
<!DOCTYPE html>
<html>
<head>
<link href="default-styles.css" rel="stylesheet" />
<link href="default-queries.css" rel="stylesheet" />
</head>
<body>
<div class="content_wrap">
<div id="column-wrap">
<div id="column-left">
<p>HELLO I"M LEFT COLUMN</p>
</div>
<div id="column-middle">
<p>HELLO IM MIDDLE</p>
</div>
<div id="column-right">
<p>RIGHT</p>
</div>
</div></div>
</body>
</html>
So this is a most primitive example of a responsive web site. Using the class content_wrapper at a fixed width of 900px (because the biggest image im using may be 900px). But when the screen is smaller than 900px, we switch from fixed to liquid via media query switching to a liquid width will allow our images to scale down, our text to wrap, and a whole bunch of other great things!
But, there's more to it than that. That's all we need to do if the page only has linear content, but most pages have different columns to make the most of large screen sizes. This is where media queries REALLY come in handy. If you study the columns, their sum takes up 100% of the content_wrap at all times. And they will scale down for a small website, but they will be really really tiny. This is why I make another media query for smaller screens and eliminate the multi-column layout. Simply clearing the floats and making each column have a width of 100%, will allow for a much more efficient mobile layout.
Anyway, really long answer but hopefully my views/opinions on how to properly design a website with CSS/HTML (php, ASP.net, MVC, etc, can all be thrown in there too) will get you started! Design with a wrapper, media queries, no upscaled images, and images that look good scaled down are really good practices IMO ;)
I like fixed width pages! They are more universal and prevent over-scaled images Media queries in CSS3 take care of responsiveness ;)
I usually DON'T do mobile-first designs, but that's just my personal preference. I see no advantage to one way over the other
As stated in another answer, for non-CSS3 browsers response.js works very well
As usual, it depends. If you think your site is going to be accessed by many devices then you probably want to look at responsive design: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/ and http://www.alistapart.com/articles/responsive-web-design/ for more details.
The recommended approach is to take a 'mobile first' approach to the styling, so it works well with little markup for mobile devices and then progressively enhance for other devices with larger resolutions.
You may want to use frameworks or hand-code it - that's something of a personal choice.
If you have significantly different needs for different devices, you may want to create entirely different sites for mobile, similar to the current BBC news for instance, although it's worth noting that many sites including BBC are moving to responsive techniques, so this is a trend that is being adopted more and more.
It's also worth considering which browsers your audience will be using. As you reach back into older IE versions especially you'll need to look at javascript techniques such as the respond.js library to allow media queries to work.
The two aren't mutually distinctive.
The two approaches are generally:
Multiple stylesheets, media queries decide which one to load.
Use fluid measurements (percentages) so the site is fluid.
In reality, you often end up using a bit of both.
There are many issues with trying to do this, one particularly being that older IE doesn't support media queries, and renders everything all the time.
Frameworks are good, but you may find them restrictive. There are many around, and they all basically do the same thing, so just google Responsive CSS framework and see what you find.
I'd also recommend looking into SASS at this point - I use it so I can auto generate an IE stylesheet that has the 960px width version with no media queries, whilst generating another sheet with all the queries in.
Already been answered, I see, but I think what I've got to say is relevant...
Most sites do both a desktop site and a mobile site. Desktop sites are almost always fixed width, with a maximum width at about 1000px. This is starting to change, though, you will see more adaptive sites than in the past. Mobile sites need to have an adaptive width, because of all the crazy different resolutions on all the various phone models out there. I recommend that the smallest width the mobile site should work at is about 320px, because most modern phones are at least that width.
As for mobile detection, take a look at PHP Mobile Detect, it's what I use, and it works pretty well. You just throw in
<?PHP
if ($detect->isMobile()) {
header('Location: /path/to/mobile/site');
} else {
header('Location: /path/to/full/site');
}
?>
at the very top of the first page. You should use a seperate splash page that redirects to something like index2.htm so that users can choose to view the desktop site if they want. It saves you a lot of trouble trying to figure out how to set cookies...
I recommend making an adaptive or responsive that can maintain its look across multiple device resolutios. With that being said CSS framework will be your option so your html file is not filled with your topic content and style code.
Related
I would like to use media queries to resize elements based on the size of a div element they are in. I cannot use the screen size as the div is just used like a widget within the webpage, and its size can vary.
Yes, CSS Container Queries are what you're looking for. The CSS Containment Module is the specification that details this feature.
You can read more about the decade of work, including proposals, proofs-of-concept, discussions and other contributions by the broader web developer community here! For more details on how such a feature might work and be used, check out Miriam Suzanne's extensive explainer.
Currently only Chromium 105+ supports Container queries out of the box, though Safari 16 will include support as well. Hopefully it won't be much longer before we see a robust cross-browser implementation of such a system. It's been a grueling wait, but I'm glad that it's no longer something we simply have to accept as an insurmountable limitation of CSS due to cyclic dependencies or infinite loops or what have you (these are still a potential issue in some aspects of the proposed design, but I have faith that the CSSWG will find a way).
Media queries aren't designed to work based on elements in a page. They are designed to work based on devices or media types (hence why they are called media queries). width, height, and other dimension-based media features all refer to the dimensions of either the viewport or the device's screen in screen-based media. They cannot be used to refer to a certain element on a page.
If you need to apply styles depending on the size of a certain div element on your page, you'll have to use JavaScript to observe changes in the size of that div element instead of media queries.
Alternatively, with more modern layout techniques introduced since the original publication of this answer such as flexbox and standards such as custom properties, you may not need media or element queries after all. Djave provides an example.
I've just created a javascript shim to achieve this goal. Take a look if you want, it's a proof-of-concept, but take care: it's a early version and still needs some work.
https://github.com/marcj/css-element-queries
From a layout perspective, it is possible using modern techniques.
Its made up (I believe) by Heydon Pickering. He details the process here: http://www.heydonworks.com/article/the-flexbox-holy-albatross
Chris Coyier picks it up and works through a demo of it here: https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/
To restate the issue, below we see 3 of the same component, each made up of three orange divs labelled a, b and c.
The second two's blocks display vertically, because they are limited on horizontal room, while the top components 3 blocks are laid out horizontally.
It uses the flex-basis CSS property and CSS Variables to create this effect.
.panel{
display: flex;
flex-wrap: wrap;
border: 1px solid #f00;
$breakpoint: 600px;
--multiplier: calc( #{$breakpoint} - 100%);
.element{
min-width: 33%;
max-width: 100%;
flex-grow: 1;
flex-basis: calc( var(--multiplier) * 999 );
}
}
Demo
Heydon's article is 1000 words explaining it in detail, and I'd highly recommend reading it.
Update 2021/22
As mentioned in other answers, container queries are coming. There is a full spec for it, and its usage is detailed on MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
and there is a polyfill to get browsers that don't yet support it up to speed:
https://github.com/GoogleChromeLabs/container-query-polyfill
There is a nice little overview video of it here:
https://www.youtube.com/watch?v=gCNMyYr7F6w
This has now shipped to Chrome (05 September 2022)
https://caniuse.com/css-container-queries
A Media Query inside of an iframe can function as an element query. I've successfully implement this. The idea came from a recent post about Responsive Ads by Zurb. No Javascript!
This is currently not possible with CSS alone as #BoltClock wrote in the accepted answer, but you can work around that by using JavaScript.
I created a container query (aka element query) polyfill to solve this kind of issue. It works a bit different than other scripts, so you don’t have to edit the HTML code of your elements. All you have to do is include the script and use it in your CSS like so:
.element:container(width > 99px) {
/* If its container is at least 100px wide */
}
https://github.com/ausi/cq-prolyfill
I ran into the same problem a couple of years ago and funded the development of a plugin to help me in my work. I've released the plugin as open-source so others can benefit from it as well, and you can grab it on Github: https://github.com/eqcss/eqcss
There are a few ways we could apply different responsive styles based on what we can know about an element on the page. Here are a few element queries that the EQCSS plugin will let you write in CSS:
#element 'div' and (condition) {
$this {
/* Do something to the 'div' that meets the condition */
}
.other {
/* Also apply this CSS to .other when 'div' meets this condition */
}
}
So what conditions are supported for responsive styles with EQCSS?
Weight Queries
min-width in px
min-width in %
max-width in px
max-width in %
Height Queries
min-height in px
min-height in %
max-height in px
max-height in %
Count Queries
min-characters
max-characters
min-lines
max-lines
min-children
max-children
Special Selectors
Inside EQCSS element queries you can also use three special selectors that allow you to more specifically apply your styles:
$this (the element(s) matching the query)
$parent (the parent element(s) of the element(s) matching the query)
$root (the root element of the document, <html>)
Element queries allow you to compose your layout out of individually responsive design modules, each with a bit of 'self-awareness' of how they are being displayed on the page.
With EQCSS you can design one widget to look good from 150px wide all the way up to 1000px wide, then you can confidently drop that widget into any sidebar in any page using any template (on any site) and
The question is very vague. As BoltClock says, media queries only know the dimensions of the device. However, you can use media queries in combination with descender selectors to perform adjustments.
.wide_container { width: 50em }
.narrow_container { width: 20em }
.my_element { border: 1px solid }
#media (max-width: 30em) {
.wide_container .my_element {
color: blue;
}
.narrow_container .my_element {
color: red;
}
}
#media (max-width: 50em) {
.wide_container .my_element {
color: orange;
}
.narrow_container .my_element {
color: green;
}
}
The only other solution requires JS.
The only way I can think that you can accomplish what you want purely with css, is to use a fluid container for your widget. If your container's width is a percentage of the screen then you can use media queries to style depending on your container's width, as you will now know for each screen's dimensions what is your container's dimensions. For example, let's say you decide to make your container's 50% of the screen width. Then for a screen width of 1200px you know that your container is 600px
.myContainer {
width: 50%;
}
/* you know know that your container is 600px
* so you style accordingly
*/
#media (max-width: 1200px) {
/* your css for 600px container */
}
You can use the ResizeObserver API. It's still in it's early days so it's not supported by all browsers yet (but there's several polyfills that can help you with that).
This API allows you to attach an event listener when resizing a DOM element.
Demo 1 - Demo 2
I was also thinking of media queries, but then I found this:
http://www.mademyday.de/css-height-equals-width-with-pure-css.html
Maintain the aspect ratio of a div with CSS
Just create a wrapper <div> with a percentage value for padding-bottom, like this:
div {
width: 100%;
padding-bottom: 75%;
background:gold; /** <-- For the demo **/
}
<div></div>
It will result in a <div> with height equal to 75% of the width of its container (a 4:3 aspect ratio).
This technique can also be coupled with media queries and a bit of ad hoc knowledge about page layout for even more finer-grained control.
It's enough for my needs. Which might be enough for your needs too.
For mine I did it by setting the div's max width, hence for small widget won't get affected and the large widget is resized due to the max-width style.
// assuming your widget class is "widget"
.widget {
max-width: 100%;
height: auto;
}
I'm a novice programmer, only took one course in high school. I'm trying to make a website for my business, using c9.io to write- but can't figure out how to make my page adjust to any size. I've tried finding a solution online but can't seem to fix my problem- I'm completely stumped! Good luck and thanks!
HTML and CSS code below.
https://docs.google.com/document/d/1wl1Ui-vvB39ysCQd2B5-7Yl-gYRPdQ7hUyD_L-tDcs4/edit
Edit:
The problem has been fixed, here is the CSS code that I used:
.container4 {
width:99%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Media queries alongwith twitter bootstrap or flexbox are used to make websites responsive.
Media queries help you manage layouts for different devices say phones, tabs and desktop. Keep following in mind while writing css:-
Use ems/rems for margins/padding, avoid using pixels
2.use sass instead of pure css, its really easy to scale
I would like to use media queries to resize elements based on the size of a div element they are in. I cannot use the screen size as the div is just used like a widget within the webpage, and its size can vary.
Yes, CSS Container Queries are what you're looking for. The CSS Containment Module is the specification that details this feature.
You can read more about the decade of work, including proposals, proofs-of-concept, discussions and other contributions by the broader web developer community here! For more details on how such a feature might work and be used, check out Miriam Suzanne's extensive explainer.
Currently only Chromium 105+ supports Container queries out of the box, though Safari 16 will include support as well. Hopefully it won't be much longer before we see a robust cross-browser implementation of such a system. It's been a grueling wait, but I'm glad that it's no longer something we simply have to accept as an insurmountable limitation of CSS due to cyclic dependencies or infinite loops or what have you (these are still a potential issue in some aspects of the proposed design, but I have faith that the CSSWG will find a way).
Media queries aren't designed to work based on elements in a page. They are designed to work based on devices or media types (hence why they are called media queries). width, height, and other dimension-based media features all refer to the dimensions of either the viewport or the device's screen in screen-based media. They cannot be used to refer to a certain element on a page.
If you need to apply styles depending on the size of a certain div element on your page, you'll have to use JavaScript to observe changes in the size of that div element instead of media queries.
Alternatively, with more modern layout techniques introduced since the original publication of this answer such as flexbox and standards such as custom properties, you may not need media or element queries after all. Djave provides an example.
I've just created a javascript shim to achieve this goal. Take a look if you want, it's a proof-of-concept, but take care: it's a early version and still needs some work.
https://github.com/marcj/css-element-queries
From a layout perspective, it is possible using modern techniques.
Its made up (I believe) by Heydon Pickering. He details the process here: http://www.heydonworks.com/article/the-flexbox-holy-albatross
Chris Coyier picks it up and works through a demo of it here: https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/
To restate the issue, below we see 3 of the same component, each made up of three orange divs labelled a, b and c.
The second two's blocks display vertically, because they are limited on horizontal room, while the top components 3 blocks are laid out horizontally.
It uses the flex-basis CSS property and CSS Variables to create this effect.
.panel{
display: flex;
flex-wrap: wrap;
border: 1px solid #f00;
$breakpoint: 600px;
--multiplier: calc( #{$breakpoint} - 100%);
.element{
min-width: 33%;
max-width: 100%;
flex-grow: 1;
flex-basis: calc( var(--multiplier) * 999 );
}
}
Demo
Heydon's article is 1000 words explaining it in detail, and I'd highly recommend reading it.
Update 2021/22
As mentioned in other answers, container queries are coming. There is a full spec for it, and its usage is detailed on MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
and there is a polyfill to get browsers that don't yet support it up to speed:
https://github.com/GoogleChromeLabs/container-query-polyfill
There is a nice little overview video of it here:
https://www.youtube.com/watch?v=gCNMyYr7F6w
This has now shipped to Chrome (05 September 2022)
https://caniuse.com/css-container-queries
A Media Query inside of an iframe can function as an element query. I've successfully implement this. The idea came from a recent post about Responsive Ads by Zurb. No Javascript!
This is currently not possible with CSS alone as #BoltClock wrote in the accepted answer, but you can work around that by using JavaScript.
I created a container query (aka element query) polyfill to solve this kind of issue. It works a bit different than other scripts, so you don’t have to edit the HTML code of your elements. All you have to do is include the script and use it in your CSS like so:
.element:container(width > 99px) {
/* If its container is at least 100px wide */
}
https://github.com/ausi/cq-prolyfill
I ran into the same problem a couple of years ago and funded the development of a plugin to help me in my work. I've released the plugin as open-source so others can benefit from it as well, and you can grab it on Github: https://github.com/eqcss/eqcss
There are a few ways we could apply different responsive styles based on what we can know about an element on the page. Here are a few element queries that the EQCSS plugin will let you write in CSS:
#element 'div' and (condition) {
$this {
/* Do something to the 'div' that meets the condition */
}
.other {
/* Also apply this CSS to .other when 'div' meets this condition */
}
}
So what conditions are supported for responsive styles with EQCSS?
Weight Queries
min-width in px
min-width in %
max-width in px
max-width in %
Height Queries
min-height in px
min-height in %
max-height in px
max-height in %
Count Queries
min-characters
max-characters
min-lines
max-lines
min-children
max-children
Special Selectors
Inside EQCSS element queries you can also use three special selectors that allow you to more specifically apply your styles:
$this (the element(s) matching the query)
$parent (the parent element(s) of the element(s) matching the query)
$root (the root element of the document, <html>)
Element queries allow you to compose your layout out of individually responsive design modules, each with a bit of 'self-awareness' of how they are being displayed on the page.
With EQCSS you can design one widget to look good from 150px wide all the way up to 1000px wide, then you can confidently drop that widget into any sidebar in any page using any template (on any site) and
The question is very vague. As BoltClock says, media queries only know the dimensions of the device. However, you can use media queries in combination with descender selectors to perform adjustments.
.wide_container { width: 50em }
.narrow_container { width: 20em }
.my_element { border: 1px solid }
#media (max-width: 30em) {
.wide_container .my_element {
color: blue;
}
.narrow_container .my_element {
color: red;
}
}
#media (max-width: 50em) {
.wide_container .my_element {
color: orange;
}
.narrow_container .my_element {
color: green;
}
}
The only other solution requires JS.
The only way I can think that you can accomplish what you want purely with css, is to use a fluid container for your widget. If your container's width is a percentage of the screen then you can use media queries to style depending on your container's width, as you will now know for each screen's dimensions what is your container's dimensions. For example, let's say you decide to make your container's 50% of the screen width. Then for a screen width of 1200px you know that your container is 600px
.myContainer {
width: 50%;
}
/* you know know that your container is 600px
* so you style accordingly
*/
#media (max-width: 1200px) {
/* your css for 600px container */
}
You can use the ResizeObserver API. It's still in it's early days so it's not supported by all browsers yet (but there's several polyfills that can help you with that).
This API allows you to attach an event listener when resizing a DOM element.
Demo 1 - Demo 2
I was also thinking of media queries, but then I found this:
http://www.mademyday.de/css-height-equals-width-with-pure-css.html
Maintain the aspect ratio of a div with CSS
Just create a wrapper <div> with a percentage value for padding-bottom, like this:
div {
width: 100%;
padding-bottom: 75%;
background:gold; /** <-- For the demo **/
}
<div></div>
It will result in a <div> with height equal to 75% of the width of its container (a 4:3 aspect ratio).
This technique can also be coupled with media queries and a bit of ad hoc knowledge about page layout for even more finer-grained control.
It's enough for my needs. Which might be enough for your needs too.
For mine I did it by setting the div's max width, hence for small widget won't get affected and the large widget is resized due to the max-width style.
// assuming your widget class is "widget"
.widget {
max-width: 100%;
height: auto;
}
I would like to use media queries to resize elements based on the size of a div element they are in. I cannot use the screen size as the div is just used like a widget within the webpage, and its size can vary.
Yes, CSS Container Queries are what you're looking for. The CSS Containment Module is the specification that details this feature.
You can read more about the decade of work, including proposals, proofs-of-concept, discussions and other contributions by the broader web developer community here! For more details on how such a feature might work and be used, check out Miriam Suzanne's extensive explainer.
Currently only Chromium 105+ supports Container queries out of the box, though Safari 16 will include support as well. Hopefully it won't be much longer before we see a robust cross-browser implementation of such a system. It's been a grueling wait, but I'm glad that it's no longer something we simply have to accept as an insurmountable limitation of CSS due to cyclic dependencies or infinite loops or what have you (these are still a potential issue in some aspects of the proposed design, but I have faith that the CSSWG will find a way).
Media queries aren't designed to work based on elements in a page. They are designed to work based on devices or media types (hence why they are called media queries). width, height, and other dimension-based media features all refer to the dimensions of either the viewport or the device's screen in screen-based media. They cannot be used to refer to a certain element on a page.
If you need to apply styles depending on the size of a certain div element on your page, you'll have to use JavaScript to observe changes in the size of that div element instead of media queries.
Alternatively, with more modern layout techniques introduced since the original publication of this answer such as flexbox and standards such as custom properties, you may not need media or element queries after all. Djave provides an example.
I've just created a javascript shim to achieve this goal. Take a look if you want, it's a proof-of-concept, but take care: it's a early version and still needs some work.
https://github.com/marcj/css-element-queries
From a layout perspective, it is possible using modern techniques.
Its made up (I believe) by Heydon Pickering. He details the process here: http://www.heydonworks.com/article/the-flexbox-holy-albatross
Chris Coyier picks it up and works through a demo of it here: https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/
To restate the issue, below we see 3 of the same component, each made up of three orange divs labelled a, b and c.
The second two's blocks display vertically, because they are limited on horizontal room, while the top components 3 blocks are laid out horizontally.
It uses the flex-basis CSS property and CSS Variables to create this effect.
.panel{
display: flex;
flex-wrap: wrap;
border: 1px solid #f00;
$breakpoint: 600px;
--multiplier: calc( #{$breakpoint} - 100%);
.element{
min-width: 33%;
max-width: 100%;
flex-grow: 1;
flex-basis: calc( var(--multiplier) * 999 );
}
}
Demo
Heydon's article is 1000 words explaining it in detail, and I'd highly recommend reading it.
Update 2021/22
As mentioned in other answers, container queries are coming. There is a full spec for it, and its usage is detailed on MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
and there is a polyfill to get browsers that don't yet support it up to speed:
https://github.com/GoogleChromeLabs/container-query-polyfill
There is a nice little overview video of it here:
https://www.youtube.com/watch?v=gCNMyYr7F6w
This has now shipped to Chrome (05 September 2022)
https://caniuse.com/css-container-queries
A Media Query inside of an iframe can function as an element query. I've successfully implement this. The idea came from a recent post about Responsive Ads by Zurb. No Javascript!
This is currently not possible with CSS alone as #BoltClock wrote in the accepted answer, but you can work around that by using JavaScript.
I created a container query (aka element query) polyfill to solve this kind of issue. It works a bit different than other scripts, so you don’t have to edit the HTML code of your elements. All you have to do is include the script and use it in your CSS like so:
.element:container(width > 99px) {
/* If its container is at least 100px wide */
}
https://github.com/ausi/cq-prolyfill
I ran into the same problem a couple of years ago and funded the development of a plugin to help me in my work. I've released the plugin as open-source so others can benefit from it as well, and you can grab it on Github: https://github.com/eqcss/eqcss
There are a few ways we could apply different responsive styles based on what we can know about an element on the page. Here are a few element queries that the EQCSS plugin will let you write in CSS:
#element 'div' and (condition) {
$this {
/* Do something to the 'div' that meets the condition */
}
.other {
/* Also apply this CSS to .other when 'div' meets this condition */
}
}
So what conditions are supported for responsive styles with EQCSS?
Weight Queries
min-width in px
min-width in %
max-width in px
max-width in %
Height Queries
min-height in px
min-height in %
max-height in px
max-height in %
Count Queries
min-characters
max-characters
min-lines
max-lines
min-children
max-children
Special Selectors
Inside EQCSS element queries you can also use three special selectors that allow you to more specifically apply your styles:
$this (the element(s) matching the query)
$parent (the parent element(s) of the element(s) matching the query)
$root (the root element of the document, <html>)
Element queries allow you to compose your layout out of individually responsive design modules, each with a bit of 'self-awareness' of how they are being displayed on the page.
With EQCSS you can design one widget to look good from 150px wide all the way up to 1000px wide, then you can confidently drop that widget into any sidebar in any page using any template (on any site) and
The question is very vague. As BoltClock says, media queries only know the dimensions of the device. However, you can use media queries in combination with descender selectors to perform adjustments.
.wide_container { width: 50em }
.narrow_container { width: 20em }
.my_element { border: 1px solid }
#media (max-width: 30em) {
.wide_container .my_element {
color: blue;
}
.narrow_container .my_element {
color: red;
}
}
#media (max-width: 50em) {
.wide_container .my_element {
color: orange;
}
.narrow_container .my_element {
color: green;
}
}
The only other solution requires JS.
The only way I can think that you can accomplish what you want purely with css, is to use a fluid container for your widget. If your container's width is a percentage of the screen then you can use media queries to style depending on your container's width, as you will now know for each screen's dimensions what is your container's dimensions. For example, let's say you decide to make your container's 50% of the screen width. Then for a screen width of 1200px you know that your container is 600px
.myContainer {
width: 50%;
}
/* you know know that your container is 600px
* so you style accordingly
*/
#media (max-width: 1200px) {
/* your css for 600px container */
}
You can use the ResizeObserver API. It's still in it's early days so it's not supported by all browsers yet (but there's several polyfills that can help you with that).
This API allows you to attach an event listener when resizing a DOM element.
Demo 1 - Demo 2
I was also thinking of media queries, but then I found this:
http://www.mademyday.de/css-height-equals-width-with-pure-css.html
Maintain the aspect ratio of a div with CSS
Just create a wrapper <div> with a percentage value for padding-bottom, like this:
div {
width: 100%;
padding-bottom: 75%;
background:gold; /** <-- For the demo **/
}
<div></div>
It will result in a <div> with height equal to 75% of the width of its container (a 4:3 aspect ratio).
This technique can also be coupled with media queries and a bit of ad hoc knowledge about page layout for even more finer-grained control.
It's enough for my needs. Which might be enough for your needs too.
For mine I did it by setting the div's max width, hence for small widget won't get affected and the large widget is resized due to the max-width style.
// assuming your widget class is "widget"
.widget {
max-width: 100%;
height: auto;
}
I'm trying to figure out how to use the lessframework for building a 2 - 3 column grid, but how to get started?
In the CSS code it says:
13-column layout
60 px columns, 24 px gutters, 72 px margins, 1212 px total (extra space for scrollbars)
On http://lessframework.com/ it says 8 cols for older browsers and 13 for desktops... so do I add the column grid inside the #media only screen and (min-width: 1212px) media query (or add it to a different css file).
I've tried to find some examples but haven't found anything valuable yet.
UPDATE:
After having read the answer from David Oliver I will try to answer question:
320: 1 col
480: 1 col
768: 2 col
1280: 3 col
I hope this answers the question.
From my look at the framework, I believe the idea would be to insert your own column CSS based on the numbers provided in the CSS comments into the relevant media queried sections of the CSS file. Unlike some other CSS column frameworks, you don't apply predefined class names to divs, but, rather, insert your own selectors into the starting CSS file as necessary.
However, as mentioned, this approach doesn't work for mobile devices that aren't capable of dealing with media queries as the default assumes a viewport width of 768px or greater. I believe this approach is better: Rethinking the Mobile Web. Also see Notes on designing for mobile phones (even if they’re not made by Apple)
So you could do something like:
// Stylesheet to set base styles for all browsers - mobile-friendly:
<link rel="stylesheet" type="text/css" href="css/base.css" />
// Stylesheet to set additional styles including background images not suitable for mobiles and the multi-column layout for browsers being used at viewports of 700px (allows for scrollbar at within 768) and wider:
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="only all and (min-device-width: 700px)" />
// Stylesheet to set multi-column layout for browsers being used at viewports of 1200px (allows for scrollbar at within 1280) and wider:
<link rel="stylesheet" type="text/css" href="css/desktop-wide.css" media="only all and (min-device-width: 1200px)" />
In base.css you wouldn't define columns and leave everything to flow naturally.
In desktop.css, for the three areas of content you could have something like:
div#wrapper { width: 94%; margin: 0 auto; }
div#nav { width: 30%; float: left; }
div#content { width: 70%; float: left; }
div#extra { clear: both; }
In desktop-wide.css, you could have something like:
div#nav { width: 20%; }
div#content { width: 60%; }
div#extra { width: 20%; clear: none; float: left; }
These percentages aren't necessarily realistic as you'd have padding or margins, but hopefully they show the idea.
I plan to write up a comprehensive method at my wiki sometime soon, in case you wish to check back later.
When you say "a 2-3 column grid", for which kind of devices do you mean? I recommend you first get clear in mind which size of devices should have columns and how many of them. Maybe the CSS will make more sense to you then?
Additionally, I recommend taking a different approach to the one that framework uses:
First, set up a single-column, basic stylesheet that doesn't rely on minimum width media queries. This is to give mobile users (including those whose devices don't do media queries) a mobile-friendly experience without cumbersome horizontal scrolling. This is the advantage of this approach over the one you've referenced.
Then, add a stylesheet with a media query specifying a minimum viewport width of something like 500px. This is to add in column layout and other styling (such as background images) which is suitable only for desktop browsers.
This is a very brief overview and other things such as getting Internet Explorer to use the media queries (Javascript required?) and making sure those devices which don't support media queries do not load background images from the minimum viewport width stylesheet will need additional refinement. I'm in the process of writing up my preferred method and can post more info when it's done, or maybe when I can get back to my desktop machine.