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.
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 have a Wordpress template that uses Bootstrap 2.3.1.
I currently have my two areas set up via an SPAN4 and SPAN8.
The resolution is locked at 1170px, therefore the lg component of Bootstrap is not needed to be configured.
I would like some help with the areas shown in red, as to how to configure my nested columns, so they work properly. They are within an area already defined as Span 8, so in effect, it is an 8 wide grid that needs to be configured to show 3 columns on medium devices, 2 columns on small devices and 1 column on the extra small devices.
I am relatively new to CSS, but have some understanding of basic coding, it's just doing my head in at the moment.
The attached picture show what I am after
My Wordpress layout
I can't seem to get any bootstrap to work with the sizes I would like to display.
I suggest you to use bootstrap version 3
http://getbootstrap.com/css/#grid-responsive-resets
unlike version 2, it has classes like col-lg-* col-md-* col-sm-* col-xs-*, which can get your job done more easily.
trying to understanding your problem.
try the demo code below to see if it's the layout you want
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap#3.3.7/dist/css/bootstrap.css">
<style>
.b {
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">aside</div>
<div class="col-xs-8">
main
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the code I am using:
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<title>Column Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2">a</div>
<div class="col-md-2">b</div>
<div class="col-md-2">c</div>
<div class="col-md-2">d</div>
<div class="col-md-2">e</div>
<div class="col-md-2">f</div>
</div>
<div class="row">
<div class="col-md-2">g</div>
<div class="col-md-2">h</div>
<div class="col-md-2">i</div>
<div class="col-md-2">j</div>
<div class="col-md-2">k</div>
<div class="col-md-2">l</div>
</div>
</div>
</body>
</html>
The code inside the body tags was taken from some website as an example of the Bootstrap grid system. It works when pasted into w3school's try it yourself editor for bootstrap. When I try to run the entire html file in Chrome, however, the row elements are all stacked vertically. Is there something fundamentally wrong with the syntax in some other part of the html file? Or is there something about the syntax of bootstrap's grid system itself that I'm missing?
A similar question was asked about a year ago: Columns in bootstrap 3.0 only stacking vertically
This single answer to this question has to do with switching md with xs, but I am using a 13 inch MacBook Pro, so md should do the trick. Anyway, I already have tried using the different sized col classes, so this is clearly not the problem.
Use span[#of columns] instead of col-md-[#of columns].
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.
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).