I'm trying to create a layout with 3 columns when over 1440px, and two columns from 800px to 1440px - the media queries I've got are working fine, however the problem is trying to get the cols to align vertically:
Screen shot http://pichut.eu/x/Screen_Shot_2013-10-13_at_10.png
As you can see the third col when collapsed aligns left, however it sits bellow the end of the first column, but I would prefer if it were aligned with the bottom of the first! (make sense? :L)
Here's the HTML for the cols:
<div class="dyn-col">
<div class="widget">
<div class="widget-title">
Widget Title
</div>
<div class="widget-content">
Widget Contents
</div>
</div>
</div>
<div class="dyn-col">
<div class="widget">
<div class="widget-title">
Widget Title
</div>
<div class="widget-content">
Widget Contents
</div>
</div>
</div>
<div class="dyn-col">
<div class="widget">
<div class="widget-title">
Widget Title
</div>
<div class="widget-content">
Widget Contents
</div>
</div>
</div>
And here's the CSS i've got for the page...
/*=================================================
Dynamic Cols
=================================================*/
.dyn-col {
width: 100%;
display: block;
float: left;
-webkit-box-sizing: border-box;
box-sizing: border-box
-moz-box-sizing: border-box
}
#media screen and (max-width: 800px) {
.dyn-col {
width: 100% !important;
}
}
#media screen and (min-width: 801px) and (max-width: 1439px) {
.dyn-col {
width: 50% !important;
float: left;
}
.dyn-col:last-child {
}
}
#media screen and (min-width: 1440px) {
.dyn-col {
width: 33.3% !important;
}
}
Would recommend using bootstrap 3 makes life easier when doing stuff like that I use it alot.
Related
How do I create a responsive two column layout using divs instead of tables?
The left div will have text and a call to action. The right div will have an image or is it better to have a transparent background and a png image?
I want both divs to be aligned and responsive. The divs should also stack on top of each other at different screen resolutions.
Below is what I've done so far. It's not perfect. Is there a way of cleaning this up so that I don't run into issues across multiple browsers.
Thank you.
<style type="text/css">*{
box-sizing: border-box;
padding: 10px;
}
.column {
float: left;
width: 300px;
}
.center {
padding: 50px 0;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
</style>
<div class="row">
<div class="column" style="background-color:#e0e620;">
<div class="center">
<p style="font-size:18px; ">The Information is now available as an audiobook.<br />
<a class="link-button-green" href="" title="Info guide">Listen now</a></p>
</div>
</div>
<div class="column" style="background-color:#E5E5E5;">
<img src="https://www.w3schools.com/css/img_forest.jpg">
</div>
You can use flex instead of float to put the columns next to each other. In your #media query, you can remove flex for smaller screens so that the columns are displayed under each other.
The image width should be 100% of the flex column. The CSS doesn't have to be inline.
HTML
<div class="row">
<div class="column left">
<div>The Information is now available as an audiobook.<br />
<a class="link-button-green" href="" title="Info guide">Listen now</a>
</div>
</div>
<div class="column right" >
<img src="https://www.w3schools.com/css/img_forest.jpg">
</div>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.row {
display: flex;
}
.column {
flex:1;
}
.left {
background-color:#e0e620;
padding:20px;
}
.right {
background-color:#E5E5E5;
}
img {
width:100%;
}
#media screen and (max-width: 400px) {
.row {
width: 100vw;
display:block;
}
}
See this jsfiddle: https://jsfiddle.net/tLubao5d/1/
I am trying to build my UI using Bootstrap. I am trying to set 3 divs in one row next to each other for medium and large screens. And for
under 768px I would like to place them one under another.
file.html
<section className="about" id="about">
<div className="container-fluid">
<div className="row boxes justify-content-md-center">
<div className="col-sm-12 col-md-4 box">
<div className="innerBox">
<div className="icons">
<img src={iconEducation} className="img-responsive" />
</div>
<div className="box-body">
<h3 className="box-title">Title </h3>
<div className="box-list">
<div className="box-list-items">
<div className="item-ul"><img src={dot} className="img-responsive" /></div>
<div>
<p>Text</p>
</div>
</div>
<div className="box-list-items">
<div><img src={dot} className="img-responsive" /></div>
<div className="item-ul">
<p>Text</p>
</div>
</div>
</div>
</div>
</div>
</div>
The HTML code is the same for all three divs.
Problem
On large and medium screens I have two divs in one row and a third underneath in new row. For tablet screens the divs do not flow one under another but are still in the same row. The layout I want is two in one row and the third underneath.
file.css
.about{
padding: 127px 0 196px 0;
}
.about .row.boxes >div{
margin: 0 20px 0 20px;
}
.about .box{
height: 550px;
width: 100%;
background-image: linear-gradient(144deg, #fdfdfd, #f9f9f9);
}
.about .innerBox{
margin: auto;
color: black;
width: 100%;
overflow: hidden;
}
.box-list-items > div {
display: inline-block;
}
.box-list-items img {
height: 35%;
width: 35%;
}
.icons {
height: 95px;
width: 95px;
float: right;
margin: 7% 5% 5% 0;
}
.icons img {
width: 100%;
height: 100%;
}
h3.box-title{
font-size: 2.7em;
}
As I was going through the Bootstrap docs I thought that naming the class as .col-md-4 would align my divs for above 768px in same row one next to each other and underneath would place them in kind of display: box view.
theres is no use of #media only screen and all ,this will work:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">abc</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">xyz</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">123</div>
</div>
</div>
you can check:
https://jsfiddle.net/bfos8ttd/
you need to put all the code in file.html in side a div with class row and test it again.
Go to this Link for bootstrap columns (col-lg-4, col-md-4, col-sm-6, col-xs-12)
And follow these media query as per your device.
#media only screen and (min-width:1024px) and (max-width: 1200px) {
}
#media only screen and (min-width:992px) and (max-width: 1023px) {
}
#media only screen and (min-width:768px) and (max-width: 991px) {
}
#media only screen and ( max-width: 767px ) {
}
#media only screen and ( max-width: 479px ) {
}
#user9347049 This wouldn't fit in the comments, so I'm putting it here for clarity.
Your container-fluid lets you use the entire width of the screen, but it's still just a container, that contains your rows and columns. You create rows, then, you add columns. As in:
<div class="container"> <!-- you can change this class to container-fluid class if you like -->
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
You can only have one container class. The row div contains all your cols divs for that row. You can have as many rows of columns as you need. If you adapt you code, you should start getting some of the results you're looking for before you look at the media query side of it.
As you can see bottom I've two div inline/columbs (one-half - left of page, one half last - right of page). My goal is to float the 2° div (one half last) over the first when the page is resized.
Basically I want that the 1° div collapse under the 2°. Is there a way to do this?
The trouble is that I can only obtain the float left of 2° div under the 1°.
Advices?
<div>
<div class="one-half">
<h2>Title</h2>
<p style="text-align: justify;">Text</p>
<p style="text-align: justify;">Text.</p>
<p style="text-align: justify;">Text.</p>
</div>
<div class="one-half last">
<img src="#" class="shadow" alt="#" style="max-width: 455px;width: 100%;">
</div>
<div class="clearfix"></div>
</div>
.one-half {
width: 460px;
}
.last {
float: left;
}
Pure css and html way : for page resize detection, use media queries
#media screen and (max-device-width: 600px) {
.one-half {
display: none;
}
.last {
float: left;
}
}
EDIT
considering the comment, update css to
#media screen and (max-device-width: 600px) {
.one-half {
float:left;
}
.last {
float: left;
clear: left;
}
}
I am trying to center content of columns in bootstrap 3 using cs like this:
.row{
padding: 40px 0px;
width: 100%;
min-height: 100%;
display:table;
height: 100%;
position:relative;
}
#media (min-width: 1200px)
{
.col-lg-6,
.col-lg-4,
.col-lg-8 {
display: table-cell;
vertical-align:middle;
float: none;
}
}
#media (min-width: 992px)
{
.col-md-6,
.col-md-4,
.col-md-8 {
float: none;
display: table-cell;
vertical-align:middle;
}
}
HTML
<div class="fill">
<div class="row" id="section-0">
<div class="col-lg-6 col-md-6">
<h1>Webtoaster</h1>
<p>some text </p>
</div>
<div class="col-lg-6 col-md-6">
<img src="img/koko.png" class="img-responsive" alt="Responsive image">
</div>
</div>
<div class="row" id="section-1">
<div class="col-lg-4">
<h1>Heading</h1>
<p>some text</p>
</div>
<div class="col-lg-8"><img src="img/fista.png" class="img-responsive" >
</div>
</div>
The above code does center vertically but in Firefox my image is not responsive anymore, and does not scale on resizing window.
It does resize in chrome and Safari however when i resize to a very small screen it does not put the image underneath the text. This problem is caused by float: none; if I comment it all responsiveness works well.
Example of page here: http://jajko.byethost16.com
Please help
Like Adam said, don't modify grid. Just place a div inside your col div and give to it display: table, height: 100% and inside that place another div with display: table-cell and vertical-align: middle.
I have a webpage with 2 columns with a width of 50% and a minimum width of 500px. Now what I want to know is how to get them to resize so that when the 2nd column repositions to underneath the first, the first column resizes to fill the entire page. I can't get my head around it and any help would be much appreciated. Below is the basic code:
html:
<div class="column">
<div id="item-1">
##
</div>
</div>
<div class="column">
<div id="item-2">
##
</div>
</div>
css:
.column{
width:50%;
min-width:500px;
float:left;
}
CSS3 media queries
#media screen and (max-width: 1000px) {
.column { width: 100%; float: none; }
}
Tweak that and you should get what you want.
You can do that with a media query:
#media all and (max-width:1000px) {
.column {width:100%;}
}