I have a built a site for a New Zealand non-profit. It's based on Bootstrap 3 with responsive features disabled. It's working well... except for the way that the background images for outer divs display on mobile Safari.
Here is an example of the code:
<div class="top">
<div class="container">
<div class="row">
<div class="columns go here">
<p>Content</p>
</div>
</div>
</div>
</div>
.top {
height: 47px;
background-color: #000;
}
But when I view the site using mobile Safari the wrapper div (.top) does not appear to fill the full width of the screen.
Here's the site: http://betterbroadcasting.co.nz/
And here's a screengrab from mobile Safari: https://dl.dropboxusercontent.com/u/35912963/IMG_2746.PNG
I'd really appreciate any insight into what I may be doing wrong here. Thank you.
Do you have a meta viewport tag?
<meta name="viewport" content="width=device-width, initial-scale=1">
Otherwise experiment with changing min-width as suggested in this thread.
Related
What is the best way to keep page content centered without appearing too thin when viewed on mobile? This is using a centered single column layout.
When I view the following on a desktop, it achieves the desired look and spacing, but on mobile the content is constrained to too small an area and appears far too narrow.
<section id="copybox" class="pl-sm-1 pl-md-5 pr-sm-1 pr-md-5">
<div class="row justify-content-center">
<div class="col-7">
(Area consisting of multiple div's, paragraphs etc)
</div>
</div>
</section>
What can be done to resolve this?
You're using col-7 which is always going to take up 58.333% of the width of it's parent. Use a wider column (ie: col-10, col-11, col-12, etc...) on mobile.
<section id="copybox" class="pl-sm-1 pl-md-5 pr-sm-1 pr-md-5">
<div class="row justify-content-center">
<div class="col-sm-7 col-10 border">
(Area consisting of multiple div's, paragraphs etc)
</div>
</div>
</section>
Demo: https://www.codeply.com/go/ueIUlH19DB
Try to use wider columns as Zim suggested.
Also, make sure to have a viewport meta tag in html page
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
I am designing a web without meta viewport. I want to show my web on mobile as well as desktop.There is problem in the comperision of home(index) and inside page.Home page header and footer showing properly but on the inside page header showing good but not as well as home page and footer not showing properly in full width.Plz help me Thank you
there is problem only for mobile and tab
http://websum.in/prome/concepts.php
Please paste html code and css code other wise cannot full help you. And or your code show some example through codepen or jsfiddle I see you have not set any media queries for you need to set some media queries for mobile formats some where along those lines you should look into bootstrap to see how they are done.
I had a look in firebug on your website could not see any media queries
Example only
#media (max-width: 648px) {
.footercontainer {
width: 90%;
}
}
Edit: just realized you didn't say you use Twitter bootstrap. This example requires Twitter bootstrap, or you could fetch the Css classes from there.
What you could do is make sure the text blocks in the footer appear centered and underneath each other on mobile. Something like this:
<div class="footer">
<div class="row hidden-xs">
Desktop footer
</div>
<div class="row visible-xs">
<div class="col-xs-12 text-center">
Icons and stuff.
</div>
<div class="col-xs-12 text-center">
Copyright.
</div>
</div>
</div>
I have a bootstrap website that's setup statically, it doesn't adjust according to different view sizes. So I would like to make it responsive but not sure how. I'm also using LESS to do my modifications and such to the twitter bootstrap css. So far my site is set up like so..
<div id="wrapper">
<header>
<div class="container">
<div class="row">
<div class="span12">
<!-- LOGO HERE -->
</div>
</div>
</div>
</header>
<div id="main-content" class="container">
<div class="row">
<div class="span8">
<!-- My content -->
</div>
<div class="span4">
<!-- My content too -->
</div>
</div>
</div>
</div>
Also, the website was built for 940px so when I make it responsive I want to set the maximum veiw of the page to 940px instead of 1200px and have my div.wrapper still in the center of the page.
Hopefully all this makes sence haha.
To turn on responsive layout, you need to add the following code in the <head> of your document:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
You'll have to adjust your reference to the stylesheet to your specific structure, since you're using the .less source.
In responsive.less comment out or delete the following line:
#import "responsive-1200px-min.less";
This will respond to smaller screen resolutions, but keep your maximum .container width at 940px.
Change .container to .container-fluid and .row to .row-fluid. Take a look at this: http://jsfiddle.net/ypkJQ/. You have to also remember that every .row-fluid class resets span* width counter, that is span* width under .row-fluid is taken from percentage width of parent(.row-fluid).
i have this example layout using twitter bootstrap:
<div class="container">
<div class="row">
<div class="span8">
<h1> Hello MOBLE WORLD</h1>
</div>
</div>
</div>
they all look the same in all device.
when i put the meta viewport on the section
<meta name="viewport" content="width=device-width, initial-scale=1.0">
on the iphone it looks well different almost as if its cut in half(horrible), i want to know why that happens and what changes and does margins or padding have to do anything with it. thanks
What you want to do is use the fluid grid which basically means using a class of row-fluid instead of row on the wrapper.
I have a couple other pages on the website that have no problems with resizing to height using overflow auto.
The thing I have noticed is the pages work fine with one div. The page that is not working has two or more div and also I have tried it with a container but I still get the vertical and horizontal scroll bars.
<div class="content">
<div class="container">
<div class="a">
<div class="left">List Items</div>
<div class="right">List Items</div>
</div>
<div class="b">
This div is a FORM.
</div>
</div>
</div>
When a css works in other browsers but not in IE9, chance is that your header isn't correct. Check with this one :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
made an IE only style sheet and changed the .content to overflow: hidden. also took the width off of a couple of classes to make the content fit correctly as it does already in other browsers.