When shrink div box, tutorial?

Hi guys,

Can you point me to a good tutorial URL.
When two div boxes horizontally shrunk thru smartphone it should look like this below image,
http://www.callatradey.com.au/images/boxes-responsive.jpg

Thanks in advance.

Not a tutorial, but these recent threads may help:

After you have read the links that Technobear gave then you can try these two solution.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<!-- must have viewport meta tag for mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/*/
html {box-sizing: border-box;}
*, *:before, *:after {
  box-sizing: inherit;
}

.box{
	width:50%;
	float:left;
	border:1px solid #000;
	margin:0 0 10px;	
	background:red;
	min-height:100px;
}
.box + .box{background:blue}
@media screen and (max-width:768px) {
	.box{width:auto;float:none;}	
}

</style>

</head>

<body>
<div class="box">Box1</div>
<div class="box">Box2</div>

</body>
</html>

Example 2:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<!-- must have viewport meta tag for mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/*/
html {box-sizing: border-box;}
*, *:before, *:after {
  box-sizing: inherit;
}

.wrap{
	display:table;
	table-layout:fixed;
	width:100%;
	height:400px;
	margin:0 0 10px;
}
.box{
	width:50%;
	border:1px solid #000;
	display:table-cell;
	vertical-align:top;
	background:green;
}
.box + .box{background:blue}
@media screen and (max-width:768px) {
	.box{width:auto;display:block;min-height:400px;margin:0 0 10px}	
}

</style>

</head>

<body>
<div class="wrap">
	<div class="box">Box1</div>
	<div class="box">Box2</div>
</div>
</body>
</html>

The first example uses floats for the boxes and the second example uses display:table and table-cell to achieve automatic equal heights.

They both use a media query set at a point where you want the columns to change into one column. This is an arbitrary point that should be adjusted to suit the design in question.

@media screen and (max-width:768px) {
}

For example if you had two fixed width boxes of 400px then you would need to set the media query at 799px and remove the floats (or whatever other properties had been set) to achieve the layout you want.

A more advanced way would be to use flexbox to do this and would not require media queries.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<!-- must have viewport meta tag for mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/*/
html {box-sizing: border-box;}
*, *:before, *:after {
  box-sizing: inherit;
}

.wrap{
	display:flex;
 justify-content: space-between;
 flex-wrap:wrap;
}
.box{
	width:400px;
	border:1px solid #000;
	margin:0 0 10px;
	background:green;
}
.box + .box{background:blue}
}

</style>

</head>

<body>
<div class="wrap">
	<div class="box">Box1</div>
	<div class="box">Box2</div>
</div>
</body>
</html>
1 Like

Thanks guys will read them…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.