I used the Zurb Foundation Framework to create a website on an HP Envy X2 PC Laptop with a 1366 x 768 32 bit screen resolution. My code works fine when opened on computers with larger screens, but when I tried my website on a smaller netbook screen, the main content (excluding the banner and footer) became squished. By squished, I mean that instead of the content spanning the screen in 3 neat columns, the words and images were set in a vertical display with each being put underneath the one before it.
I was under the impression that the Zurb Foundation Framework is designed to work on all devices, big and small. I am mistaken?
I didn't touch the CSS aside from changing my html {background-image} and a:hover {color} so I'm curious as to how it would fail on smaller screen resolutions.
I tried the Zurb Foundation Forums, but that place dead, just filled with questions that float around never to be answered.
If anyone knows why I could be experiencing smaller screen problems, I would appreciate any answers.
The problems you are experiencing are by design. Looking at the docs for Foundation Grid we see that there are classes that tell the grid how to respond to certain screen sizes .small-*, .medium-*, .large-* (where * is the number of cells the element should span).
Following this convention, if we wanted 3 columns on a large and small screen we would need the markup to look as follows:
<div class="row">
<div class="columns small-4 large-4 panel">
<h3>One</h3>
</div>
<div class="columns small-4 large-4 panel">
<h3>Two</h3>
</div>
<div class="columns small-4 large-4 panel">
<h3>Three</h3>
</div>
</div>
specifying the class small-* makes sure the column will adhere to the specified size when the screen is "small".
In short, make sure you add the class .small-* to your columns if you want them to adhere to a specific width on smaller screen sizes.
Edit
Here is a snippet showing the differences
<html>
<head>
<title>Foundation Grid</title>
<link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet" />
</head>
<body>
<h1>Without ".small-"</h1>
<div class="row">
<div class="columns large-4 panel">
<h3>One</h3>
</div>
<div class="columns large-4 panel">
<h3>Two</h3>
</div>
<div class="columns large-4 panel">
<h3>Three</h3>
</div>
</div>
<h1>With ".small-"</h1>
<div class="row">
<div class="columns small-4 large-4 panel">
<h3>One</h3>
</div>
<div class="columns small-4 large-4 panel">
<h3>Two</h3>
</div>
<div class="columns small-4 large-4 panel">
<h3>Three</h3>
</div>
</div>
</body>
</html>
Related
I am trying to make a simple layout using Bootstrap 3, and it looks fine on laptop, but when I try to emulate in Chrome for small screen such as Iphone 5, one of my image is going to the next row, though I was expecting it to be at the same row as the heading. Visually, there seems to be enough space, and I tried pulling, pushing, applying offser but could not get it working yet.
Can anybody help point out please what am I doing wrong here?
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<div class="col-md-4 column"></div>
<div class="col-md-4 column"></div>
<div class="col-md-4 column">
<div class="row clearfix">
<div class="col-md-6 column">
<img alt="300x200" src="images/loc.png" style="padding-top:15pt;height:auto;max-width:35px" />
</div>
<div class="col-md-6 column">
<h2>Venue 2015</h2>
</div>
</div>
</div>
</div>
</body>
</html>
the col-md-* classes are only for screensizes from 992px to 1200px - if you want a 2-column-layout on small displays, add the col-xs-* classes.
In your case:
<div class="row clearfix">
<div class="col-md-6 col-xs-6 column">
<img alt="300x200" src="images/loc.png" style="padding-top:15pt;height:auto;max-width:35px" />
</div>
<div class="col-md-6 col-xs-6 column">
<h2>Venue 2015</h2>
</div>
</div>
You could write a function in Javascript that specifies the (smaller) sizes of specific elements if screen size is under a certain size. The full size image would still load, but the script would tell it to load width smaller width and height for smaller screen size.
Consider the following example, the first is the intended desktop look, the second is the mobile one. (
What is your recommendation to achieve that using a common grid system w/ media queries like twitter BS or Zurb Foundation?
With Foundation I will do something like this :
<div class="row">
<div class="small-12 medium-6">
<div class="small-12">Title</div>
<div class="small-12 show-for-small">IMG</div>
<div class="small-12">Text</div>
</div>
<div class="small-6 hide-for-small">
IMG
</div>
</div>
But I have to put "IMG" twice.
I'm using Twitter Bootstraps grid system and inside that I use their panels. I have two cols and in each col I have one panel. But this creates a horizontal scrollbar on my page.
I could probably disable the horizontal overflow. But I'd rather "fix" the problem in a cleaner way that Bootstrap is causing.
What would be a good way to solve this problem?
Example: http://www.bootply.com/iPdjlxuexk
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Form widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Selected page widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
If I wrap a <div class="container"></div> around the row div, then the panels inside are really small. A big margin-left and margin-right apprears on the container. Not really what I'm after either.
http://www.bootply.com/BWMTAFeO8x
The problem is occurring because of the following HTML class:
col-md-6
Specifically, with Bootstrap, this means that whatever is currently in this column will extend to be 6 column spaces wide. This is not good if you are looking to only have something, let's say, 3 column spaces wide because it actually stretches what you are trying to do.
How do we fix it?
Use a smaller width space and then use Bootstraps ability to push/pull things. I will demonstrate what I mean via a JsFiddle, which is found here.
Basically, I altered your HTML to become the following:
<div class="row">
<div class="col-lg-3 col-md-3 col-lg-push-3 col-md-push-3">
<div class="panel panel-default">
<div class="panel-heading">Form widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-lg-push-3 col-md-push-3">
<div class="panel panel-default">
<div class="panel-heading">Selected page widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
NOTE
In my demonstration, I added the ability to view the panels in both a large screen setting and a medium screen setting versus just having it in a medium setting. I also had to push the columns according to the screen sizes. You can see this in effect with the JSFiddle by changing the width of the portion of the output screen in the demo. This is useful because you can see the difference between a large/medium sized screen to a small/extra-small sized screen.
More Information:
You can find more information on the grid system via the actual website. It will show you how the grid system is laid out and how you can use the push/pull aspect as well.
http://getbootstrap.com/examples/grid/
I've been trying to adapt my website to extra small window sizes with Bootstraps but I didn't found any solution for myself.
I want to shown one column when the window is too small and keep the left version otherwise. At this point, the code is something like:
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="divLeft">
<div class="panel panel-success" id="divChart">
<!-- Some progress bars -->
</div>
</div>
<div class="col-xs-12-offset-6 col-sm-6" id="divMain">
<h2>Observations</h2>
<div class="list-group" id="observations">
<!-- Some panels -->
</div>
</div>
What I have to do? I tried to add multiple classes to my divs divLeft and divMain but it doesn't work as I want.
Thanks in advance fellas! : D
Each row should always add up to 12 columns.
Have a look at the Bootstrap Docs which tell you about how to work with their grid system:
http://getbootstrap.com/css/#grid
I'd suggest something like the below for your example:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-3"></div>
<div class="col-xs-12 col-md-9"></div>
</div>
</div>
The above should result in the two columns displaying one above the other on extra small devices.
I'm building a simple site in foundation and I thought it would make it faster because it has awesome grid. Problem is when I put images on my grid the spacing between them is too far away. I want to decrease the spacing so the images are basically 15px or so from each other. I've tried to change the padding and margin but it throws off the entire grid. Is there a simple way to achieve this in Foundation or am I just better of writing this from scratch? My HTML is below.
<div class="row">
<div class="gallery small-4 large-4 columns">
<img src="assets/img/chaiLatte.jpg" alt="Painting by LaRue. ">
</div>
<div class="gallery small-4 large-4 columns">
<img src="assets/img/milkchocolate.jpg" alt="Painting by Bellingham.">
</div>
<div class="gallery small-4 large-4 columns">
<img src="assets/img/darkChocolate.png" alt="Painting by Bellingham.">
</div>
You can collapse the grid to remove the spacing by adding that class to the row containing your images. You can then add the padding or margin to your images to give the 15px spacing you want.
<div class="row collapse">
<div class="gallery small-4 large-4 columns"></div>
<div class="gallery small-4 large-4 columns"></div>
<div class="gallery small-4 large-4 columns"></div>
</div>
There is a $column-gutter variable in _settings.scss. This controls the grid spacing. By default its set to $column-gutter: emCalc(30px);. Try changing this value. This is only going to help you if you are using the sass version.