can I use sprite image in 960 grid system? if yes then how to manage the width of a particular sprite image with the grid width. anybody can help me for the above problem?
The Process of using the 960 grid is quite easy and the markup is quite quick to learn.
try the following.
<section id="wrap" class="container_12">
<header class="grid_12">
<h1>This is your Header</h1>
</header>
<article class="grid_8">
<h2>This is a content section</h2>
</article>
<aside class="grid_4"?>
<h3> this is a sidebar </h3>
</aside>
<footer class="grid_12">
<p>this is the footer</p>
</footer>
</section> <!--end wrap container - this container allows you to use the grid classes and creates your main column -->
Check the CSS in the 960 and it will make sense, the grids are divisions of your container so grid_6 would be half the width of the container_12 etc. - grid_8 would be two thirds, aand grid_4 would be a third, obviously, grid_12 would take the full width of the container.
As for using sprites, simply look in the CSS for the width of the grid_ class that you use for the containing element, if you\'re not using one of those classes then the 960 wouldn't interfere with you using sprites at all.
Related
Well, this is absolute novice question: How on earth bootstrap does not have min-height?
<div class="min-vh-100">
<div class="min-heigh-75">There is no min height</div>
<div class="min-vh-25">There is no min-vh-25 to 75</div>
</div>
Using h-75 and h-25 does not work as they translate to height:75% and not min-height:75%
Am I missing something here?
This is my first time I use Bootstrap. And the problem I am facing, the text within <main> overflows. Its height does not increase to push <footer> down and the reason is bootstrap .h-25 translates to css height:25%. And height:25% remains the same no matter how much its content overflows. It does not flex itself.
<body class="h-100"> <!-- If I use min-vh-100 then h-25 does not work -->
<header>Header here</header>
<main class="h-25">
Lorem ipsum overflows the main block once it fill 25% of the parent size.
I would like the main block to increase size once it fully filled.
</main>
<footer>Footer here</footer>
</body>
Is there any Bootstrap solution for it?
so I'm having an issue trying to use the Bootstrap reponsive embed classes inside a flexbox.
The classes work fine when things are stacked, but if I then use flexbox to place two divs side by side (one containing the video, the other a panel for text info), the video shifts to half width (which is correct) but the height remains the full height as if it were full width.
Nothing I seem to change is making the height stick to the ratio governed by the width changing from the flexbox.
Is this a bug in the responsive embed?
<div id="youtube-container">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/<?php echo get_post_meta($post->ID, 'youtube', true); ?>"></iframe>
</div>
<div class="info"></div>
</div>
After a think, it dawned on me that the process BS uses to shift the aspect ratio is based on the parent container.
So after just entering a parent div around the responsive div, it works fine.
<div id="youtube-container">
<div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/<?php echo get_post_meta($post->ID, 'youtube', true); ?>"></iframe>
</div>
</div>
<div class="info"></div>
</div>
I have a design which is that of rows consisting of two blocks.
http://jsfiddle.net/dhxr25m6/
<div class="homepageBlockRow">
<div class="homepageBlock">
<img src="http://s1059327.instanturl.net/images/HomeTiles/BigJob.jpg" alt="">
</div>
<div class="homepageBlock homepageBlockText orangeBackground" style="height: 372px;">
...
</div>
<div style="clear: both;"></div>
</div>
<div class="homepageBlockRow">
<div class="homepageBlock homepageBlockText greyBackground" style="height: 372px;">
...
</div>
<div class="homepageBlock">
<img src="http://s1059327.instanturl.net/images/HomeTiles/Rental.jpg" alt="">
</div>
<div style="clear: both;"></div>
</div>
The page looks good on a full size monitor but on tablet resolutions the images are about half the height as the text blocks.
I tried scaling up the text block to match the row height, but that doesn't work when the image is smaller.
What would be a good way to scale things so that the images and text are always the same height?
CSS3 has object-fit property that can achieve this (while retaining the aspect ratio).
Just add the following code to the css for the image:
width:100%;
height:100%;
object-fit:cover;
object-position: 0 0;
FYI, I changed the structure of the div definitions a bit and added some height/width/float attributes and you can see a demo here (fiddle doesn't seem to run my code for some reason as mentioned in the comments): object-fit-solution
RESPONSIVE DESIGN:
For mobile devices, you will need to write media queries.
Some pointers for that:
1) make the clearfix div to float to left
2) remove floats on image and text blocks. Also make the width to 100%.
I have been using twitter bootstrap to design my homepage and something keeps bugging my mind about the usage of media queries in css frameworks such as twitter bootstrap.In my example i am displaying four images like
<div class="container">
<div class="row">
<section>
<article class="span3">
<img src="gandalf1.jpg" />
</article>
<article class="span3">
<img src="gandalf2.jpg" />
</article>
<article class="span3">
<img src="gandalf3.jpg" />
</article>
<article class="span3 last">
<img src="gandalf4.jpg" />
</article>
</section>
</div>
</div>
With the row class and basic resets for section,this works surprisingly well and it responds well down to mobile.I feel that i have no say on what's happening and so i want to get some control.
What i want is to force everything under the <section></section> into some kind of contract to make them behave in some way,for instance,in my example at some point,the images are listed one after another vertically.
In my contract for instance,i want the images to never leave their original order - (the original order is horizontal i.e one row with four images,the second row with four images and so forth) and should respond to the change of width by resizing without breaking out of their confines when the width is between 600px and 980px
#media screen and (min-width:600px) and (max-width:980px) { ... }
To achieve this,i have tried many things and the first thing i thought of is to make the <section> and inline-block,but that failed to produce the desired effect.I am afraid trying to redo the .row class will be a very tall order at those widths.
Should i concentrate my efforts on looking for a solution using my css code i write or should i try and modify the .row class at those widths?.
I'm using the 960.gs style sheets for a drupal site - I would like to extend both the header, and footer sections to the edge of the webpage- resulting in something precisely like stack overflow's website.
I believe you need to use a div with no predefined helper classes, as div's will by default expand to the full width of their parent (if theres no wrapper - it will be the full screen)
Some trivial example:
<header>
<nav>
<ul>
<li> blarg </li>
</ul>
</nav>
</header>
<div id="main" role="main" class="container_12">
....
....
</div>
<footer>
<p>Thanks!</p>
</footer>
Hope this helps.