I have created a grid of images using Bootstrap 3's .thumbnail class. Everything seems to be working great with regards to the images resizing, and the columns changing depending on the window size. The only problem is the images are all different sizes, and both portrait/landscape orientation. This causes awkward breaks and "pile-ups" with the thumbnail divs…
I was hoping to find a way to create a grid of SQUARE responsive divs using the .thumbnail class. So in other words, the width determined by Bootstrap would be mirrored in the div's height. E.g. the thumbnail image is scaled to 220px so the height of the div containing it would be set to 220px as well (and the thumbnail image inside scales up to 100% of eight the height or width, depending on orientation). Sort of like this:
Here is the basic code I'm using:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="<?php echo $image->url() ?>">
</div>
</div>
</div>
Thanks so much for any help you might be able to offer. I'm also open to suggestions for other approaches. I even tried using jquery Isotope's masonry setting to solve the pile up problem but couldn't get it to work :(
You could try a CSS only approach like this this..
http://bootply.com/85737
However, this is not cross-browser compatible so you still may want to use the Isotope plugin. Here is a working example that uses Isotope + Bootstrap..
http://bootply.com/61482
I have created a small plugin for bootstrap, called bootstrap-grid-h. You can try using it. It is css only solution. You can find it here: bootstrap-grid-h
For something like this I would recommend using masonry which will give you a pinterest effect where images will fit in a block style without breaks.
such as: http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
Related
I'm using bootstrap, angular and angular-ui-router
what I want to achieve is this mockup:
where the menu on the left is a navigation bar, a toolbar on the top, some breadcrumbs, content and a footer.
I can get all these elements in place. However, I need to populate the content with a variable number of elements from a rest data source. I want to wrap these nicely, so I am using the following angular / html
<div class="col-lg-12 ">
<div class="row">
<div class="col-md-4 " ng-repeat-start="item in $ctrl.items">
<div> card details here </div>
<div class="clearfix" ng-if="$index % 3 === 2"></div>
<div ng-repeat-end=""></div>
</div>
</div>
</div>
this works, and shows all the data. However, as there is more data than can fit into the div, scrollbars appear on the window
What I would like to acheive is to get the scrollbar to appear in the content div , like the screenshot
I have tried all sorts of css, like overflow: scroll-y, but can't figure it out.
Your problem seems to be related to dynamic heights. Using fixed heights (also %, vh, ... are useable), you can get that layout to work properly. There are a lot of solutions for that.
1. Using %
If you're going to use %, and that would by far be the best option, you have to start at the root tag which basically is <html>. After that you've to add the proper height value to it's child elements you want to use. Keep in mind to start at 100% and shrink your child element to the desired heights.
2. Using vh
The vh value is kinda same as %. You just don't need to set a height to every parent element. Demo
Note: You may have to check if that's working with your target browser.
3. CSS3 calc() function
Propably the newest method. You can calculate values through CSS(3), by using e.g. calc(100% - 100px). That's pretty cool though, but also isn't supported by every browser. See here.
4. Fixed layout
You could also use some fixed positionings. Setting up your footer, header and nav to position: fixed; would also keep up everything smooth and clean. I'd use a fixed layout in order to get that done, since I'd like it the most. Also it doesn't have any incompatibility with legacy browsers.
instead of overflow: scroll-y,
please try:
height:100%;
overflow-y:scroll
*giving it a height enables the scroll bar to appear.
I'm working on a mockup but keep running into issues with the navbar and main content layout. The page needs to look like the mockup image below on desktop.
I've tried everything I can think of and read up on the bootstrap site but continue running into problems.
First the navbar should be fixed so it scrolls with you. I've copied from one of their templates but it doesn't scroll like the demo unless I change it to pull-right. But if I use pull-right it removes the top spacing and first container spacing needed. I've tried the body tag padding-top but all it does is create more space between the nav and main container not above the nav.
The other issue is the row and column layout in desktop. The col-md-8 doesn't line up with the other col-md-4. It looks ok in mobile with 320 wide.
I'm pulling my hair and not sure what needs to fixed. If anyone can spare some time and have a look I'd really appreciate it.
Live links to the files are below.
link to image mockup
link to live webpage mockup
link to css override
On your CSS override you have the attribute .navbar (position:relative;) This overrides your navbar fixed top property.
As far as your col-md-4 goes..you have it wrapped in an html descriptor..which is this: <!-- -->. This just gives descriptions of what html attribute is listed. These descriptors are on a lot of your actual html and need to be removed in order for the code to work properly. Remember though some of them are actually descriptors...like <!--fixed navbar-->
hii just checked your live website all problems is the way you are using div tags .. so for first section of image and nav bar it should be in one div tag
<div class="col-md-12">
<div class="col-md-12">
<div class="col-md-4">IMAGE</div>
<div class="col-md-8">your nav bar </div>
</div>
<div class="col-md-12">
Banner
</div>
<div class="col-md-12">
<div class="col-md-4">
HR MARUTIS STUFF
</DIV>
<div class="col-md-8">
HI LOUREM THINGY
</div>
</div>
and soo on
HOPE THIS HELP IN YOUR FORMATTING OF PAGE
Everything seems to be fixed now. Perhaps the biggest issue I was having was getting the navbar in proper locations both desktop & mobile. Originally I was using an override for .nav to modify the margin in order to get the placement right in desktop, but in mobile view it would be in a different position, not to mention it kept sharing the margin ratios of 80px top and 120px right. This would force the toggled menu to be 80px further down rather default 0px. I couldn't figure a way around this so I figured why not try adding a div tag just for the margin spacing. Apparently this seemed to work after adding new info into the media queries. Also fixed a spacing issue when in tablet widths with nav and hero image.
As for the rest of the layout, I used col-md-3 and col-md-7 which pretty much lined everything up right away except for some padding needed. Everything else like h1 and h3 I used a simple class for mobile to adjust the margins again.
If there's an easier way or more efficient way of coding this I'm open to suggestions if anyone has some. Updated Live Link
H everyone. Please help me out. I am using this grid based framework. in the middle I have 3 images like this
<section class="row">
<div class="col-4">
<img src="img/seo.jpg" alt="seo work" class="work-type">
<h3 class="work-title">seo specialist</h3>
</div>
<div class="col-4">
<img src="img/webdesign.jpg" alt="web design work" class="work-type">
<h3 class="work-title">web designer</h3>
And for the specific img class I am having this CSS for making it responsive
.work-type{
max-width: 100%;
height: auto;
}
Now. three images have different height and they are taking different space height wise inside the grid box. what CSS do I use to have them all appear with the same height?
You can do this easily with CSS and background images.
http://codepen.io/anon/pen/EyZxoP
In this codepen, I display your current issue with the proposed solution.
If you want the images to be a part of the markup, then you'll need to provide more information about the solution you're looking for. (What should happen with the images that are being forced to become the same dimensions? Are we stretching them? Cropping? Are these images dynamically loaded? Hardcoded in the source? Are they featured images for a custom post type, like a staff post-type? Is this wordpress? Contextual layout details would be good, too.)
I've given divs the background-image properties to quickly/easily avoid skewing and stretching, as well as any other form of distortion because of layout stuff. This method can be used for responsive layouts as well.
.img-cont{
height:200px;
width:200px;
}
My custom vertical-side-navigation bar works fine by itself.
Here's a plnkr:
http://plnkr.co/edit/pLXogXuPiYwulcuzExMh
However when introduced within a bootstrap grid, the same navbar breaks. Plnkr here:
http://plnkr.co/edit/50G3o3ekNMR8qx2Be3rG
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-1">
<ng-include src="'nav.html'"></ng-include>
</div>
<div class="col-lg-11 col-md-11">
This is content section
</div>
</div>
I can fix this using some hacks like adding min-height property to the class
.vertical-side-bar
However, I do not believe that is the right way to do it. I am missing something here conceptually.
Could anyone please point out what's wrong?
The most obvious issue in your Plunk is that you are not calling the nav.css file.
<link rel="stylesheet" href="nav.css" />
Try this minor update to your Plunk here.
Now all that is missing is the background color and such. That shouldn't be difficult to add back. Your layout is basically working, though you need to make it fill the container width instead of being fixed width (I added that in my plunk).
But bear in mind that you can't get a fixed width column in Bootstrap 3 like you seem to be expecting. A column will always be 1/12th of the width of the screen. Also, you should start with columns defined for xs and then specify sm, md, or lg if they need to be different.
For example, you might need 3 xs columns to fit your content (col-xs-3), but only 1 in a large device (col-lg-1).
The question is very simple: how to PROPERLY avoid table for layout.
Problems: DIV layout with float:left is not always useful because often at browser stretch all divs pile one over the other...
I have a container div
<div id="container">
<div id="child1"> </div>
<div id="child2"> </div>
<div id="child3"> <div>
</div>
Container 100% page.
child 1, 2 width fixed width ( exampe 300px) and the 3rd width variable width 30%
I whant them not to pile one over the other on browser stretch.
Is it posible ? Thank you
http://thoughtsandideas.wordpress.com/2010/07/15/introduction-to-div-based-layout/
don't use tables for layouts. maybe the link can help you.
You should ALWAYS avoid using <table> for layout. <table> is made to display tabular data. That is it's purpose. If you use it outside of that purpose, then you are using it wrong. Additionally, if you can't achieve the layout you want using float's or display: inline, then you are most likely doing it wrong, or need a little bit of javascript to help you out until the flexbox functionality is fully implemented and supported.
See this post here for further explanation: Why not use tables for layout in HTML?