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/
Related
I am building my project. I just noticed that I made a big mistake with using just pixel values in tables, sidebars etc. So it makes a problem, like if other person has different resolution in computer my website looks shapeless and bad.
Which codes I should use to apply responsive design?
As I know to use width, height values with % is useful. Also I don't know exactly how to use % values. What else I should do?
I use "rem" units to avoid problems (including the "media" max/min widths).
Consider 1rem = 16px for your desktop desing and 99.99% times everything goes well even in almost unknown devices.
https://www.w3.org/TR/css-values-3/#font-relative-lengths
EDIT: (cause the comment)
There are different things.
1.- Use "rem" to size things (like font-size: 0.875rem in spite of font-size:14px) to keep thing with adecuate proportions to the size of the pixels, 2.- Use #media queries to change layout when the screen is to wide/to narrow, that sizing can be done in rems to, so min-width 20rem means (more or less) the width of 20 "M" letters (not really true, but close).
Let say you have a 24 inchs screen with 1480px, and your friend have also 1480px, but in just 6 inchs. If you make font size 12 px you will see pretty nice, but probably your friend will find it small. The device/browser developers can define a different rem size, acording to the physical size of the device (24px, for example) and your 0.875 rem will be 21 pixels in his screen (not so small, more comfortable to see)
The change in layout to adapt to a narrow screen can be done using those rems also, so for the same 1480px he can have a more comfortable layout. You have a screen 1480/16=92,5 rems width, but he have 1480/20=74 rems width.
You can use percentage values just like you would use pixel values. If you want 1/4th of your website to be a sidebar, it can be as easy as:
.container {
width: 75%
}
.sidebar {
width: 25%
}
This wil make the container take up 75% of the browsers window. Since there is 25% space left, you could neatly fit a sidebar next to it by making that 25% width (you might need to add float:left to both elements).
However, I can image that on mobile view you would like your container and sidebar to be 100% width. You can do this by using media queries:
//medium phone size
#media screen (max-width: 425px) {
.container {
width: 100%
}
.sidebar {
width: 100%
}
}
There are several solutions:
Use media queries to your pages.
Use a CSS grid (and media queries)
Use Flexbox (and media queries)
Use an other css framework including a grid system
You can start with Bootstrap. That will not only make your site responsive but also there are many predefined designs for the HTML elements like buttons, fonts, tables etc. You will only have to use the classes.
If you are not well accustomed to Bootstrap the do as #Damian Makkink and #Marc_DNL have posted.
IMO a self-built CSS for a responsive site and design is better. Initially, in my hobby project, I started with Bootstrap but I have completely phased that out.
I'm designing a webpage, and extracted this portion into a fiddle:
https://jsfiddle.net/h703xqbt/16/
I'm not being able to avoid several layers of tags instead of a single line when the screen resizes to a smaller value or when using a movile device.
I'm trying to make it collapse into a single button that shows a dropdown list with all the tags that don't fit the screen.
I'm familiar with media queries such as
#media (max-width: 600px) {
#button1 {
display: none;
}
}
but i'm not sure how to use it for this purpose.
I've seen some webpages that do this but it becomes very difficult to follow them as they have an enormous amount of details, and can't find the fundamentals.
Is this possible using only css? (i'm trying to avoid js and jquery as much as possible, for my own reasons)
Simply give the tabs a width of 100% when the screen size is a certain width :)
#media (max-width: 600px) {
.tab-link {
width: 100%;
}
}
This way, the tabs will stay next to each other on wide screens, and occupy the full width on mobile devices, stacking on top of each other.
You can always change the 600px media query to a smaller / larger width, and give the tabs themselves a width of something like 50% if you would like two tabs next to each other.
I've created a new fiddle showcasing this here.
Hope this helps! :)
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 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.
Check out this page:
http://new.brixwork.com/realtors/real-estate-website-features
Below the big computer screen, the images and text blocks alternate in a staircase design.. on one div the image is on the right, on another, on the left. And there are 4 blocks.
I'm using the Skeleton framework (www.getskeleton.com) for a responsive grid design, so the grid re-sizes on the viewport queries, which is great. however this poses a problem on iphones or vertical view on iPads when the image & text boxes shuffle to get on top of each other.
Instead of
image text
text image
image text
text image
I get
image
text
text
image
image
text
text
image
Because of the order by which the objects were typed out in my HTML.
So the question is, is there a clever way to re-position items via CSS? I already use media queries like this:
#media only screen and (max-width: 959px) {
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
}
Any ideas? I want to do this without resorting to jQuery to detect the window size and re-size them if I can avoid it. I can't use PHP to alter the DIV orders on "echo", because I want the re-shuffling to be done effectively if a tablet is taken from horizontal to a vertical position.
Where there's a will, there's a way! The big drawback with using a framework that uses semantics like "six columns alpha" and "ten columns omega" is that they create an expectation for visual ordering. The six columns are on the left, the ten columns are on the right, and the alpha/omega naming conventions affect margins because the order is right in the markup. You have stumbled across an unexpected use case for the author, I'm thinking.
(Incidentally, your ten column area also contains images that are overflowing their containers; ie. they're not being resized)
The straight goods:
My honest advice for future maintainability is to learn from skeleton, take what you want from it understanding what its different classes do... and re-invent it.
For example, what you have on your main page are a series of feature containers. The markup should look consistent, like this:
<div class="featurebox">
<div class="media">Image, slider, or other visual interest items here</div>
<div class="items">Text of items of interest</div>
</div>
<div class="featurebox">
<div class="media">A different image, slider, etc</div>
<div class="items">More text of items of interest</div>
</div>
And then you can style these to create the left-right effect. The key here is in the selectors. By floating right instead of left for divs inside every other featurebox, our effect is easily achieved:
.featurebox { width: 600px; overflow: hidden; clear: both;}
.featurebox div { float: left; }
.featurebox:nth-of-type(odd) div { float: right; }
.items { width: 200px }
.media {background-color: grey; width:400px; height: 100px;}
Fiddle: http://jsfiddle.net/7qRfh/
The problem in modifying what you currently have is that this doesn't really fit skeleton's expectation of left-to-right stacking of floats. If you're willing to say "phooey" you could identify your containers, target every second one, and flip the .columns float orientation. You will also need to override omega and alpha class behaviour so that omega is actually acting like alpha and vice versa. A mess, in my opinion, but it'll work.
The hack
I just had a fiddle around here and I think I closed it. Can't find the URL in my history so I may not have saved it first. :-/
But no matter. It boiled down to this: you can do what you need to do with your current markup, but the changes to CSS are even more extensive and become nutty.
The container already has position: absolute, so you have to unfloat the "six" and "ten" columns, position them absolutely, with "ten" on top and "six" on the bottom. The big issue is that do to it easily, the container as well as the "six" and "ten" all need to have height set on them. Absolute positioning takes an element out of document flow, so without height it just becomes an overlapping weird mess.
Honestly, if you insist on skeleton the way it is, and the markup the way it is, the most reasonable hack actually turns out to be JavaScript. If you already have jQuery on your page, all the easier.