I am attempting to implement a responsive layout based on the exmaples and code here: www.responsivegridsystem.com
I have wrapped it a couple of containers as I need a 960px content area centered in a 1000px container.
My intent is that with a width smaller then 960px, both containers just become 100% width. The layout is exactly what I want at full size, but it is not shifting like I want when smaller then 960px.
Current CSS (with some edits based on suggestions, still not working.):
.masterContainer {
position:relative;
margin:0 auto;
margin-top:-10px;
background-color:#FFF;
width:1000px;
overflow: hidden;
}
.pageContainer {
position:relative;
display:table;
margin:0 auto;
width:960px;
overflow:hidden;
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 70%;
}
.span_1_of_3 {
width: 30%;
}
#media only screen and (min-width: 481px and max-width: 960px) {
.masterContainer {
width:100%;
}
.pageContainer {
width:100%;
}
}
#media only screen and (max-width: 480px) {
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 100%;
}
.span_1_of_3 {
width: 100%;
}
}
HTML
<div class="masterContainer">
<div class="pageContainer">
<div class="section">
<div class="col span_3_of_3" id="header">Header
</div>
<div class="col span_3_of_3" id="slideshowContainer">Slideshow
</div>
</div>
<div class="section group">
<div class="col span_2_of_3" id="contentArea">
This is column 1
</div>
<div class="col span_1_of_3" id="rightColumn">
This is column 2
</div>
</div>
<div class="col span_3_of_3" id="footer">Footer
</div>
<div class="col span_3_of_3" id="bottom">
</div>
</div>
</div>
Is something wrong with my #media code or did I break it somewhere else?
Your media queries are telling IDs to do something, while your HTML has them as classes. Change it to something like this:
#media only screen and (max-width:960px){
.masterContainer {width: 100%;}
.pageContainer {width: 100%;}
}
Here is a fiddle with your code and the query. I gave them background colors for the example.
JS Fiddle with your code
From what you've posted there is no #media codes... You cannot have a specific width's set if you intened for the page to be responsive ex. masterContainer width 1000px.. youll need to redo that for example:
#media (min-width: 700px), handheld and (orientation: landscape)
{
.masterContainer{
width:60%; // or whatever you may need
}
}
have a look at some examples.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You need to specify it via #media queries:
#media screen and (max-width: 959px) {
.masterContainer,
.pageContainer {
width: 100%;
}
}
You dont have media queries in your css.
Create separate files for diffrent screen sizes and put styles in there. Thats the easiest way.
And read this article. It will help you to understand how media queries work.
csstricks media queries
The reason it doesn't work is this:
#media only screen and (min-width: 481px and max-width: 960px) that is a wrong query.
It should be:
#media screen and (min-width:481px) and (max-width:960px)
You can't combine the min and max like you had it.
Related
I have two divs that are 368px x 228px sitting next to each other but each time I try to apply media queries and run a few tests, it doesn't seem to be working at all. How do I go about resolving this issues.
See my code below:
<style type="text/css">
.block-content-right {
background-color:#e0e620;
flex:1;
}
#media (max-width: 600px) {
.field__item {
width: 100%;
}
}
#media (min-width: 400px) {
.field__item {
width: 100%;
}
}
</style>
<div class="block-content-right">
<p>The people the people the people</p>
</div>
<div class="field__item">
<img src="blah blah.jg";>
</div>
Need some help guys. Thank you.
Your media queries are working, but at least one of them is always going to be active.
Perhaps what you wanted was this:
#media (max-width: 600px) and (min-width: 400px) {
/* This will be active if the screen is between 600px and 400px */
.field__item {
width: 100%;
}
}
Or maybe this:
#media (max-width: 400px) or (min-width: 600px) {
/* This will be active if the screen is NOT between 600px and 400px */
.field__item {
width: 100%;
}
}
Note: For testing purposes, you may want to use a different CSS rule. With the code you are showing, the "width: 100%;" doesn't do anything because divs have 100% width by default. Try using "border:5px solid red;"
Code to stack elements if the page is narrow: (Going into full screen causes the elements to be placed side-by-side)
#media (min-width: 800px) {
.half-width {
display: inline-block;
width: 49%;
}
}
<img class="half-width" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Zinnia_elegans_with_Bombus_01.JPG/640px-Zinnia_elegans_with_Bombus_01.JPG" />
<div class="half-width">Here is some text. More and more and more text. And more and more text. And more and more text. And more and more text. And more and more text. And more and more text. And more and more text.</div>
No matter how I try in my CSS file, the container can't take full width in phone device.
my CSS file:
#media (max-device-width: 1024px) {
.col-sm-2{
width: 100%;
}
.container {
margin: 0 auto;
width: 100%;
}
.col-sm-10 {
width: 100%;
}
}
HTML:
<div class="container">
<h1 >Profile</h1>
</div>
Any suggestion?
You should use container-fluid class instead of container, or if would prefer you can use the sm, lg and so on suffixes , like container-sm
See the docs
Try container fluid
<div class="container-fluid">
<h1 >Profile</h1>
</div>
or add !important to #media like this
#media (max-device-width: 1024px) {
.col-sm-2{
width: 100%;
}
.container {
margin: 0 auto;
width: 100% !important;
padding: 0 !important;
}
.col-sm-10 {
width: 100% !important;
}
}
I got a grid, made out of inline-block elements so they can overflow to other rows.
The problem is that, if the row is not complete, the items in that row are also centered and not aligned to the left side, like if they'd just overflow.
The problem can be seen in this Fiddle.
Is there any way to do this in the pure CSS ? So that the container is centered, but the elements inside it remain to be on the left side ?
I already tried to use margin: 0 auto; to center just the container, but the container would have to have fixed width, but in this situation the container expands as far as it can (fills the outer container).
Edit: The only way I can think of is getting the width of the container with Javascript and then dividing the width by the width of the elements (as they have the same width), apply the width to the container and go with the margin: 0 auto; method.
This is not doable in a general case (see this post) because CSS can't determine when an element wraps and therefore recalculate the empty space required.
Similar to the solution in that post, you can use media queries to achieve this result. I have written a version more specific to your case:
.grid {
margin: 0 auto;
width: 990px;
font-size: 0;
}
.item {
display: inline-block;
margin: 5px;
width: 100px;
height: 100px;
background: red;
}
#media screen and (max-width: 230px) {
.grid {
width: 110px;
}
}
#media screen and (min-width: 231px) and (max-width: 340px) {
.grid {
width: 220px;
}
}
#media screen and (min-width: 341px) and (max-width: 450px) {
.grid {
width: 330px;
}
}
#media screen and (min-width: 451px) and (max-width: 560px) {
.grid {
width: 440px;
}
}
#media screen and (min-width: 561px) and (max-width: 670px) {
.grid {
width: 550px;
}
}
#media screen and (min-width: 671px) and (max-width: 780px) {
.grid {
width: 660px;
}
}
#media screen and (min-width: 781px) and (max-width: 890px) {
.grid {
width: 770px;
}
}
#media screen and (min-width: 891px) and (max-width: 1000px) {
.grid {
width: 880px;
}
}
#media screen and (min-width: 1001px) and (max-width: 1110px) {
.grid {
width: 990px;
}
}
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Writing this many media queries, however, is not advised. I actually generated them using Sass (see my CodePen):
$width: 100px;
$margin: 5px;
$extra-padding: 10px;
$column-width: $width + 2 * $margin;
$num-blocks: 9;
#function screen-size($n) {
#return $n * $column-width + $extra-padding;
}
.grid {
margin: 0 auto;
width: $num-blocks * $column-width;
font-size: 0;
}
.item {
display: inline-block;
margin: $margin;
width: $width;
height: 100px;
background: red;
}
#media screen and (max-width: screen-size(2)) {
.grid {
width: $column-width;
}
}
#for $i from 2 through $num-blocks {
#media screen and (min-width: screen-size($i) + 1px) and (max-width: screen-size($i + 1)) {
.grid {
width: $i * $column-width;
}
}
}
The above solution has its limitations, it can only work with fix number of blocks. If that's a concern, you will have to use a JavaScript library such as Desandro Masonry or just roll your own.
It seems like it's not possible to do it with CSS only approach (unless using Flexbox).
That means I'm going to use the "set width with Javascript and use margin: 0 auto" method.
The best would be to use the CSS only method proposed by #Nelson Yeung, but I'm going to use it on multiple pages, where the container width would not be the same.
Also interesting thing is that Zeplin, platform for front-end developers <> designers, is also using the method I'm going to use.
I want to make an 100% full page, within 4 images on each row. But if you resize the window you'll get 3 images than 2 images till there is 1 left. After research I become at #media to fill the full page without getting any blank spaces. Now i've made this jsfiddle but if you resize the results window you will see blank spaces who are not filled. What am I doing wrong?
#media only screen and (min-width : 354px) {
/* Smartphone view: 1 tile */
.image{
width: 100% }
https://jsfiddle.net/8hfLkb3k/
The image always must fill both width's, if the width is 50% for 2 both images must fill it in for 50%.
Thanks.
I recommend using max-widths for your media queries, but you don't have to do this, as long as what you do gives you the intended and correct result.
In my working example I've chosen to set the one-image container for 25% unless something changes like the viewport width.
At 1024, 767 and 600 I've chosen the 1/3 and 1/2 sizes and finally the 100% width.
I expect this is what you mean, but feel free to adapt this code as you see fit, especially to match the media query viewport attributes to what you desire.
* {
box-sizing: border-box;
}
.one-image {
width: 25%;
float: left;
border: 1px solid red;
}
.one-image img {
width: 100%;
border: 1px solid blue;
display: block;
}
#media screen and (max-width: 1068px) {
.one-image {
width: 33.33%;
}
}
#media screen and (max-width: 767px) {
.one-image {
width: 50%;
}
}
#media screen and (max-width: 600px) {
.one-image {
width: 100%;
}
}
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
Your images (<img> elements) are not expanding to the full width of the .image containers because you're missing this rule, which you can add to your CSS:
.image img {
width: 100%;
}
Here's your example code updated to show this working:
.image img {
width: 100%;
}
.f_left {
float: left;
}
#media only screen and (min-width: 354px) {
/* Smartphone view: 1 tile */
.image {
width: 100%;
}
}
#media only screen and (min-width: 708px) {
/* Smartphone view: 2 tile */
.image {
width: 50%;
}
}
#media only screen and (min-width: 1062px) {
/* Small desktop / ipad view: 3 tiles */
.image {
width: 33.3%;
}
}
#media only screen and (min-width: 1417px) {
/* Medium desktop: 4 tiles */
.image {
width: 25%;
}
}
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
I'm trying to create 3 divs with the middle div having 2 divs inside side by side. The issue I'm having is that at screen size >768px the 2 divs inside are being squished rather than 100% width? Any help is greatly appreciated!
https://jsfiddle.net/z3q2wtLf/embedded/result/
The below code is an example of what I'm trying to achieve but there something I'm not catching in the fiddle above thats preventing the below result.
#panel1 {
width:100%;
height:100px;
text-align:center;
background: #000000;
}
#container {
width:100%;
text-align:center;
}
#left {
float:left;
width:50%;
height: 20px;
background: #ff0000;
}
#right {
float:right;
width:50%;
height: 20px;
background: #0000ff;
}
#panel2 {
width:100%;
height:100px;
text-align:center;
background: #000000;
}
<div id="panel1">
</div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="panel1">
</div>
Give this a look: https://jsfiddle.net/z3q2wtLf/29/embedded/result/
I switched the media to:
#media only screen and (min-width: 768px) {
body { display: block; }
}
On the container CSS, I added: min-height: 460px !important; (The "important" notation may be unnecessary, but it worked and I didn't bother testing without it.)
Then in your actual HTML, I fixed a spelling error where you wrote "containter" instead of "container"
And, finally, I switched #panel1 to .panel1 and changed the top and bottom divs to <div class="panel1"></div> instead of <div id="panel1"></div>. In HTML, you are NEVER supposed to give two elements the same ID. Hence why I changed the ID to a class. (You can reuse classes as much as you want.)
In your CSS, you have a line:
#media only screen and (min-width: 768px) {
body { display: flex; }
}
This is the cause of your issue.
To go off of what QuestionMarks said
#media only screen and (min-width: 768px) {
body { display: flex; }
}
Instead of it using flex to display your divs, you need to use this one:
#media only screen and (min-width: 768px) {
body { display: inline-block; }
}
The key here is using display: inline-block; to display divs side by side.