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.
Related
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.
I have a 3 column layout in my HTML which looks like this
[ [leftdiv] [centerdiv] [rightdiv] ]
I'm not really a UI guy so I need help to deal with this stuff in css
for responsive design. The HTML layout below represents the above sketch.
<div class="container">
<div class="leftdiv" style="width:25%;height:auto;float:left; background-color:white">
</div>
<div class="centerdiv" style="width:50%;height:auto;float:left; background-color:white">
</div>
<div class="rightdiv" style="width:25%;height:auto;float:right;background-color:white;margin-top:15px">
</div>
</div>
I need to make my 3 column divs to be responsive based on the screen width of the browser. So let's say if I resize
my browser's width to a lesser width like a screen width of a smart phones or tablet, the 3 divs should realign themselves
relatively like this below
[
[leftdiv]
[centerdiv]
[rightdiv]
]
How do I achieve this? Thanks
With a #media query
.col {
width: 25%;
height: auto;
float: left;
background: white;
}
.centerdiv {
width: 50%;
}
.rightdiv {
float: right;
margin-top: 15px
}
#media (max-width: 640px) {
.col {
float: none;
width: auto;
}
}
<div class="container">
<div class="leftdiv col">left
</div>
<div class="centerdiv col">center
</div>
<div class="rightdiv col">right
</div>
</div>
To do this in bootstrap, just utilize the grid column classes.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-3">left</div>
<div class="col-sm-6">center</div>
<div class="col-sm-3">right</div>
</div>
</div>
They're called #media queries and they are the underlying principle of responsive design. They are basically wrappers around CSS delarations applying only if the #media query condition is true.
.leftdiv, rightdiv, centerdiv {
background-color: white;
}
.right-div {
margin-top:15px
}
#media (min-width: 600px) {
.leftdiv {
width:25%;
float:left;
}
.centerdiv {
width:50%;
float:left;
}
.rightdiv {
width:25%;
float:right;
}
}
<div class="container">
<div class="leftdiv">Left div</div>
<div class="centerdiv">Right div</div>
<div class="rightdiv">Center div</div>
</div>
I've placed your inline styles in CSS, where they belong (you can't use media queries without either a <style> tag or a stylesheet - .css file); I also streamlined them a bit.
Since what you want is default <div> behavior, I only placed the rules making them behave like columns (floats and widths) in a media query that applies on devices wider than 600px (CSS pixels).
Of course, you can change 600px to whatever you like and you can have as many #media queries as you like.
You can also use display:flex with media queries to adjust the layout.
See fiddle: https://jsfiddle.net/xdr9fhh1/
html
<div class="container">
<div class="leftdiv">left</div>
<div class="centerdiv">center</div>
<div class="rightdiv">right</div>
</div>
css
.container{
display: flex;
justify-content: space-between;
}
.leftdiv, .rightdiv{
flex-grow: 1;
background-color: red;
}
.centerdiv{
flex-grow: 2;
}
#media (max-width: 800px) {
.container{
flex-direction: column;
}
}
I'm very new at using Flexbox and not sure it will solve my problem.
I have a layout of a 940px width with 3 columns # 300px each (required). On medium to large screens, the first row contains 2 columns (one column # 600px) and the third column (300px) containing two div stacked vertically. On small screens I need the 600px div to reflow full width, with the 300px divs to reflowing horizontally (side-by-side) on the next row. On smallest screens, I need all to stack vertically. I know there are ways I can do this using floats, but then I run into multiple specialty classes and I want to use reusable css class rules due to javascript for...each statements written by other developers. Therefore, I'm wondering if flexbox could provide me with a responsive solution using reusable classes for the divs that will repeat. Here's what I have so far.
HTML
<div class="container">
<div class="content">
<div class="row">
<div class="flex-container">
<div class="flex-item flex-item--1">1</div>
<div class="flex-container-inner">
<div class="flex-item flex-item--2">2</div>
<div class="flex-item flex-item--3">3</div>
</div>
</div>
</div>
<div class="row">
<div class="flex-container">
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
</div>
</div>
</div>
CSS
.container {
width: 960px;
margin: 0 auto;
}
.content {
width: 940px;
margin-left: 10px;
margin-right: 10px;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
background: #abc;
width: 300px;
height: 150px;
margin-top: 20px;
color: blue;
font-size: 2em;
}
.flex-item--1 {
width: 600px;
margin-left: 0;
}
.flex-item--2 {
height: 75px;
}
.flex-item--3 {
height: 55px;
}
#media screen and (min-width: 320px) and (max-width: 767px)
{
}
#media screen and (min-width: 768px) and (max-width: 959px) {
.flex-item--1 {
flex: 2 0px;
}
.flex-item--2 {
order: 1;
}
.flex-item--1 {
order: 2;
}
.flex-item--3 {
order: 3;
}
}
#media screen and (min-width: 959px) and (max-width: 1023px) {}
#media screen and (min-width: 1024px) {}
This is what I need it to look like on resize 768px - 959px.
CODEPEN Example
UPDATE
Here is the full layout at various screensizes. I misunderstand Flexbox, I thought the divs would flow responsively if I added more, but they are not. I also replaced li with divs. Will I need to use a lot of media queries to target these to reflow responsively as pictured below:
Okay, I think I have it this time.
Notes of explanation:
I set your workspace to box-sizing: border-box. This automatically deducts margins so you don't have to manually set .content { width: [container minus margins] }.
I restructured your media queries so that your "base" design was for the smallest screen and you go up from there. Most tutorials say this is best practice, and it's what's most straightforward for me. This shouldn't be too hard for you to change if you don't like it. On a related note, I got rid of all your and (max-width: [whatever]) queries because it's redundant without a specific reason.
I'm not very good with the prefixes/alternate syntax (the -webkit- and whatnot) so I just left those out lest I steer you wrong. They're pretty easy to add in.
I used % for all the widths so that it would be easier to see the logic/relationships at a glance. I also consider this better for media queries since there are a lot of screen size variations particularly in mobile. But that's pretty easy to adjust with your specific values.
http://codepen.io/anon/pen/zNpgpJ
I have a responsive website with a two-column layout in large browser windows. The two-column layout is currently implemented using float. On smaller screens I'd like to have just one column. The content of the other column should be displayed between the two elements of the main column, like shown here:
<div class="two-columns">
<div class="main-column">
<div class="red-element"></div>
<div class="yellow-element"></div>
</div>
<div class="sidebar-column">
<div class="green-element"></div>
</div>
</div>
I tried using a flex-box-based approach, basically the one described in this question, but flex-basis still seems to be unsupported in Safari when flex-direction is column. Proper Safari support is a must as Safari is the main browser of my visitors.
Is there a way this can be achieved using CSS only without having to place the green element twice in my markup?
Here's a general solution using one flex container:
<div class="container">
<div class="box"> ... </div><!-- red box -->
<div class="box"> ... </div><!-- green box -->
<div class="box"> ... </div><!-- yellow box -->
</div>
Starting with small screens (for no particular reason), stack them in a column:
.container {
display: flex;
flex-direction: column;
}
.box {
height: 100px;
width: 100%;
}
Re-arrange the layout for wider screens:
#media (min-width: 800px) {
.container {
flex-direction: row;
flex-wrap: wrap;
}
.box {
flex-basis: 45%;
}
}
On screens wider than 800px, the container lines the items in a row and enables wrapping. Each box is given a large enough width (flex-basis) for only two to fit on a line.
Full demo:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
padding: 5px 0;
background-color: #f5f5f5;
border: 1px solid #aaa;
}
.box1 { background-color: red; }
.box2 { background-color: lightgreen; }
.box3 { background-color: yellow; }
.box {
height: 100px; /* `flex-basis: 100px` would also work */
width: calc(100% - 20px);
margin: 5px 10px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}
#media (min-width: 800px) {
.container {
flex-direction: row;
flex-wrap: wrap;
}
.box {
flex-basis: 45%;
}
}
<div class="container">
<div class="box box1"><span>1</span></div>
<div class="box box2"><span>2</span></div>
<div class="box box3"><span>3</span></div>
</div>
jsFiddle
From your question:
...but flex-basis still seems to be unsupported in Safari when flex-direction is column
I'm not sure this is correct (caniuse.com).
However, you can always use width or height properties instead of flex-basis (more details: What are the differences between flex-basis and width?).
Using Bootstrap,
<div class="row">
<div class="col-md-8">
<div class="red-element"></div>
</div>
<div class="col-md-4">
<div class="green-element"></div>
</div>
<div class="col-md-8">
<div class="yellow-element"></div>
</div>
<div class="clearfix"></div>
</div>
This uses float methods and works on all browsers.
you should using #media via margin-top.on specific screen width (via #media), change margin-top of the green-element to -200%. and change margin-top of yellow-element to 100%.they change their position very nice :)
please see this link:
http://jsbin.com/xozeviseka/edit?html,output
You need to change some html structure so then you can do this.
*,*:after,*:before {
box-sizing:border-box;
}
.two-columns {
position:relative;
background:#EFEFEF;
border:1px solid #000;
}
.red-element,
.green-element,
.yellow-element {
margin-bottom:30px;
}
.red-element {
height:70px;
background:#FF0004;
}
.green-element {
height:70px;
background:#7ED321;
}
.yellow-element {
height:100px;
background:#F8E71C;
}
#media (min-width:767px) {
.main-column {
width:70%;
padding:10px;
}
.sidebar-column {
position:absolute;
right:0;
top:0;
width:30%;
padding:10px;
}
}
<div class="two-columns">
<div class="main-column">
<div class="red-element"></div>
<div class="sidebar-column">
<div class="green-element"></div>
</div>
<div class="yellow-element"></div>
</div>
</div>
Or if you don't want to change html structure you have to take another element that only show in mobile for example
*,*:after,*:before {
box-sizing:border-box;
}
.two-columns {
background: #EFEFEF;
border: 1px solid #000;
overflow: hidden;
}
.red-element,
.green-element,
.yellow-element {
margin-bottom:30px;
}
.red-element {
height:70px;
background:#FF0004;
}
.green-element {
height:70px;
background:#7ED321;
}
.yellow-element {
height:100px;
background:#F8E71C;
}
.hideMobile{
display:none;
}
#media (min-width:767px) {
.main-column {
width: 70%;
float: left;
padding: 10px;
}
.sidebar-column {
float: right;
width: 30%;
padding: 10px;
}
.showMobile {
display:none;
}
.hideMobile {
display:block;
}
}
<div class="two-columns">
<div class="main-column">
<div class="red-element"></div>
<div class="green-element showMobile"></div><!--only for mobile-->
<div class="yellow-element"></div>
</div>
<div class="sidebar-column hideMobile"><!--hide in mobile-->
<div class="green-element"></div>
</div>
</div>
I'm facing a bootstrap problem.
In my html page, I used different containers but I'm not able to re-arrange and re-organize them as I want in mobile screens.
Here my Bootply.
And to be more clear, I want it to look like this:
Containers 1 and 5 are fluid, instead 2, 3, 4 are not.
How can I move container 1 and 2 after 3 and 4 in small screens?
Thank you in advance for your reply!
Cheers!
This is not possible without rearranging your content.
One way is to make two versions of the area you want to rearrange and hide them based on the width of the browser. This is bad practice, especially if you have a whole website you want to rearrange on resize, but for a small div with 5 divs inside it would be an acceptable solution.
Here is the adapted HTML
<div class="desktopwrapper"> <!-- added a desktop wrapper -->
<div class="container-fluid green"></div>
<div class="container red"></div>
<div class="container ">
<div class="row">
<div class="col-sm-8 yellow"></div>
<div class="col-sm-4 fuxia"></div>
</div>
</div>
<div class="container-fluid blue"></div>
</div>
<div class="mobilewrapper"> <!-- added a mobile wrapper and rearranged content -->
<div class="container ">
<div class="row">
<div class="col-sm-8 yellow"></div>
<div class="col-sm-4 fuxia"></div>
</div>
</div>
<div class="container-fluid green"></div>
<div class="container red"></div>
<div class="container-fluid blue"></div>
</div>
And I have added these lines to CSS:
#media screen and (max-width: 766px) {
.desktopwrapper {
display:none;
}
}
#media screen and (min-width: 767px) {
.mobilewrapper {
display:none;
}
}
What this basically does, is hide one arrangement when the screen gets resized to 766px wide and will display the other. And of course the other way around.
You can try it out here.
Another way would be to put everything in a wrapper, position the wrapper relative, all the divs inside absolute and just place them with using px. This is however really not useful when divs have changing heights depending on the content. The best way would be to do like the example I have.
flexbox proof of concept.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
color: white;
text-align: center;
}
body {
height: 100%;
}
h2 {
display: inline-block;
background: #000;
padding: .25em;
}
.page {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
flex: 0 0 75px;
background: darkgreen;
}
.banner {
flex: 0 0 100px;
width: 80%;
margin: auto;
background: darkred;
}
main {
flex: 1;
width: 80%;
margin: auto;
display: flex;
}
.content {
width: 75%;
background: yellow;
}
aside {
width: 25%;
background: fuchsia;
}
footer {
flex: 0 0 100px;
background: lightblue;
}
#media screen and (max-width: 768px) {
.banner,
main {
width: 100%;
}
main {
flex-direction: column;
order: -1;
}
.content,
aside {
flex: 1;
width: 100%;
}
aside {
flex: 0 0 150px
}
}
<div class="page">
<header>
<h2>1</h2>
</header>
<div class="banner">
<h2>2</h2>
</div>
<main>
<div class="content">
<h2>3</h2>
</div>
<aside>
<h2>4</h2>
</aside>
</main>
<footer>
<h2>5</h2>
</footer>
</div>
Codepen Demo