homepage Welcome to WebmasterWorld Guest from 54.211.157.103
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
Forum Library, Charter, Moderators: not2easy

Mobile Web Site Design and Development Forum

    
Removing divs from xs responsive site
Using Twitter Bootstrap 3
andymcr




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

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

 

not2easy




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved