I have 3 boxes that are currently floated left of each other,
https://jsfiddle.net/2owu0k7s/
When viewing on a smartphone I want the width of the boxes to be near full screen, and the height of each box to be the same height has the viewport. Is this possible to do?
I have tried doing this within a media query,
.box {
float:none;
width:95%;
margin:0 auto 20px;
height:95%;
}
But on my iphone 6s I can still see more than 1 box and 5% of another.
When viewing on a smartphone I want the width of the boxes to be near full screen, and the height of each box to be the same height has the viewport. Is this possible to do?
With a media query and flexbox it is possible (and quite simple, in fact). Here's the smartphone view:
body {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 100vh;
box-sizing: border-box;
border: 3px solid red;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
Revised Fiddle
.box {
width:350px;
height:50vh;
border:1px solid red;
float:left;
margin-right:10px;
}
#media screen and (max-width: 740px) {
.box {
float:none;
width:95%;
margin:0 auto 20px;
height:96vh;
}
}
Write an media query and
Give the height measurements using 'vh' -vertical height.
100vh means full screen-height.
Related
How can I create a responsive arrangement of three divs, such that:
when the viewport is narrow, the three divs appear one atop the other
when the viewport is average, the first div appears full width atop the other two, which are side-by-side and have equal height
when the viewport is wide, the three divs appear side-by-side with equal height
I would like the solution to be broadly supported by browsers.
I've tried a number of media query based strategies, as follows:
To achieve #1, I style each div as display:block
To achieve #2, I style the green and blue divs as display:table-cell and created a container div styled with display:table.
However, if I create another container div for all three elements and style it with display:table, neither of the following approaches work:
Setting all divs to display:table-cell - because the red table cell and the other two are intervened by the smaller container div
Setting the red div and the smaller container divs to display:table-cell - because the smaller container div still needs to be set to display:table for the sake of the green and blue divs inside it.
It's all a bit hard to explain, but I guess you have the idea. Any help would be greatly appreciated.
Thanks!
Edit: I don't want to set the height of any div manually. It should be dictated by its content
What you are trying to achieve is fairly difficult using display: table because of just the issue you ran into: containers are required and the configuration is not that flexible due to the way tables' strict requirements.
I suggest you use flexbox which has fairly good browser coverage now: http://caniuse.com/#feat=flexbox
Here is a good example of how to get equal height rows using flexbox: http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback
I know #fauxserious already posted a very similar answer, but I'll post mine anyways because it's a bit different.
This doesn't use a table, nor the ::before or ::after CSS pseudo-elements.
div#div1 {
background-color: red;
}
div#div2 {
background-color: green;
}
div#div3 {
background-color: blue;
}
div {
box-sizing: border-box;
padding: 20px;
float: left;
margin: 1%;
width: 31%;
}
#media screen and (max-width: 750px) {
div#div1 {
width: 98%;
}
div#div2, div#div3 {
width: 48%;
}
}
#media screen and (max-width: 500px) {
div {
width: 98% !important;
}
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
(It's best to see the above snippet if you open it in a new tab / window and resize it.)
See working example on JSFiddle.net.
EDIT See updated snippet. If you remove the height property of the divs (and replace it with padding so that you can see it even when it's empty), then the height will be determined by its content.
Edit: sorry I missed the equal height part.
You are trying to make squares so let me code and then explain. I'm going to make this a list to help identify things. Assume the ul has been reset (no margin, padding or style-type).
<ul>
<li>
<div>
</div>
</li>
<li>
<div>
</div>
</li>
<li>
<div>
</div>
</li>
</ul>
Here's the CSS to make everything squares.
li{
position:relative;
width:33%;
padding-top:33%;
}
li > div{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
height:100%;
width:100%;
}
You'll notice the padding to be equal to the width. Padding percentage no matter where it's used is based on the parent element's width (margin also works this way). Even if you use it on the top or bottom.
Now with that we can get to positioning with CSS
ul:before, ul:after{
content:"";
display:table;
}
ul:after{
clear:both;
}
li{
position:relative;
width:33%;
padding-top:33%;
float:left;
}
#media screen and (max-width:800px){
li{
width:50%;
padding-top:50%;
}
li:first-child{
width:100%;
padding-top:0; /* Not sure what height you'd want here*/
}
}
#media screen and (max-width:400px){
li{
width:100%;
padding-top:100%;
}
}
I was unsure of why you wanted to use display: table;, however I did something a little different but will look like the images you posted above.
HTML:
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
CSS:
.container {
width: 90%;
margin: 0 auto;
}
.box {
width: 32.3333%;
float: left;
height: 200px;
margin: .5%;
}
.box1 {
background-color: #ff4034;
}
.box2 {
background-color: #22ff62;
}
.box3 {
background-color: #24a6ff;
}
#media screen and (max-width: 900px){
.box:first-child {
width: 99%;
}
.box:nth-child(n + 2){
width: 49%;
}
}
#media screen and (max-width: 436px){
.container .box {
width: 99%;
clear: both;
margin-bottom: 10px;
}
}
Result: Your images above
How about using flex?
.parent {
border: 1px solid #555;
display: flex;
flex-flow: row wrap;
}
.dual {
display: flex;
flex-flow: row wrap;
flex: 2 2 550px;
}
.item {
padding: 20px;
margin: 10px;
flex: 1 1 200px;
min-width: 200px;
}
<div class="parent">
<div class="item" style="background-color: red">red</div>
<div class="dual">
<div class="item" style="background-color: green; flex: 1 1 100px">green</div>
<div class="item" style="background-color: blue; flex: 1 1 100px">blue</div>
</div>
</div>
I had to tweak the sizes a little due to padding and margins, like ".dual" being 550px instead of 400px. Also if the combined items are the same size they will show as two rows in the second column sometimes when shrinking so I made them smaller. Make it full page when you run the snippet or check out the fiddle link which is easier to resize has some extra text showing the blue and green boxes keep the same height in layout 2.
I am trying to create a row of divs that will span the width of the screen. The div must have a fixed height and width and the divs will drop to another line the screen width has already been filled. I am also trying to apply media queries so that the divs, when in a smaller screen will span the entire width.
Media queries:
#media screen and (max-width:400px) {
.test {
display:inline-block;
width: 100% height:150px;
padding:10px;
}
}
#media screen and (min-width:599px) {
.test {
display:inline-block;
width: 30% height:150px;
padding:10px;
}
}
#media screen and (min-width:600px) {
.test {
display:inline-block;
width: 20% height:150px;
padding:10px;
}
}
This is what I have so far: https://jsfiddle.net/9deLmbps/
As you can see the div changes height when there is multiple lines of text in it. How can I ensure each div is kept the same height eve if one has more text?
you have written
width: 100% height:150px;
but it should be
width: 100%; height:150px;
same applies to other occurences
i updated your fiddle: https://jsfiddle.net/9deLmbps/1/
you can use vertical-align:top for better visual appearance:
https://jsfiddle.net/9deLmbps/2/
perhaps you are looking for this:
.test{
background-color: skyblue;
display:inline-block;
width: 150px;
height:100px;
overflow:hidden;
}
I updated your fiddle for visual experience.
jsfiddle:fixed width and height and divs will drop to another line the screen width has already been filled
I have a layout design I was trying to accomplish via display:table-cell. This however may not be the best option, as it is causing me problems.
The desired outcome:
I wish that on smaller screens (less than 992px) to have a layout like so:
+----+----+
| | |
+----+----+
| |
+---------+
But then on larger screens (greater than 992px) to have this layout:
+--+--+--+
| | | |
+--+--+--+
The caveat is that they may not all have the same size content, and I want them to stretch vertically to all be the same height.
I am currently accomplishing this with :
.table {
width:100%;
display:table;
}
.cell {
display:table-cell;
width:50%;
position:relative;
padding:0px 10px;
border:1px solid #000;
}
My problem arises from the fact that in order to get the third cell to wrap around, I need to give it it's own row. But then, the cell will only spread to fit the first 50% (under the first cell) and not stretch 100%. This can be fixed by making the second row it's own table, but then, getting the two tables side-by-side at the right screen size is proving difficult as well.
If there is a better way to make the divs match height that would be ideal. I am using bootstrap, so using its grids would be easy, so long as I can make them all the same height.
Note: Faux columns do not work for my scenario as the backgrounds would not be appropriately colored/spaced.
You could simply use table-layout:fixed to ensure the cells to get equal width.
For the #media query part, use display:table-caption for the last cell, and set caption-side:bottom to specify the placement.
JSFiddle: http://jsfiddle.net/7kpcf46r/ (resize the output frame and see)
.table {
display: table;
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
.cell {
display: table-cell;
border: 1px solid red;
}
#media (max-width: 768px) {
.cell:last-child {
display: table-caption;
caption-side: bottom;
}
}
<div class="table">
<div class="cell">One Line</div>
<div class="cell">Two<br/>Lines</div>
<div class="cell">More<br/>Than two<br/>Lines</div>
</div>
You could use media queries to style contents based upon the width of the screen, for example, given the HTML:
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
The CSS:
/* Setting the defaults, to apply regardless of
screen width: */
html, body {
/* removing margin and padding, setting
font-size to 0 in order to prevent
new-lines creating space between sibling
elements: */
margin: 0;
padding: 0;
font-size: 0;
}
/* resetting the font-size for all descendants of
the body element: */
body * {
font-size: 16px;
}
div.cell {
/* border-box, causes the browser to include
the width of the borders and padding within
the assigned width of the element: */
box-sizing: border-box;
/* instead of table-cell, causing elements
to default to displaying side-by-side: */
display: inline-block;
/* the default behaviour is to show at
50% of the width of the parent (body)
element: */
width: 50%;
margin: 0;
padding: 0;
height: 40vh;
border: 2px solid #000;
}
/*
Note: in this demo I'm using screen widths of
of 600px (min/max) to demonstrate the
principles within the constraints of JS Fiddle's
limited viewport. In your project, obviously, use
your required width of 992px.
*/
/* in screen-widths less than 600px
the last-child has a width of 100%: */
#media all and (max-width: 600px) {
div.cell:last-child {
width: 100%;
}
}
/* in screen-widths greater than 600px
div.cell elements have a width of 33%
(including the last-child) to display
side-by-side across the viewport: */
#media all and (min-width: 600px) {
div.cell {
width: 33%;
}
}
JS Fiddle demo.
References:
CSS Media Queries.
You can do it like this:
http://jsfiddle.net/z1kwrm8p/2/
HTML:
<div class="table">
<div class="cell" id="c1">ABCD</div><!--
--><div class="cell" id="c2">EFGH</div><!--
--><div class="cell" id="c3">XYZ PQRS ABCD EFGH IJKL MNOP QRSTUVWXYZ</div>
</div>
CSS:
.table {
width:100%;
display:block;
background:#009933;
}
.cell {
display:inline-block;
width:50%;
}
#c1 {
background:#99ccff;
}
#c2 {
background:#ff9966;
}
#c3 {
width:100%;
background:#66FF66;
}
#media only screen and (max-width: 991px) {
/* rules that only apply for canvases narrower than 992px */
.table {
display:table;
}
.cell {
display:table-cell;
width:33.3%;
}
#c3 {
width:33.3%;
}
}
I'm trying to learn designing a website.
Is there any way I can set my whole page width to 1000px with the current responsive sticky footer I have?
If possible, on top of the condition mentioned above, I want the left and right div to be horizontally align and the div will become vertical align when the screen collapse.
Here is my html/css code:
JSFiddle
Add max-width:1000px; to the .wrapper class and make the .content class float:left
.wrapper {
margin: 0;
height: auto;
max-width:1000px; /*add this line*/
}
.content {
background-color: slateblue;
width: 500px;
float:left; /*add this line*/
}
Demo at http://jsfiddle.net/Sp2ZW/
you mean something like this?:
http://jsfiddle.net/S3hMH/1/
html, body {
margin: 0 auto;
display: table;
height: 100%;
width: 100%;
width: 1000px;
}
.content {
background-color: slateblue;
width: 500px;
display: inline-block;
float:left;
}
Fiddle
If you are relatively new to responsive design i suggest using a framework as
Foundation
bootstrap
Coming to your questions.
Ya You can set your page-width to 1000px.
#wrapper{
margin: 0 auto;
width: 100%;
max-width: 1000px;
}
.content{
width: 50%;
float:left;
}
#media screen and (max-width: 480px) {
.content{
width:100%;
}
}
Content will occupy 100% width and stacks horizontally if the screen resolution is less than 480px because of the query above.Using % width helps you when designing responsive web pages
The header of my site is some text and a logo. The font used isnt standard so the text is image based.
I want the elements of the site to change with the size of the browser window. I believe this is called fluid design?
So I want the text and logo in the header to scale and be evenly spaced horizontally. There are 5 letters, then the logo, then 5 more letters. One more curveball, I want the logo to be dead center of the page at all times.
I've looked around and it seems there are multiple ways out there to do this. And all have their own caveats based on ever evolving functionality of html and css, I'm guessing more css than html.
So what would be the best way to do this as of June 8 2014? =P Obviously I want it to work in as many browsers as possible.
There are basically two ways to change your content depending on the screen size:
1. Use percents
If you have some elements which should change their size whenever the user changes the screensize, I would recommend using percents.
.content {
width: 90%;
height: 50%;
}
In this example the class .content will have always a height of 50% and a width of 90% - it will change its pixel-size whenever the user changes the screensize. You can create a very flexible layout with that.
2. #media-querys
If you want to change something more than sizes, you have a static layout or want to create something like a mobile version, css has a #media-query:
#media (min-width: 600px) and (max-width: 1000px) {
.content {
background-color: red;
}
}
If the screen-width is between 600px and 1000px the background-color of .content will change to red. Just put the changes you want the header to do into a #media-query like this and it will work perfectly.
You'll find a very good noob-tutorial for #media-queries at css-tricks.com
Okay I hope this is what you meant with your description of having your logo/type in center of page. Here's the jsfiddle I made for the solution.
here's the code
HTML:
<header>
<div id="wrap">
<div id="container">
<div id="logo"><img src="http://mattfrey.ca/img/springfarm/sf-preview2.jpg" alt="sample image"></div>
<div id="fiveLets">F I V E R</div>
<div class="clearFix"></div>
</div>
</div>
</header>
CSS
header { width:100%; padding:0; margin:0; }
img { height: auto; max-width: 100%; padding: 0;}
#wrap { width:80%; margin:0 auto; outline: solid 1px red; background-color:#ccc;}
#container { margin: 0 auto; width:50%; background-color:#fff; outline: solid 1px blue;}
#logo { width:49%;}
#logo img { background-color: blue; float: left; }
#fiveLets { font-size: 2em; margin-top: 1.35em; float: right; margin-left: 1%; width:49%; }
.clearFix {clear:both}
/*responsive changes*/
#media screen and (max-width: 600px) {
#fiveLets { font-size: 1em; } /*shrink text*/
#wrap { background-color: #666; }
}
}
#media screen and (max-width: 300px) { /*doesn't seem to respond--jsfiddle*/
#fiveLets { font-size: 0.75em; }
#wrap { background-color: #333; }
}
}
1) You have your header, logo and type.
2) the #container brings both elements (logo and type, both of which are floated) closer together, and is also centered to solve that issue.
3) when you adjust the browser width, the css for the #logo img will adjust automatically, but the type, you need to add some responsive css, using media queries.
The jsfiddle doesn't seem to shrink down to 300px, so you will have to test in your own browser.
Hope this helps!