Responsive design content min width?

HTML & CSS
1

How to hide portion of the right side from all resolutions and then only show it when resolution is 1280x768 from responsive design

2

Hi,

The question is a bit vague but you can hide content by using a media query and setting the element in question to display:none.

e.g. The sidebar here will only show at 1280px or wider.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrapper {
	max-width:1600px;
	margin:auto;
	display:table;
	width:100%;
	border-spacing:20px;
}
.tc {
	display:table-cell;
	vertical-align:top;
	background:#f9f9f9;
	padding:10px;
}
.sidebar {
	width:200px;
	display:none;
}
@media screen and (min-width:1280px) {
.sidebar {
	width:200px;
	display:table-cell
}
}
</style>
</head>

<body>
<div class="wrapper">
		<div class="tc">
				<h1>Main content</h1>
				<p>Lorem ipsum</p>
				<p>Lorem ipsum</p>
				<p>Lorem ipsum</p>
				<p>Lorem ipsum</p>
				<p>Lorem ipsum</p>
				<p>Lorem ipsum</p>
		</div>
		<div class="tc sidebar">
				<h2>sidebar</h2>
				<p>Lorem ipsum</p>
				<p>Lorem ipsum</p>
		</div>
</div>
</body>
</html>

If that doesn’t answer your question then we will need more specific detail or a link to the page in question.

1 Like
3

That is so easy thanks so much

4

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