I'm currently developing a Wordpress blog theme - it must be fully responsive. I wanted to display a 2 column layout on bigger screens, having independent columns.
I thought of something like this
the mobile page is no problem - but on the 2 column layout I had problems like this (bottom image)
I tried it with the :nth-child() selector + floats, but it didn't work.The posts should be listed by date! would be really grateful if somebody could tell me a way solving this problem! thanks in advance.
edit:
NOT using bootstrap or any other grid system!
I am assuming you have multiple elements that are just floated, but that wont work if the elements are of different heights. You will need to create two separate columns for those elements.
Related
At some viewport I want to be able to swap some of the divs as shown by the figure below.
I don't want to use workaround such as replicating the same divs here and there and then using display:none to hide them, so please don't suggest this solution unless you think it's the only way to achieve so.
How would you solve this problem using Flexbox? What would the box model be like?
What I've tried so far:
playing with order CSS selector. But it works only if all the divs are in the same container (doesn't seem to work with this problem).
A1 and A2 are visually a single item, as suggested by its colour, but I guess I might need to split it in 2
PS: please note that the problem is NOT how to build any of these layouts themselves neither how to use media queries.
I have created a Bootply to show the issue I am having: http://www.bootply.com/8fPmr31Wd7
Scroll down to look at "People" and "Places" and find they are indented along the sides.
Perhaps I am not using the right classes, or perhaps there is a bug with the grid, but if you use the grid commands within a form, it causes the elements that are within a grid to be just a hair off on each side and not line up properly with the rest of the form.
I know Bootstrap 4 is in testing, but I didn't know if this was a bug or something I am missing so I thought I'd ask. Thank you.
You have grid rows that don't contain any columns for all your other form rows, and you're using columns for the People and Places form element groups.
If you add a 12-unit wide column within your other rows, as per the top answer to Best practice for single column within row in bootstrap v3 grid system?, your horizontal spacing within your grid will be consistent.
I've been pondering this ever since I started using Bootstrap 3 - which is a fantastic framework by the way. What I'm describing may be completely the wrong way to go about this or it may be a very common issue and I'm interested to see how other developers & designers handle this.
The image below contains a simple row (white box) in a container. The row has a col span of 10 with an offset of 1 and the blue box is then inside a nested row of the white box. When the designer does this they will simply be keeping everything matching up to the nice full width container grid (because they won't understand or need to know how nested rows work).
However, the reality in Bootstrap 3 is the 12 grid starts again inside the nested row. The result of this means I can no longer line up the blue box nicely as it doesn't fit the nested grid.
So my question is: how do others handle this? Am I actually using nested rows in a way I shouldn't be or is this something that the designer needs to be educated on? Or is there something much easier that I'm now aware of :)
Thoughts?
After doing some more investigation I have just realised that I don't think this is an issue at all. What my example above is ignoring is that the gutter remains the same width in nested rows as in the outer rows. When I did in above images (and with how I always thought about it) I simply resized the grid in Photoshop which also resized the gutters - which is incorrect.
I've tried now using this cool tool http://gridpak.com/, created the grid to the same width as my nested row and, lo and behold, it lined up perfectly.
The columns in the nested rows will be different still but the result will match up with the original design. In the example above, the blue box will actually be a col span of 8 with an offset of 2. The designer will look at the site and "think" it is actually a col span of 6 but we will all know better.
Thanks for the ideas and suggestions everyone - especially to royalsflush for the neat jQuery tool he developed as that might still come in handy.
Indeed, the 12 grid system may cause difficulties in some cases when you have fixed directives from your designer, but there are all kind of tricks that you can do in order to succeed.
So if you want to align the blue block to be on center and a width of 6 cols, you can just use col-lg-offset-3 col-lg-6 classes and don't use it inside that white block, or if you use it inside that white block you can set this classes col-lg-offset-2 col-lg-8 and change the left and the right padding from 15px to 45pxlike you can see in this example (code here).
As you can see, everything is possible in bootstrap, you just have to change the left and right padding and you can create any type of layout you need.
I guess, it's because you did this whole thing in a <div class="container"> so the grid went according to this block. Just remove the <div class="container"> and the inner blocks will snap to the 'main' grid. Play a little with classes and offsets and it will look like in the first picture.
I found a couple of variations of your question, mainly because I had the same problem a while ago - maybe one of the answers to those can help you out:
Bootstrap 3 nested grid not reset to 12
Prevent bootstrap 3 from resetting nested grids / use master grid
I'm working on a mobile site, which has a fluid layout. On the main page, I have a table which contains a few products.
Each product has 3 divs: product-image, product-name and prices-container.
I can't seem to figure out how to align the prices-container div horizontally across the table-rows.
I'm thinking that there would be 2 approaches to this problem: either product-name always takes the height of the highest product-name across the table-row, either prices-container always sticks to the bottom of my product table-cell. Can't seem to figure out how to apply any.
Here's an illustration of the problem.
Left image shows my problem and right image shows how I would like it to be.
This wouldn't be a problem if product-name would have a fixed height, but due to the fact that this text is dynamic, I cannot know what height it will have. Might be one line of text, might be 10 lines.
I created a CodePen, where you can check my code and the problem >>here<< (I know it looks ugly, using background-colors to figure out faster what's happening).
I'm using Jade for my HTML and Stylus for my CSS.
Limitations:
- must be CSS & HTML only, I would prefer not using Javascript
- solution must be suitable for fluid layout (width is set with percentage)
- cannot use a fixed height of product-name, this being a dynamic text
Any ideas how to do this? Thank you! :)
add vertical-align:bottom; css style to .box1 class.
Similarly, add same style for .box4 css class.
Thanks,
I'm working on my blog which when viewed in > 1020px wide will look like this, using three columns which will load posts in left to right (i.e. place post 1 in the left column, post 2 in the middle, three in the right, then start from the left column again):
This works great, however when the browser reduces down below 1020 the layout will convert to a single column. This is visually easy to achieve by placing the columns underneath each other (looks fine), but this causes the posts to be out of order - the first three posts if there were 9 posts total would actually be post 1, 4 and 7.
I want to maintain the cleanliness of pure CSS managed layout, so I'm wondering if there's a trick to having the above three column layout with floated elements in a single container (rather than three columns).
I've played around a little bit with just floating left and clearing after every three tiles, but that of course just ends up placing every three tiles in a 'row' underneath the tallest tile in the 'row' above.
I know you said you wanted pure CSS but the jQuery library Masonry is specifcally designed for this kind of stuff.
http://masonry.desandro.com/
Otherwise I have not found a good way of achieving this with pure cross browser compatible CSS.