CMSimple-XH

CMSimple_XH Template Tutorial

Visitor Statistics
» 1 Online
» 4 Today
» 1 Yesterday
» 5 Week
» 18 Month
» 324 Year
» 474 Total
Record: 35 (09.11.2018)

Prepare for responsivity

Thinking of responsivity,  means to count also devices on which browsing the epage makes no sense. For such situation a warning is reasonable. Place e.g. following block just before the closing BODY tag.

template.htm

...
<div class="small-display">
	<p>YOUR DISPLAY HAS</p>
	<p>SMALL RESOLUTION</p>
	<p>MINIMAL 320px</p>
	<p>IS REQUIRED</p>
</div>
</body>
</html>

 

 

stylesheet.css

...
/*** step 8 ***/
/*** responsivity ***/
.page-wrapper{
	display: block;
}
.small-display{
	height: 100vh;
	padding-top: 1rem;
	font-size: 1.5rem;
	background: #444;
	color: white;
	text-align: center;
	display: none;
}

/* breakpoints */
@media (max-width: 319px){
	.page-wrapper, .alt-nav{display: none;}
	.small-display{display: block;}
}
@media (min-width: 320px) and (max-width: 640px){
	.alt-nav{display: block;}
	.navigation{display: none;}
	.top-container{padding-top: 30px;}
	.logo, .languagemenu, .sitename, .locator, .searchbox, .content, .news, .box{width: 100%; }
	.logo, .languagemenu, .sitename, .locator, .searchbox, .footer-container{text-align: center;}
	.logo{display:table-cell; vertical-align:middle; text-align:center"}
}
@media (min-width: 641px) and (max-width: 900px){
	.alt-nav{display: block;}
	.navigation{display: none;}
	.top-container{padding-top: 30px;}
	.logo, .languagemenu, .sitename, .locator, .searchbox, .content, .news, .box{width: 100%; }
	.logo, .languagemenu, .sitename, .locator, .searchbox, .footer-container{text-align: center;}
	.news{width: 100%;}
	.box{width: 50%; float:left;}
}
@media (min-width:901px) and (max-width: 1024px) {
	.alt-nav{display:none;}
	.locator{width: 70%;}
	.searchbox{width: 30%;}
	.navigation{width: 30%;}
	.content{width: 70%;}
	.news{width: 100%;}
	.box{width: 50%; float:left;}
}
@media (min-width: 1025px) {
	.alt-nav{display:none;}
	.locator{width: 70%;}
	.searchbox{width: 30%;}
	.navigation{width: 25%;}
	.content{width: 50%;}
	.news{width: 25%;}
	.box{width: 100%;}
}

 

 

PREVIEW

 

top
YOUR DISPLAY HAS
SMALL RESOLUTION
MINIMAL 320px
IS REQUIRED