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.
Related
I have a sidebar that I would like to be a set of columns on mobile, but one column on a desktop or tablet.
I just don't know how to approach this, as the only documentation bootstrap provides is for the other way around
I don't even know what to search, "bootstrap wrap column on wider screen" and the like doesn't turn up useful stuff.
Always start "mobile-first", and create the desired mobile layout. Then make adjustments to get the desired desktop layout.
You could use nesting and the column order (push pull) class to reverse the layout on desktop...
<div class="container-fluid">
<div class="row">
<div class="push-md-9 col-md-3">
<div class="row">
<div class="col-md-12 col-4">
.
</div>
<div class="col-md-12 col-4">
.
</div>
<div class="col-md-12 col-4">
.
</div>
</div>
</div>
<div class="col-md-9 pull-md-3 col-12">
.
</div>
</div>
</div>
http://www.codeply.com/go/uimdfmnwCC
Here is a example of code that i need advice for:
<div class="container hidden-xs">
<div class="row hidden-xs">
<div class="container hidden-sm hidden-md hidden-lg">
<div class="row xtrastyle hidden-sm hidden-md hidden-lg">
<div class="col-md-12">
Test
</div>
</div>
</div>
</div>
Assume i want one type of container and row for xs devices and one container and row for other devices. It doesnt work like this code. I need tips to use to get it work.
If you want to have the same contents with diffrent styling use css media queries.
HTML:
<div class="container">
<div class="row xtrastyle">
<div class="col-md-12">
Test
</div>
</div>
</div>
CSS:
#media (max-width: 768px) {
.xtrastyle {
// apply your xtra style here
color: red;
}
}
Hint: If you use LESS instead of CSS you could use bootstrap #screen-sm variable instead of 768px: http://getbootstrap.com/css/#less
Just put both containers on the same level in HTML like so:
HTML
<div class="container hidden-xs">
<div class="row">
Hidden XS
</div>
</div>
<div class="container visible-xs">
<div class="row">
Visible XS
</div>
</div>
See this working Bootply. Also, as you can see and #ganders pointed out in the comments, its easyly achievable using the .visible-?? and .hidden-??-classes. (And much more readable btw.)
The corresponding bootstrap-classes are explained well in the bootstrap-docs.
Bootstrap doesn't have this built in as that's a fairly niche use case. You'll have to write either some custom mixins (assuming you run into this issue often) or by modifying their behavior at various breakpoints.
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>
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 have a laid out structure with three columns in ZURB Foundation 5, two of which are sidebars (left & right) and the middle one is the main content area.
I've been playing around with the documentation's source ordering instructions but had some troubles.
I tried to visualise the situation so that you can understand what I want in a second.
This is the desktop view and the structure :
and this is how I want it to look like on mobile :
Does anyone know how am I gonna achieve that?
Thanks in advance.
It would be
<div class="row">
<div class="small-12 medium-6 medium-push-3 columns">Main</div>
<div class="small-12 medium-3 medium-pull-6 columns">Left Sidebar</div>
<div class="small-12 medium-3 columns">Right Sidebar</div>
</div>
The first answer needs to use medium-push-3 instead of medium-push-6 and medium-pull-6 instead of medium-pull-3.
You can use Foundation's source ordering to alter the order at different breakpoints.
Your HTML would look something like this:
<div class="row">
<div class="small-12 medium-6 medium-push-6 columns">Main</div>
<div class="small-12 medium-3 medium-pull-3 columns">Left Sidebar</div>
<div class="small-12 medium-3 columns">Right Sidebar</div>
</div>
Here's the demo.