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
Related
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.
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.
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!
I have this CSS for 2 divs:
#homepage-twitter {
width:28%;
height:500px;
overflow:hidden;
display:inline;
float:right;
}
#homepage-blog-posts {
width:70%;
height:500px;
display:inline;
float:left;
margin-right:10px;
border-right:1px solid black;
}
#media screen and (max-width: 1250px) {
#homepage-blog-posts {
width:100%;
border-right:0;
}
#homepage-twitter {
display:block;
width:100%;
border:1px solid #F36F25;
}
}
here is a fiddle with the full html and css code: http://jsfiddle.net/Gb8Fr/
if you make the screen as wide a possible, the divs are inline with each other but as the screen gets smaller (using media queries) the divs go one above the other but i can't keep the space in between them and they start to overlap each other
how can i stop them from doing this?
Remove the height: 500px from homepage-blog-posts or add overflow: hidden to it. You can remove it as part of the media query property if you need.
Problem:
I want to center the containing div, but I want to also left-align the blocks.
I think flex boxes might be the solution, but I'm not sure what to do with them.
I want to do this:
without Javascript
without tables
without setting a row width (the row width must be dynamic.. that's the intent of this exercise)
without setting a width to the container. (same as setting a row width)
without adding invisible divs. (same as setting a row width)
Example, with current CSS (attempt failed):
.block {
border : 5px solid DarkRed;
width : 150px;
height : 150px;
display : inline-block;
}
.container {
display : inline-block;
text-align : center;
}
http://jsfiddle.net/SKRjG/
Edit: here is a Javascript version to show how it should look like:
http://jsfiddle.net/SKRjG/8/
Put your divs within another container so that it looks like
<div class="container">
<div class="subcontainer">
<div class="Block"></div>ETC
</div>
</div>
Then have #media queries to change the width of .subcontainer to fit your blocks into perfect grids. Then center your .subcontainer div with margin: 0 auto;
Css might look like:
.block {
border : 5px solid DarkRed;
width : 150px;
height : 150px;
display : inline-block;
}
.subcontainer {
text-align:left;
margin:0 auto;
}
/*Three columns*/
#media (min-width: 495px){
.subcontainer{width:495px;}
}
/*Four columns*/
#media (min-width: 660px){
.subcontainer{width:660px;}
}
/*Five*/
#media (min-width: 825px){
.subcontainer{width:825px;}
}
Fiddle: http://jsfiddle.net/TM2wB/26/
Use this CSS
.block {
border : 5px solid DarkRed;
width : 150px;
height : 150px;
display : inline-block;
float:left;
clear:both;
}
.container {
display : inline-block;
text-align :center;
margin:0 auto;
}