Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Removing divs from xs responsive site

Using Twitter Bootstrap 3

8:40 pm on Apr 11, 2014 (gmt 0)

New User

joined:Apr 11, 2014
posts: 1
votes: 0

Hi all

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

<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>
<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 class="row text-center visible-xs">
<div class="col-sm-12"><img src="img/logo.png" alt="" class="responsive"></div>
<div class="blackback img-rounded">
<div class="content">
<div class="col-sm-12">
<div class="content">
<div class="col-sm-9">
<p class="lead">Subtitle</p>

<p>Some content here</p>
<div class="col-sm-3"><img src="img/splash-img.png" class="img-responsive hidden-xs img-border" alt="Side pic"></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 class="footer container">
<div class="col-sm-12"><p>&nbsp;</p>
<div class="footer container">
<div class="col-sm-12">
<p class="text-center small text-muted">Copyright 2014</p>

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


.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;
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?

3:46 am on Apr 12, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
votes: 83

Hi Andy, welcome to the forums, I have read through the page and css you have posted, but there seems to be a lot of css not included. I am not a user of Bootstrap so maybe they have tools that deal with it some other way. It is hard to figure out a problem without knowing what parameters you have for some of these elements to see what is giving you trouble.

I see that your page references 3 css files, maybe one of those files could help shed some light. I don't know that very many people try to view sites on iPhone in portrait mode, mostly because of unresponsive sites you eventually develop the habit of not trying. Or maybe that's just me.

I'm hoping that other Bootstrap users can give you more useful help, it seems to be popular.