Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Apr 2014
    Posts
    1
    Member #
    38951

    Removing divs from xs responsive site using Twitter Bootstrap

    Hi all

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

    HTML Code:
    <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>

    Code:
    .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

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You'll need an orientation media query.
    Code:
    @media (orientation:portrait){
    //styles here
    }
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:23 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com