Making three-column HTML responsive - html

My page width is 960px and I have 3 divs on it in a horizontal manner that collectively take 100% of the width.
When the page width is decreased, I want the divs to be arranged in a vertical manner.
How can I do it in CSS ??

If you don't mind using bootstrap:
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
This will create a row with three equal size responsive columns..

In css you can make use of media rules. For example, you can set new CSS styles, if the screen size goes below a certain width. In the case below it's set to use the new css rules once the width goes below 960px.
#media only screen and (max-width: 960px) {
.test-div {
float:none;
}
}
here is a full fiddle: http://jsfiddle.net/pckphv38/
simply resize your browser and see.

Fiddle Here
One simple way of doing it is to toggle the float property using a media query. For body width > 960px, have them float left. Otherwise, let them line up normally as blocks.
div {
width: 33.3333%;
box-sizing: border-box;
float: none;
margin-bottom: 25px;
padding: 25px;
}
span {
display: block;
height: 200px;
background: red;
}
#media (min-width: 960px) {
div {
float: left;
}
}
<div> <span></span>
</div>
<div><span></span>
</div>
<div><span></span>
</div>

create the div for these 3 divs
set the width to 100%
use float: left;
and position:relative; in the css
or you can use bootstrap
http://getbootstrap.com/

First, apply the same class to all the divisions.
<div class="nm">
Then, from How to get browser width using javascript code?, get the width of the screen with
function getWidth() {
if (self.innerHeight) {
return self.innerWidth;
}
if (document.documentElement && document.documentElement.clientHeight) {
return document.documentElement.clientWidth;
}
if (document.body) {
return document.body.clientWidth;
}
}
And then change it depending on the width.
var value = 400;
if(getWidth() < value){
var foo = document.getElementByClassName("nm");
for(var i=0, j=foo.length; i<j; i++){
foo[i].style.float = "none";
}
}
To break it down:
Have a function get the width of the screen
Run through each element that needs to be changed
Change the CSS to remove the horizontal alignment.
Additionally, if you want to change it whenever the user stretches or pulls the browser, you can create a setInterval loop.
function doInterval(){
var value = 400;
if(getWidth() < value){
var foo = document.getElementByClassName("nm");
for(var i=0, j=foo.length; i<j; i++){
foo[i].style.float = "none";
}
}
}
intv = setInterval(doInterval, 250);

Way to arrange the elements in CSS3
(no effect in IE10 and earlier versions)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<style type='text/css'>
#ctr {
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}
.item {
width:100px;
height:100px;
background-color:pink;
margin:2px;
}
#media (min-width: 960px) {
#ctr {
display: -webkit-flex;
-webkit-flex-direction: row;
display: flex;
flex-direction: row;
}
}
</style>
</head>
<body>
<div id="ctr">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
</body>
</html>

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrap960{
max-width: 960px;
margin: 0 auto;
}
.box{
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
width: 31%;
min-width: 250px;
margin: 1%;
border: 2px solid #f00;
min-height: 200px;
text-align: center;
line-height: 200px;
}
#media only screen and (max-width: 960px) {
.box{
display: block;
margin: 1% auto 0 auto;
}
}
<div class="wrap960">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>

Related

How to avoid horizontal and vertical scroll bars in Flexbox CSS?

I want to create a HTML file that contains an embedded style sheet. The HTML file should show rectangles on the top right corner in a column.
Input
If the browser window is too small, the rectangles should go into multiple columns and avoid vertical and horizontal scroll bars. My output is coming out like this.
Output
I have tried my coding this way. But it is not working. Can anybody suggest how to do this?
#media screen and (max-width: 400px) {
.col {
background-color: olive;
}
}
#media only screen and (min-width: 321px) {
.col {
background-color: olive;
}
}
.row {
float: right;
}
.col {
margin: 11px;
width: 80px;
height: 80px;
background-color: aqua;
}
<html>
<head>
</head>
<body>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
</div>
</body>
</html>
First of all please note that usually media queries should be at the end of the css style, so you avoid overwrite them by mistake (in this case this is why background-color: olive; is not working, no matter the window size).
Second of all really the solution really depends a lot on data. Assuming you will always have only 6 boxes and fixed width to the container and to the boxes you can do something like this:
.row {
display:flex;
flex-direction: column;
flex-wrap: wrap-reverse;
height:500px;
align-content: flex-start;
}
.col {
margin: 11px;
width: 80px;
height: 80px;
background-color: aqua;
}
#media screen and (max-width: 400px) {
.col {
background-color: olive;
}
}
#media only screen and (min-width: 321px) {
.col {
background-color: olive;
}
}
#media only screen and (max-width: 200px) {
.row {
height: auto;
}
}
<html>
<head>
</head>
<body>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
</div>
</body>
</html>
Plase note that height: 500px; can be modified if you need. Can be even a procent or something else depending on your page structure and your needs. If you need something more generic there isn't a perfect overall solution. But you can try to find a better one depending on your data.

Flexbox not appearing in mobile view

I am trying to use flex box for mobile view but it does not seem to work for a specific box(the title flexbox works fine but the labels flex doesnt show). Also, I have divs inside the labels flexbox as child elements
#media screen and (max-width:450px) {
.title {
display: flex;
}
.click {
display: none;
}
.name {
display: flex;
font-size: 50px;
}
.labels {
display: flex;
width: 100%;
background-color: aliceblue;
}
}
<div class="labels">
<div class="port social">Social</div>
<div class="port bio">Bio</div>
<div class="port web">Website</div>
<div class="fancybox fancyboxy-iframe port resume" href="image/Weldons%20resume%20final.pdf" data-fancybox="gallery">Resume</div>
</div>
https://codepen.io/ew39020/pen/MmEmyZ
I found two problems:
In Codepen CSS, row 19: you have diplay instead of display
In your snippet here: Media queries seem not to work here, because result is too wide.
And if you want elements to have equal width, just add flex: 1 to them.
.title {
display: flex;
}
.click {
display: none;
}
.name {
display: flex;
font-size: 50px;
}
.labels {
display: flex;
width: 100%;
background-color: aliceblue;
}
.labels > * {
flex: 1;
}
<div class="labels">
<div class="port social">Social</div>
<div class="port bio">Bio</div>
<div class="port web">Website</div>
<div class="fancybox fancyboxy-iframe port resume" href="image/Weldons%20resume%20final.pdf" data-fancybox="gallery">Resume</div>
</div>
In your CodePen code, you misspelled the display property under labels:
.labels{
diplay:flex; /* missing the `s` */
width:100%;
background:blue;
}
When I corrected this, the flexbox works. I also added a media query condition to test this under a smaller screen, and it worked.

Make 3 columns change into accordion when resized

I need the display of a 3 column page to turn into an accordion when viewed on a smart phone. I've looked to see if there were any examples or tutorials but I haven't run into any. I've found changing tabs into accordions, but, this is a basic page that has 3 columns and when it is resized to a smaller screen size it needs to change into an accordion. Any links or suggestions would be greatly appreciated.
You can use flexbox to do this
.container {
display: flex;
}
.container > div {
flex: 1;
height: 150px;
border: 1px solid gray;
transition: flex 0.5s;
}
#media screen and (max-width: 800px) {
.container > div {
flex: 0;
}
.container > div:nth-child(1) {
flex: 1;
}
.container:hover > div {
flex: 0;
}
.container > div:hover {
flex: 1;
}
}
<div class="container">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>
Try this:
index.html
<body>
<div class="container">
<div class="section section--1">Section 1</div>
<div class="section section--2">Section 2</div>
<div class="section section--3">Section 3</div>
</div>
</body>
style.css
.container {
column-count: 3;
column-gap: 24px;
width: 100%;
}
.section {
display: block;
height: 200px;
color: #fff;
}
.section--1 { background-color: red; }
.section--2 { background-color: blue; }
.section--3 { background-color: green; }
/* small screen */
#media (max-width: 767px) {
.container {
column-count: 1;
}
}
I hope I have been able to help you.
Here's an example of using a few lines of jQuery to add the collapse value to Bootstrap's data-toggle attribute when viewing on a screen 480px (or whatever width you want) or smaller.
$(function(){
if($(window).width() <= 480) {
$("#col1, #col2").attr("data-toggle", "collapse");
}
})
Note: You have to refresh your page if you're just resizing your browser (and be sure you resize the Fiddle results window to smaller than 480px to see the effect), but it would still make your columns accordions on mobile devices while displaying things normally on larger screens.
Fiddle
Sorry it's taken so long to get back to you. All of the suggested code is great. What I ended up doing is I hid the accordion and had it become visible at the mobile size and then the main content was hidden. Just used css.

Flexbox grid not working in Firefox [duplicate]

I'm having some trouble getting my image to take up no more than 100% of the available width of the parent container. I'm only noticing the issue in Firefox 36 (not IE or Chrome). So is it a firefox bug or am I missing something here?
Note: The image should never be larger than it's original size.
Chrome:
Firefox:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width:300px;
}
.flexbox {
display:flex;
}
.flexbox .column {
flex:1;
background-color: red;
}
.flexbox .middleColumn {
flex:3;
}
.flexbox .middleColumn img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
align-self: center;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="flexbox">
<div class="column">This is the left column!</div>
<div class="middleColumn">
<img src="http://placehold.it/400/333333">
</div>
<div class="column">This is the right column!</div>
</div>
</div>
</body>
</html>
You need to add min-width:0 on .middleColumn, if you want to allow it to shrink below its min-content width (the intrinsic width of its <img>-child).
Otherwise, it gets the new default min-width:auto, which on a flex item will basically make it refuse to shrink below its shrinkwrapped size.
(Chrome hasn't implemented min-width:auto yet. I'm told IE has, in their next-gen rendering engine, so I'd expect that version should behave like Firefox here -- as will Chrome, once they implement this feature.)
Snippet with that fixed:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width:300px;
}
.flexbox {
display:flex;
}
.flexbox .column {
flex:1;
background-color: red;
}
.flexbox .middleColumn {
flex:3;
min-width:0;
}
.flexbox .middleColumn img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
align-self: center;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="flexbox">
<div class="column">This is the left column!</div>
<div class="middleColumn">
<img src="http://placehold.it/400/333333">
</div>
<div class="column">This is the right column!</div>
</div>
</div>
</body>
</html>
I have to admit that I'm not sure why, but for some reason in Firefox it looks like you have to give the image a width/height (i.e. something other than "auto"). Our old friend 100% seems to do the trick:
.flexbox .middleColumn img {
width: 100%;
height: 100%;
display: block;
}
Here's a fiddle showing the working solution. Note that I changed the side columns to flex:2 to make the result a bit more apparent.
I seem to get this working with the following:
.flexbox {
display:flex;
}
.flexbox .column {
flex:1 1 0;
overflow:hidden;
background-color: red;
}
.flexbox .middleColumn {
flex-grow:3;
flex-shrink:3;
}
.flexbox .middleColumn img {
max-width:100%;
}
setting flex:1 1 0; on all columns sets them to equally grow and do so from the even and miniscule basis of 0px.
You then overide the grow and shrink on .middleColumn
max-width:100%; is needed as per usual
the magic seems to be overflow:hidden; on the item getting flexed.
the other stuff on the image is not needed.
In my experience, the approach is slightly different, maybe strange, but it works. Basically, I fix the max width to the real image width, so it won't pixelate, and use percentage width instead of max-width. If you have, say an <ul> (flex) container, the cells will be:
li{
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
width: 50%; // for example..
img{
display: block;
max-width: [your real img width in px] // instead of 100%;
width:100%; // instead of max-width
}
}

Additing image to Flexible box model

I'm new to HTML5 and CSS3 and developing my first site/app for college. Ideally I need it to display on mobile phone image (which I haven't yet mastered) but for now all I'm trying to do it show flexible box working. As you will see text wraps when I adjust window size but logo remains unchanged. It was suggested that I could set image as background to a div which would adjust according to window size but not sure how to do this.
!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<!-- CSS -->
<link rel="stylesheet" href="preposting.css">
<title>Title goes here</title>
</head>
<body>
<div id="container">
<header id="top_header">
<div id="logo">
<img class="logo_image" src="logo.gif" alt="" />
</div>
<div id="welcome">
<h1>Text wraps when I adjust window size but image doesn't. It was suggested that I should set image as background to div and that way it would adjust but not sure how to do this.</h1>
</div>
</header>
</div>
</body>
</html>
#container
{
text-align:left;
border: 10px solid black;
margin: 20px auto;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header
{
border:30px solid green;
padding:20px;
background:yellow;
display:-webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-flex: 1;
}
#img.logo_image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
I see that you are using the old flexible box model: -webkit-box;
the new one is basically only called flex; You would type: display: -webkit-flex;
They have great examples of it here: http://www.w3.org/TR/css3-flexbox/
css:
#main { display: flex; }
#main > article { flex:1; order: 2; }
#main > nav { width: 200px; order: 1; }
#main > aside { width: 200px; order: 3; }
#media all and (max-width: 600px) {
/* Too narrow to support three columns */
#main { flex-flow: column; }
#main > article, #main > nav, #main > aside {
/* Return them to document order */
order: 0; width: auto;
}
}