Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a small school project where I try to learn using CSS and Tailwind. I need to show my data using a loop in Vue. This data needs to be shown in rows of 3, 2 and 3 in desktop view and all underneath each other in mobile view. When in desktop view it is necessary that all items are the same size and the items of the second row should be centered. I don't know what is the best way to display all items like the image below:
Not purely with Tailwind I believe although its growing so much lately who knows, it might be possible.
The layout is straightforward except for the middle row. For that I added extra margins to force just 2 items on that row, and that would be where your custom css would come in and target those items using :nth-child()
https://codepen.io/clintongreen/pen/gOwmEKY
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 months ago.
Improve this question
My front makes an API request and retrieves a number of items. With these items a flex grid is built, for example like this:
It is a responsive web and I would like to always have 2 rows, regardless of the width of the screen and hide the remaining items. Something like this:
You could try using the :nth-child() selector on the child elements to select everything after the 6th child and set display to none. I am not that familiar with the :nth-child selector, but I made a quick version and it seemed to achieve the desired behaviour with the below CSS.
.flexbox>div:nth-child(n+7) {
display: none;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I've read essential and basic instruction of Bootstrap 4 and I have a question about it :
When we should use .row in our structure. Cause I've seen this and it did not use .row in their code. However basic structure of Bootstrap looks like container(or container-fluid) -> row -> col-*-* . My guess is when we use tables or Jumbotron, we shouldn't use it but I have no idea why. Is there any idea?
When using the grid system (col-*-*) in Bootstrap, you should use rows.
Your example doesn't use the grid system, so rows aren't needed.
The grid system is contains of 12 columns, but if you don't want for example col-6 and col-4 to be on the same row, you should have 2 rows. So you use row to "separate" 2 (or more) grids from together.
You can read more about grids and rows in the docs.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Say I want to make a website, and I want the page to have some sort of a main-area, and it's supposed to be something like an open book,
sort of something like that if I want to make my point, I want the left border to be 100% of the height of whatever the page is going to show, and the right border(the one that's intersecting with the left border of the right page) to be say 90% of the height of it... that's sort of the idea of the design.
I was sure there would be some HTML5 features that would support this since I've seen stuff like this around the internet but I realized it wouldn't be that easy.
I hoped that there would be people with proper knowledge of web design that could help me with this thing
This is very good article for page flip functionality with html5 :
http://www.creativebloq.com/html5/create-page-flip-effect-html5-canvas-8112798
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Given that CSS components (buttons etc.) can be used apart from Bootstrap grid system, what are the actual advantages of using Bootstrap over CSS flex model?
I am asking this questions as I always have big problems with margin/padding in Bootstrap 3 as few pixels (15px or so) are added, preventing me to take advantage of the full width of a container. Also, if I try to manually sent the margin to 0 the whole layout is displaced (including outer containers)
One current disadvantage of using flex is that it doesn't work for IE9 or earlier. It's probably a bit soon to be dumping them yet.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I've battled with a two column layout for a WP index and got it working.
However on this one site it will not work:
http://justbedroomdesigns.com
You will notice that the third box containing a pic of a bed (or the first box in the second row - bottom left one) is not in its correct place (to the left of the final box with a bed pic).
I've used height auto to try fix it but it's still out of place.
All help hugely appreciated as is all the help I get from this awesome community.
the reason is that your images height is not same so give height to your post-block DIV. Like this:
.post-block{
height:355px;
}
I would suggest using a CSS reset if you dont already use one. http://meyerweb.com/eric/tools/css/reset/ Using and calling one before calling your css file can do wonders with cross-browser consistency. May be a pain to add now being that after you will also have to change your current CSS again but as a last resort, should help remedy your issues. Also by adding the above code by #sandeep as it fixed the issue I was seeing in Ffox.