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;
}
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 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
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
the answers I found on the Internet are all pretty specific. So what should I generally do when two elements, their children, and their parents have seemingly the same CSS attributes, but look different?
Inspect the element and look at the styles tab of your developer tools. The style rules appear in the order they are applied and the top most rule is with the highest priority.
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 details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
http://cdpn.io/ezIxj
I'm working on a portfolio site and would like each project box to span 4 columns on all layout sizes. Their width seems to be correct based on the column grid shown. But why do the right margins get ignored by the browser??
Because .project is indeed the last child in .project-container div.
I'm not massively familiar with Burbon - just switched those ( .project and .project-container ) classes around
so now .project:last-child properly applies to the last-child
Have a look: http://codepen.io/VarinderS/pen/kwgms
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 6 years ago.
Improve this question
I'm trying to apply CSS transition effect when an element comes to viewport (i.e. when user scrolls to it), but not before.
I already know how to use CSS transitions, but how do I apply them only when the element comes to viewport?
What it the best way of doing this? If there's some library's to simplify the task, I would be glad to know.
Give CSS3 Animate It a go, makes the whole process as simple as adding a few clases.
http://jackonthe.net/css3animateit/
Then you can just add the classes like this to get started.
<div class='animatedParent'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>