I want to use media queries to make a responsive website. I have some pages with 2 columns, others with 3 or 4.
For example I have two columns: #colA and #colB. #colA has width 600px, #colB has 360px with a wrapper of 960px width.
I want to use media queries so that if the wrapper has less than 960px, the columns will keep the width proportions between them (which should turn #colA's 600px to 62.5% and #colB's 360px to 37.5% widths..
Is there a way to do this with html/css? If not what are the other (easiest/lightest) options to use with media query?
<div id="colA" width="600px">content1</div>
<div id="colB" width="360px">content2</div>
to convert in
<div id="colA" width="62.5%">content1</div>
<div id="colB" width="37.5%">content2</div>
Using css/html?
Edit1: Yes it is a CMS. The user sets the width values in px by dragging some sliders in the control panel. I need to make the template responsive, so when the wrapper's width is less then 960px, the columns will still keep their width proportions between them.
I think the easiest way to do it is right in your problem statement. Just use the percentage.
#colA {
width: 62.5%;
}
and so on...
Your media query should look something like this, just make sure this code sits beneath the previously assigned styles for #colA and #colB
#media screen and (max-width: 959px) {
#colA{ width:62.5%; }
#colB{ width:37.5%; }
}
Related
Code: https://jsfiddle.net/qo44rgop/
I want the table to move the td's to the next line if the screen becomes to small (now it extends the table beyond the width of the div). I tried to use margin: auto on the table, it centered it on the div but it didn't adapt to the screen size.
One thing you might want to consider is changing the display property of to 'block' under certain size restrictions. Example:
#media (max-width: 600px){
td{
display:block
}
}
I think you should use #media and set the width of the table cells to 100% (or change the display property) when the screen width fits with your concept of small (I think 768px was the normal max-width for mobile devices, don't remember now).
You have an example in the link I gave, at the bottom.
I have a div that is normally set to take up 20% of the page's width, however, on a page where this 20% is not enough to display its content without overflowing, I would like it to take up the minimum amount of width necessary to fit the content. The content is not necessarily fixed-width, so I cannot simply use min-width with a hardcoded value in pixels.
I'd like to do this with pure CSS, if at all possible.
So, what I would suggest is defining a Breakpoint. So you have to figure out on which point your width is not enough, and use a media query to overwrite CSS rules to fit different situations.
So you could do something like this if your page breaks for smaller screen widths than 720px:
#media screen and (max-width: 720px) {
/* ... */
}
Then you can define a new width or min-width inside of this media query.
I'm trying to implement and new layout for my site. I am capable of implementing this using JS but I'm trying to use pure CSS.
And example would be http://tympanus.net/Development/GridLoadingEffects/
It starts out with 3 columns and when you resize the page smaller, the boxes resize until it gets small enough that it turns into two columns.
Similar to that I'm trying to get my horizontal list of square images to take full width of the page with the square's max-width being 300px. So for example: the page starts out with 5 columns, the width of the page starts shrinking, the width of the boxes start shrinking as well. It reaches a point where 4 300px boxes will be able to fit into the current width.
I've screwed around with and max-width and min-width, but I'm a CSS novice and I feel like I'm missing something. I've looked around and
Any ideas?
You can use Media Queries to set differnet css rules for different browser widths.
#media (min-width: 300px) and (max-width: 600px) {
someClass {
/* some rules for browser width between 300 and 600px */
}
}
More about Media Queries:
ss-tricks.com
MDN
selfhtml
Try setting the width as percents so it will be relative to the screen width.
Then use the screen width media query to set a different width for different screen sizes.
Good luck.
What you're basically talking about is a responsive grid layout system. IMHO the simplest way to do this in pure CSS if you float your DIVs and used fixed % sizes. Use Media break-points for each screen size range you want to support. You need to calculate all the gaps (gutter widths) as well. Also watch for rounding errors in some browsers, notably IE. You might need to use slightly less than 100% for maths because you want to ensure you don't end up 1px larger than 100%.
Here's an example with just one break-point that uses a 3 column layout by default and revers to a 2 column layout when the display size falls below 480px.
<style>
/* default */
.square {
background-color: orange;
width: 30%; /* 100/3 - (margin*2) */
padding-bottom: 30%; /* matching width makes it square */
margin: 1.5%; /* margin calculated as portion of overall 100% */
}
#media (max-width: 480px) {
.square{
/* overrides for smaller screens */
background-color: purple; /* show the breakpoint switch below 480px */
width: 47%; /* (100%/2) - (margin*2) */
padding-bottom: 47%;
margin:
}
}
</style>
<div>This layout will fit 3 squares wide for any screen width</div>
<div class="square">one</div>
<div class="square">two</div>
<div class="square">three</div>
And here's the fiddle.
Your media queries can get much more complex, but it's possible to support pretty much any device. Try and design for any screen size first and than mop up the edge cases.
This soon gets very complex to manage in CSS. You really want to think about a CSS pre-processor such as SASS or LESS. However, there are plenty of grid frameworks that support this, including Twitter's bootstrap and some great inspiration from fluid squares or my favourite for simplicity responsive.gs. You'll find that most of these use a grid of 12 or 24 columns, as they divide into more even sets of columns. For instance, 24 can shrink down to a screen consisting of 1, 2, 3, 4, 6, 8, 12 and 24 columns.
I'm trying to get familiar with responsive, mobile-friendly layouts by redesigning my online portfolio, using the SimpleGrid framework (this one: thisisdallas.github.io/Simple-Grid/) combined with elements of HTML5 boilerplate to help get me started.
Here's what I've got at the moment: http://pftest.comyr.com/grid/
One of the issues I encountered was figuring out how to get the grid columns (specifically, the 3 div columns containing the hexagon shapes) to collapse at the different screen-size "breakpoints" with CSS media queries so that they won't simply overlap each other at smaller screen sizes.
After a fair amount of trial and error mucking about I eventually discovered I could get it to to collapse to two columns for tablet screen-sized devices by applying a class/ID with width: 50% and float: left to a media query of: #media only screen and (max-width: 908px) { } and (hopefully) now it collapses neatly into two columns at roughly that size (at least it does from my brief testing)
The issue I'm having is now is figuring out how to get it get into collapse into a single column for the smaller smartphone screen-sizes (#media (max-width: 22em), #media (max-width: 320px) ect.
I have tried various different properties using the same #workgrid ID I used for the two column breakpoint - but for whatever reason just can't seem to get it work, and unfortunately there is little to no documentation included with the grid framework that might aid me.
The CSS in question is:
#media (max-width: 22em) {
#workgrid {
width: 100%;
float: left;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
}
}
Which is applied to each of the DIV "col-1-3" classes.
As you can see at the moment it collapses into the two columns and then begins to overlap at any screen size smaller than that. I'm sure it is something relatively simple I'm missing/not seeing and just need a bit of a push in the right direction... :)
The main problem is that you're working with unresponsive units inside the responsive elements of your grid and you're not using max-height and max-width for elements like images.
For example, you have an element class called .shape whose width is 300px, this class is a child of #workgrid whose width is 50%. In a small browser viewport with, for example, a 320px width, your #workgrid width in pixel will be as much 160px while .shape width will be the same, 300px, this causes the content gets out of the space and collapses with other elements space.
Here are two links that maybe help you to understand fluid elements better:
Fluid images
max-width
To fix your grid you should use max-width and max-height instead of width and height in some classes and change some css properties like background-size. Another way to solve it is using responsive units instead of fixed units in sizes. A responsive web needs responsive measures.
Fix that takes time and can be exasperating, so if you want an alternative solution yo can solve your problem changing yor main.css and simplegrid.css this:
#media (max-width: 22em) {
to this:
#media (max-width: 41em) { // If it doesn't work, test a larger number like 44em or something like that
Your grid starts to collapse when the browser viewport is smaller than 656px (656px = 41em for a current font-size of 16px), this grid becomes a single column grid when the browser's viewport width is 22em or less, so changing 22em to 41em we make single column appears before the grid collapses, thus making grid works well.
I'm using bootstrap and if I use a fixed width and auto margins on container-fluid to center the content it looses the responsiveness.
Is there a way to avoid this? Or the responsive design means there is no fixed width?
HTML
<div class="container-fluid"></div>
CSS
.container-fluid {
width: 960px;
margin: 0px auto;
}
Twitter Bootstrap already have a class to do what you want and his name is "container" he uses fixed widths, but that width is different using media queries rules so it became smaller as the screen get smaller, and when less then 767px that container is 100% of screen size.
Basically, "fluid" and a fixed width are contradictory terms. But there are lots of options. For example, you could set a max-width and min-width instead of just a width. Or your could set a width in ems which still gives the layout some flexibility (especially when combined with % width columns).
Another option is to set your 960px width, but to change that width at different screen sizes with #media queries.
Try to add an id in the div and apply the changes there in order to respect the pre-configured container-fluid class