Margin right ignored in bourbon neat? [closed] - css

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

Related

Flex wrap limit number of rows [closed]

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;
}

How to align the icons to the right of the text with the icon list elementor module? [closed]

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 2 years ago.
Improve this question
I would like to Align the icons to the right of the text with the module "icon list elementor", there is no option for this can be a css solution?
icon list
You are correct, by saying that there is no option for that -
But in you module, you can achieve it by applying the following css.
selector .elementor-icon-list-item{
display:flex;
}
selector .elementor-icon-list-icon{
order:2;
}
This would make your list have the icon at the end, and you can then toy around with positioning.

Does "indent" term using only for horizontal gap? [closed]

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 2 years ago.
Improve this question
Is it correct to say "(vertical) indent before unordered list"?
Or "indent" term using only for horizontal spacing?
indent as a CSS property describes the space before the content horizontally floating on the left as shown in the docs
If you would like to achieve s.th. similar vertically, you have to use padding, margin or some flexbox logic whatever you want to achieve.

Responsive design and margins [closed]

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
With responsive designs, I heard we should use "%" instead of fixed measurements like "px" .
But it doesn't work how it should with margin?
I have a logo and links underneath it.
I added margin-bottom: 2% underneath it and it looks perfect from pc
But the links still overlap kinda in mobile.
What to do?
You have a negative margin on #page-header of -16px which is pulling the links back up...
Float your logo to force margin-bottom to work or use padding-bottom instead.

CSS - border-width issue in Safari + Opera [closed]

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
My top navigation is short by 2 pixels, but only in Safari and Opera.
http://orbitprint.com/canvas/
The ul has a box-shadow, so you can see that the last li is short. I can't figure out why for the life of me!
Is anyone able to throw some light on this for me please?
Well you use percentages in a pixel layout. Your Panel is 969px wide and 8Buttons with 12,5 percent (=> 969/8 = 121.125px) which have to fit into a natural numbered pixel. So the best would be to use display: table for the menu and display: table-cell for the buttons. That should split the given space as evenly as possible.

Resources