How to change Div element for Mobile without using bootstrap?

HTML & CSS
1

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Layout</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
* {
	padding: 0; margin: 0;	
}
html {
	height: 100.1&#37;;	
}
#content1 {
	float: left;
	width: 25%;
	background-color: #DDD;
}
#content2 {
	float: left;
	width: 25%;
	background-color: #CCC;
}

#content3 {
	float: left;
	width: 25%;
	background-color: #CCC;
}

#content4 {
	float: left;
	width: 25%;
	background-color: #CCC;
}
</style>
</head>
<body>
	<div id="content1">content 1</div>
	<div id="content2">content 2</div>
	<div id="content3">content 3</div>
	<div id="content4">content 4</div>
</body>
</html>

System view like,

| Content 1 | content 2 | content 3 | content 4 |

how to change the view in mobile like,

| Content 1 | Content 2 |

| Content 3 | Content 4 |

2

Hi there

What you are looking for is media queries.

1 Like
3

Use a current html5 doctype or a strict doctype as the one you are using is from last century and may put browsers in quirks mode.

Also consider using flexbox rather than floats as layouts with flexbox are more robust and easier to organise.

Typo alert :slight_smile:

2 Likes
4

…And don’t forget the viewport meta tag.

A basic flex example with no queries.

The flex-basis (third parameter for flex) controls when the containers wrap.

3 Likes
5

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