CODEWITHSUNDEEP
csshtml
espresso_coffee
espresso_coffee

Reputation: 6110

How to adjust div elements width for different screen size?

I'm working on SPA and I tried to avoid using tables for non tabular data. On my main page I have set of elements and I need them to be in side-by-side order. For this I used class: 

div.nextTo {
    display: inline-block;
    margin-left: 5px;
}

This looks fine and works on the big screen. Once I resized my browser or if I open my app on Mobile device my elements are sitting over each other. I also set the width in percentage for each element and seems that doesn't adjust on the different screen size. Here is example:

div.pgContainer {
	width: 100%;
	height: 100%;
	font-family: Arial;
	font-size: 12px;
	box-sizing: border-box;
	padding: 5px 10px 5px 10px;
}
div.headerBox {
	width: 100%;
	border-top: 2px solid #000099;
	border-right: 2px solid #000099;
	border-left: 2px solid #000099;
	height: 25px;
	background-color: #000099;
}
div.headerBox span {
	font-weight: bold;
	color: white;
	font-size: 16px;
}
section.mainBox{
	width: 100%;
	padding-top: 0;
	float: left;
	background-color: white;
	border: 2px solid #000099;
}
nav.xNavigation {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-top: 2px;
	margin-bottom: 5px;
	background-color: #c8e2db;
	float: left;
	border-bottom: 2px solid #000099;
	height: 18px;
}
nav.xNavigation a {
	color: black;
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
}
nav.xNavigation a:hover {
	color: #999999;
}
div.nextTo {
	display: inline-block;
	margin-left: 5px;
}
<div class="pgContainer">
		<div class="headerBox">
			<div style="float:left; margin-left:5px;">
				<span>My App</span>
			</div>
			<div style="float:right; margin-right:5px; margin-top:2px;">
				<span>Choose:
					<select name="hmMenu" id="hmMenu">
						<option value="mainBox" selected="selected">Home</option>
						<option value="settingsBox">Settings</option>
					</select>
				</span>
			</div>
		</div>
		<section class="mainBox">
			<div id="frmContainer">
				<nav class="xNavigation">
					<a href="#" id="chDemo">Demographic</a> |
					<a href="#" id="adInfo">Adult</a> |
				</nav>
				<form name="searchForm" id="searchForm" action="hmHome.cfm" method="POST" onsubmit="return false">
					<div class="nextTo" style="width:5%;">
						<select name="studMenu" id="studMenu">
							<option value="1">Name</option>
							<option value="2">DOB</option>
							<option value="3">Age</option>
							<option value="4">State</option>
						</select>
					</div>
					<div class="nextTo" style="width:10%;">
						<input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: John, Miller" />
					</div>
					<div class="nextTo" style="width:5%;">
						<input type="button" name="searchBtn" id="searchBtn" value="Search"/>
					</div>
					<div class="nextTo" style="width:30%;">
						<span id="searchMsg" style="display:none;"></span>
					</div>
				</form>
			</div>
		</section>
</div>

I'm wondering what is the best way to make my container adjustable for different screen size? Also what I should use for that in order to work on all browsers? If anyone knows how this can be achived please let me know. Thank you!

Upvotes: 0

Views: 274

Answers (2)

Rounin
Rounin

Reputation: 29453

You can declare width using a responsive unit like vw.

1vw is 1% of the viewport width.

So, if you wanted five elements to span the width of the viewport, you could style the elements something like this:

div {
    width: 18vw;
    margin: 1vw;
}

Upvotes: 0

Julio Feferman
Julio Feferman

Reputation: 2676

You could use @media css rule and define different style attributes depending on the viewport size. Please see this reference. @media browser compatibility can be verified here.

Upvotes: 1

Related Questions