I am a beginner in using bootstrap 3. But I have a div which should span 6 columns on Desktop, Mobile and Tablet-Landscape and span 8 columns on Tablet-Portrait.
I am tyring to create my own css classes, since I am not aware of another way.
<div class="my-col-xs-ld-6 td-col-xs-ld-offset-3 td-col-sm-pr-8 td-col-sm-pr-offset-3">
Content here
</div>
Css
#media screen and (min-width: 768px) and (orientation:landscape) {
.td-col-xs-ld-6 {
}
}
#media screen and (orientation:landscape) {
.td-col-xs-ld-offset-3 {
}
}
I understand that I have two create different orientation for each class. But I am stuck here, didn't know how I can implement this.
This can help you:
the grid system limits:
https://v4-alpha.getbootstrap.com/layout/grid/#grid-options
And the usual size of each of the most used devices with their sizes:
https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/
Now, compare the sizes of each one and set the columns according to your need, for example, a device (tablet) in portrait can achieve 1024px, so you can use col-md-2 or col-lg-2 (this will create 6 same sized columns inside one row) and for a larger screen, such as more than 1024px, you use col-xl-2 (it will create 6 columns in one row).
Always remember that bootstrap grid system uses a total of 12 columns inside one row, so you can split those 12 in many ways, but it need to sum always 12 in the end. for example:
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
EDIT
So, if i understood correct, you want to create your own CSS style for columns like bootstrap have, not use bootstrap.
So, this is the basic bootstrap style for all kinds of columns, you can use this base:
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
now, for each size you want, you will need to define widths, preferable in %, to be more responsive. (Example: for 4 columns, divide 100%, the total width, in 4, so 25%, or something similar [remember that if you have margin, you need to subtract from the width])
Use media queries for at least 4 device sizes, example: less than 576px, less than 768px, less than 992px ,and bigger than 992px...
Related
While reading about the new grid system of bootstrap I asked myself, how do ad banners fit into such grid systems?
I am aware of responsive ads (ad sense, etc) but I still do not understand how those concepts apply to a skyscraper ad banner properly.
Here is a mock of what I am talking about:
Having a horizontal ad is fine but how does bootstrap help me to create such a layout?
Hiding the skyscraper for small devices is no problem, using grid helpers, but am I right, that I still need to mess with float: left; and clearfix for such a scenario?
Even if the skyscraper would be responsive and resize itself according to some column width, e.g col-md-2, etc, it still would require some sort of "row span" in order to span arbitrary rows.
Edit: just to make it clear: I am not asking for a complete markup all-dressed up, just for insights whether such a concept is outdated in responsive times or that this is still something for float: right or position: relative etc.
Bootstrap isn't designed to have a fixed width column. It is designed around percentage column widths.
However, you can use create media queries that follow Bootstrap's use of them. For "tablet" sized devices, Bootstrap sets the overall container to fixed width of 768px, like below.
#media (min-width: 768px) {
.container {
width:750px
}
}
You can make use of this knowledge to create two classes that divide the layout into two columns. One for with of content and one for the ads.
#media (min-width: 768px) {
.col-left-width{
width: 625px;
}
.col-right-width{
width: 120px;
}
}
This allows you to have a fixed right column width of 120px. But as the size of the screen changes, you can redefine the "left" column width to
Container Width - 120 - Padding.
In this case, the left column would be set to 625px.
I have a working sample at http://jsbin.com/suceji/3/
I'm trying to implement and new layout for my site. I am capable of implementing this using JS but I'm trying to use pure CSS.
And example would be http://tympanus.net/Development/GridLoadingEffects/
It starts out with 3 columns and when you resize the page smaller, the boxes resize until it gets small enough that it turns into two columns.
Similar to that I'm trying to get my horizontal list of square images to take full width of the page with the square's max-width being 300px. So for example: the page starts out with 5 columns, the width of the page starts shrinking, the width of the boxes start shrinking as well. It reaches a point where 4 300px boxes will be able to fit into the current width.
I've screwed around with and max-width and min-width, but I'm a CSS novice and I feel like I'm missing something. I've looked around and
Any ideas?
You can use Media Queries to set differnet css rules for different browser widths.
#media (min-width: 300px) and (max-width: 600px) {
someClass {
/* some rules for browser width between 300 and 600px */
}
}
More about Media Queries:
ss-tricks.com
MDN
selfhtml
Try setting the width as percents so it will be relative to the screen width.
Then use the screen width media query to set a different width for different screen sizes.
Good luck.
What you're basically talking about is a responsive grid layout system. IMHO the simplest way to do this in pure CSS if you float your DIVs and used fixed % sizes. Use Media break-points for each screen size range you want to support. You need to calculate all the gaps (gutter widths) as well. Also watch for rounding errors in some browsers, notably IE. You might need to use slightly less than 100% for maths because you want to ensure you don't end up 1px larger than 100%.
Here's an example with just one break-point that uses a 3 column layout by default and revers to a 2 column layout when the display size falls below 480px.
<style>
/* default */
.square {
background-color: orange;
width: 30%; /* 100/3 - (margin*2) */
padding-bottom: 30%; /* matching width makes it square */
margin: 1.5%; /* margin calculated as portion of overall 100% */
}
#media (max-width: 480px) {
.square{
/* overrides for smaller screens */
background-color: purple; /* show the breakpoint switch below 480px */
width: 47%; /* (100%/2) - (margin*2) */
padding-bottom: 47%;
margin:
}
}
</style>
<div>This layout will fit 3 squares wide for any screen width</div>
<div class="square">one</div>
<div class="square">two</div>
<div class="square">three</div>
And here's the fiddle.
Your media queries can get much more complex, but it's possible to support pretty much any device. Try and design for any screen size first and than mop up the edge cases.
This soon gets very complex to manage in CSS. You really want to think about a CSS pre-processor such as SASS or LESS. However, there are plenty of grid frameworks that support this, including Twitter's bootstrap and some great inspiration from fluid squares or my favourite for simplicity responsive.gs. You'll find that most of these use a grid of 12 or 24 columns, as they divide into more even sets of columns. For instance, 24 can shrink down to a screen consisting of 1, 2, 3, 4, 6, 8, 12 and 24 columns.
I'm learning about the grid in Twitter Bootstrap 3 and there's something I don't understand...sorry if this is a dumb question.
I understand that media queries make the width of the container class different each time eg. a viewport with a minimum width of 768px makes the container class be 750 px wide. ....a viewport with a minimum width of 1200px makes the container class be 1170px etc.
However why is there a need to have different classes for columns such as .col-md-2 and .col-lg-2 as in both these cases the value is 8.333333333333332%; and then .col-md-3 and .col-lg-3 are both 25% and so on
25% of 750px would still give you propotionally the same as 25% of 1170px
You have four different classes so you can have four different layouts, depending on screen size.
The key part of the Bootstrap grid system that I see most people misunderstanding is that you do not need all four classes - xs, sm, md, and lg. The browser will take the smallest one and apply that until it reaches a larger one.
So for instance, col-xs-4 would be applied at all screen sizes if no other sizes are ever applied. Adding col-sm|md|lg-4 to the same div is completely unnecessary.
As a side note, I also see col-xs-12 col-sm-4 a lot as well, which is also unnecessary. col-xs-12 is implied if you set a sm or larger class. Actually, 12 column is implied for any size smaller than the smallest declared. So if you just put col-lg-4, then col-xs|sm|md-12 is implied.
So if you want your layout to look exactly the same at all resolutions, just use xs. If you want it to look a certain way on tablets and up, but just be stacked on phones, then just use sm. If you want that div to be 3 on phones, 4 on tablets, and 6 on desktops and up, then you need col-xs-3 col-sm-4 col-md-6.
.col-xs-, .col-sm-, .col-md-, and .col-lg- all refer to different viewport sizes for there columns each is there so you can set your columns different on different devices. If you refer to this table (http://getbootstrap.com/css/#grid-options) it will show you each size that corresponds to each one of the differing classes.
Basically they look and act the same as you pointed out, but they are set up using different media queries so they differ in this factor. This is so you can have different spanning columns on different devices. let's say you like a column span of four for your medium to large devices a span of six for your small/tablet devices and a span twelve for your extra-small/phone devices. You should only have to worry about your medium and small devices in this case the large will inherit it's span from your medium declaration and the extra-small should automatically be 12 if not set. (I'm not positive on that last part but that's what it seems to be.)
So all you have to do is add .col-md-4 to all your divs as well as a .col-sm-6 and this will execute the above said layout.
I'm trying to get familiar with responsive, mobile-friendly layouts by redesigning my online portfolio, using the SimpleGrid framework (this one: thisisdallas.github.io/Simple-Grid/) combined with elements of HTML5 boilerplate to help get me started.
Here's what I've got at the moment: http://pftest.comyr.com/grid/
One of the issues I encountered was figuring out how to get the grid columns (specifically, the 3 div columns containing the hexagon shapes) to collapse at the different screen-size "breakpoints" with CSS media queries so that they won't simply overlap each other at smaller screen sizes.
After a fair amount of trial and error mucking about I eventually discovered I could get it to to collapse to two columns for tablet screen-sized devices by applying a class/ID with width: 50% and float: left to a media query of: #media only screen and (max-width: 908px) { } and (hopefully) now it collapses neatly into two columns at roughly that size (at least it does from my brief testing)
The issue I'm having is now is figuring out how to get it get into collapse into a single column for the smaller smartphone screen-sizes (#media (max-width: 22em), #media (max-width: 320px) ect.
I have tried various different properties using the same #workgrid ID I used for the two column breakpoint - but for whatever reason just can't seem to get it work, and unfortunately there is little to no documentation included with the grid framework that might aid me.
The CSS in question is:
#media (max-width: 22em) {
#workgrid {
width: 100%;
float: left;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
}
}
Which is applied to each of the DIV "col-1-3" classes.
As you can see at the moment it collapses into the two columns and then begins to overlap at any screen size smaller than that. I'm sure it is something relatively simple I'm missing/not seeing and just need a bit of a push in the right direction... :)
The main problem is that you're working with unresponsive units inside the responsive elements of your grid and you're not using max-height and max-width for elements like images.
For example, you have an element class called .shape whose width is 300px, this class is a child of #workgrid whose width is 50%. In a small browser viewport with, for example, a 320px width, your #workgrid width in pixel will be as much 160px while .shape width will be the same, 300px, this causes the content gets out of the space and collapses with other elements space.
Here are two links that maybe help you to understand fluid elements better:
Fluid images
max-width
To fix your grid you should use max-width and max-height instead of width and height in some classes and change some css properties like background-size. Another way to solve it is using responsive units instead of fixed units in sizes. A responsive web needs responsive measures.
Fix that takes time and can be exasperating, so if you want an alternative solution yo can solve your problem changing yor main.css and simplegrid.css this:
#media (max-width: 22em) {
to this:
#media (max-width: 41em) { // If it doesn't work, test a larger number like 44em or something like that
Your grid starts to collapse when the browser viewport is smaller than 656px (656px = 41em for a current font-size of 16px), this grid becomes a single column grid when the browser's viewport width is 22em or less, so changing 22em to 41em we make single column appears before the grid collapses, thus making grid works well.
I have a Python program that uses mod_python to retrieve database entries from MySQL and display them in an HTML format. This webpage ends up as a table with four columns, that span the entire page. (I formatted it with CSS)
Is it possible to use CSS to change the number of colums if the screen width is under a certain number of pixels? One of these four columns have a large amount of info in it, and it is not idea for viewing it on a mobile screen. The text appears small and hard to read, and zooming in is not convenient either. I want to know, is it possible to use css or something else to remove this column if the screen size is smaller than say, 800px? So on an iPhone 3g, the table would show with only three columns instead of four on a larger screen. This would make the text easier to read on the go.
Yes, it is, and quite easily. You can do it using media queries:
#media screen and (max-width: 800px) { your styles here }
So in your case, your css would have the style for the column, something like .column4 {display:block;}, and after that your media query:
#media screen and (max-width: 800px) {
.column4 {
display:none;
}
}
You can have different queries for different screen sizes (in my latest project I used 6 different layouts, for 6 different resolutions and devices). Add some percentages to that and you can have a really nice responsive site.