Removing divs from xs responsive site

Hi all

I'm developing a responsive site using Twitter Bootstrap, here is a summary of my coding:


<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="" />
<meta name="author" content="">
<meta name="keywords" content="" />
<!-- Optimized mobile viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<!-- CSS -->
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/custom.css" />
<!-- HTML5 IE Enabling Script -->
<!--[if lt IE 9]><script src="libs/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="background">
<!--Centralize the grid-->
<div class="container">
<div class="whiteback img-rounded">
<div class="content hidden-xs">
<div class="col-sm-6"><img src="img/logo1.png" alt=""></div>
<div class="col-sm-6"><img src="img/logo2.png" alt="" class="pull-right img-responsive"></div>
</div>
<div class="row text-center visible-xs">
<div class="col-sm-12"><img src="img/logo.png" alt="" class="responsive"></div>
</div>
<div class="blackback img-rounded">
<div class="content">
<div class="col-sm-12">
<h1>Title</h1>
</div>
</div>
<div class="content">
<div class="col-sm-9">
<p class="lead">Subtitle</p>

<p>Some content here</p>
</div>
<div class="col-sm-3"><img src="img/splash-img.png" class="img-responsive hidden-xs img-border" alt="Side pic"></div>
</div>
<div class="content buttonrow">
<div class="col-sm-3"><button type="button" class="btn btn-lg btn-block">Exit</button></div>
<div class="col-sm-3"><button type="button" class="btn btn-lg btn-block">Enter</button></div>
<div class="col-sm-6"><p>&nbsp;</p></div>
</div>
<div class="footer container">
<div class="col-sm-12"><p>&nbsp;</p>
</div>
</div>
</div>
</div> 
<div class="footer container">
<div class="col-sm-12">
<p class="text-center small text-muted">Copyright © 2014</p>
</div>
</div>
</div>
</body>
</html>


.background {
background-image: url(back-bg.jpg);
}

body
{
background:url(back-bg.jpg);
background-repeat:repeat;
background-color:green;
} 

.whiteback {
background-color: white;
padding-bottom: 5px;
margin-top: 10px;
margin-bottom: 10px;
}

.blackback {
background-color: black;
margin: 10px;
margin-bottom: 10px;
padding-top: 10px;
}

.content {
padding-bottom: 100px;
color: white;
}

.buttonrow {
padding-top: 40px;
padding-bottom: 70px;
clear: both;
}

p {
color: white;
}

.footer {
color: #D3D3D3;
}

.btn-block {
color: black;
background-color: #9ACD32;
margin-bottom: 3px;
}

.text-muted a {
color: #808080;
}

.img-border {
background: #A9A9A9;
border:2px solid;
border-radius:25px;
margin-bottom: 25px;
}

This puts a patterned background to the site, with a white content area, and a smaller black main content area. This looks fine on large and medium devices, and iPhone landscape. However, when viewed on an iPhone portrait, the main content appears very narrow, due to the white div then the back div.

What I would like is for the main content to appear on the black background filling the whole width of the iPhone in portrait orientation, and not to have the patterned background or white div in this aspect.

I have tried to not display the white div in xs, but this has the effect of not displaying any of the content.

Could anyone help please?

Thanks!
Andy

Removing divs from xs responsive site

Using Twitter Bootstrap 3

andymcr

not2easy

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week