This question already has an answer here:
Proper use of flex properties when nesting flex containers
(1 answer)
Closed 4 years ago.
I want to make the social media icons at the bottom of the column using margin-top: auto;
I have tried to push the block down but haven't had any success I've included a jsfiddle with the source code. I would just like the social icons (the black box) to be aligned to the bottom using margin-top: auto;
.team .thumbnails {
margin: 0;
padding: 0;
display: flex;
width: 100%;
}
.team .thumbnails .social-inline {
padding: 0;
background: #000;
margin-top: auto;
}
Jfiddle example:
http://jsfiddle.net/hj5f2nr9/13/
you need to imbricate your flexbox , so the .social ul becomes a flex child.
.profile, .thumbnail,.caption {display:flex;flex:1;flex-direction:column;}
http://jsfiddle.net/hj5f2nr9/33/
flexbox imbrication will preserve the flex behavior you look for until the parent container of .social.
Note: that you could simplify the HTML structure to avoid so much imbrication ;)
Related
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 2 years ago.
The following header looks fine on full-width; but once I start sizing down; there's a large gap to the left of the ipsom lorem text, where it should be filling in the full-width of the screen as it sized down. (First picture is full-width; second picture is what should happen when it sizes down).
Here is my code so far:
.header {
background-color: #090c1a;
}
.header-inner {
color: white;
display: grid;
max-width: 1180px;
margin: 180px auto;
grid-template-columns: 1fr minmax(50%, auto);
}
I've also created a codepen for convenience. https://codepen.io/tiotolstoy/pen/PoPzoQw
I don't think a grid is the best approach for what you described. I would do it with a "max-width: 590px" on the nested div inside the header-inner. like here - https://codepen.io/urich/pen/rNOLNZd
.header-inner {
color: white;
max-width: 1180px;
margin: 180px auto;
}
.header-inner >div {
max-width: 590px;
}
If you just want the mobile version's p element to take up full width, with just a tiny bit of padding to prevent text from touching the edge, change your CSS to this:
.header {
background-color: #090c1a;
}
.header-inner {
color: white;
padding: .5rem;
}
You could also add a media query for the larger version to prevent the text from stretching the entire length of the div if you don't want the p element spread out too far on large screens, like this:
#media(min-width: 768px) {
.header-inner {
width: 50%;
}
}
Play around with the percentage until you get the desired width on full screens.
This question already has answers here:
Last margin / padding collapsing in flexbox / grid layout
(4 answers)
Closed 5 years ago.
I'm trying to get a centered dialog-like content with minimal markup and CSS and I almost got it working with the following code (you can try it in CodePen here: https://codepen.io/rosenfeld/pen/Rxgwrq):
#container {
display: grid;
padding: 1em;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
background-color: white;
align-content: center;
justify-content: center;
}
#item {
text-align: justify;
font-size: 20px;
text-shadow: 1px 1px lightblue;
max-width: 400px;
background-color: lightyellow;
padding: 1em;
overflow: auto;
}
h1 { text-align: center; color: darkred; }
a { color: darkred}
<html>
<head>
<title>404 - Not Found</title>
</head>
<body>
<div id=container >
<div id=item>
<h1>404</h1>
Sorry, the page you are looking for does not exist. You may want to navigate to our main page. If you just clicked on a broken link, please get in touch so we can fix it.
</div>
</div>
</body>
</html>
The only issue I found was that the right padding of the item is not respected when the content overflows. Try shrinking the window width as much to force the horizontal scroll bar to appear and you'll notice that the item padding-right is completely ignored.
Is it possible to fix this without changing the markup or using :before and :after pseudo-selectors in the CSS?
P.S.: My first attempt to implement this was using Flexbox but I found several issues that don't seem to happen with grid layouts. For example, with Flexbox I was forced to use "margin: auto" for the item instead of the alignment properties, as they would make the top content disappear. Another difference is that with grid layout the bottom padding is respected, the only issue being the right padding (Update: in Chrome, but not in Firefox, for example, so this is not consistent among browsers). Using CSS grids allowed me to get closer to what I want with less and cleaner code when compared to using Flexbox. Also, the problem with using "margin: auto" is that you're unable to actually set up some margin to the item.
This is because the word can not be broken by a line break. And if it does not fit, part of it is on the "territory" of padding.
For exam give to .item property word-break: break-all;.
I have a page with tab navigation at the top (page here; tabs are 'Production,' 'Story and Development,' etc). I would like to ensure the row of tabs are horizontally centered on the page. How can I accomplish that? If I'm not mistaken, it's currently a tad off center.
By following the instructions on the W3 Schools page on CSS centering, I came close by setting:
display: block;
margin: auto;
width: 99%;
But I'm not sure if that's the proper/best solution. Is there a solution that does not require setting width: 99%?
If it matters, the site has been built with WordPress.
Thanks.
You have two ways you could approach this:
The text-align: center Method
.ut-nav-tabs li {
display: inline-block;
float: none;
vertical-align: top;
}
.ut-nav-tabs li:last-child {
margin-right: 0px;
}
.ut-nav-tabs {
text-align: center;
}
This works only if you declare text-align: center on the containing parent - the parent element must be a block element. The nested children elements must be inline block elements (e.g: display: inline-block) with no float rules declared on them, floats will negate any attempt to horizontally center align elements this way, and most other ways.
The display: flex Method
.ut-nav-tabs {
display: flex;
justify-content: space-around;
}
.ut-nav-tabs li {
float: none;
margin-right: 0px;
}
This is the "new kid" on the block and the "hot fix" for any alignment issue concerning CSS these days, I would hazard to say it is the "jQuery" of CSS now.
Anyway, it is for good reason, flex-box rules allows you to specify general alignment (horizontally and vertically) and lets the browser do all the calculations for precise positioning - this is also why is a popular responsive solution too.
Browser Compatibility: A heads-up though, flex-box has poor or very limited support for legacy browsers, older browsers may give you unexpected results, so you should use this with caution in production code if that will be a concern.
I think this way is better :
.ut-nav-tabs {
width: 100%;
text-align: center;
}
.ut-nav-tabs li {
width: 179px;
float: none;
display: inline-block;
zoom: 1;
vertical-align: middle;
}
I am aiming to create a simple image grid using css floats with certain 'featured' blocks which are double the size of the others.
I have it mostly working fine however when a block is featured I'm unable to get the next block to fit underneath it correctly.
I've included a jsfiddle to make the problem much clearer. You will see that at the bottom of the output there is a block on a row of it's own to the right of the featured element (with the class 'problem'). I would like this to instead be on the left of the featured block and on the same row as it is currently so that I can add another 2 blocks to create a completed grid but I can't work out how.
CSS:
.grid {
ul {
padding: 0;
margin: 0;
width: 100%;
li {
width: 20%;
float: left;
list-style: none;
box-sizing: border-box;
white-space: nowrap;
list-style: none;
line-height: 0;
img {
width: 100%;
}
}
}
.featured {
width: 40%;
}
}
(Nested css is due to scss).
Full fiddle: Link
Any help is greatly appreciated.
Technically this is called Dynamic Grid Layout
As per your requirement you have to use jquery here because there is no solid solution available using only css and html.
There are ready made plugins available online.
You can see or download the demo from here:
Reference 1:
Reference 2:
I have a Span tag containing a IMG tag and another Span tag.
I would like the inner Span tag to be aligned to the left and the IMG tag to be centrally aligned plus I want both the tags to be vertically aligned in the middle, and I can't seem to get this right...
This is how it looks (It's blue because the outer Span tag is marked in FireBug to show that it's stretching the entire surface):
As you can see in the image, both tags are centred and they are also aligned in the top of the container, I don't want either of this.
This is the markup:
This is the current CSS of the tags:
.v-button-wrap {
height: 100%;
display: block;
padding: 6px 15px 0 9px;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-icon {
margin-left: auto;
margin-right: auto;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-button-caption {
text-align: left;
line-height: normal;
vertical-align: middle;
}
I left out the CSS that isn't relevant for my problem, colors, font-specs and such. Needless to say I'm no ace at CSS. And I've looked up several guides covering the problem, but I've only managed to find examples where the entire content of a div is centered, and that's not what I want.
Does anyone with good CSS knowledge see the problem in my code? Or have another solution to solve my problem..?
Thanks!
EDIT: Here's a screen shot of the entire layout due to request. Sorry I have to blur some things... but they are in either case not important. =)
EDIT2: I did manage to solve my problem using the following CSS:
.v-button-details-panel-header .v-button-wrap {
height: 100%;
text-align: inherit;
padding: 0px;
}
.v-button-details-panel-header .v-button-wrap .v-button-caption {
display: table-cell;
position: relative;
text-align: left;
}
.v-button-details-panel-header .v-button-wrap .v-icon {
display: table-cell;
position: relative;
top: 12px;
margin-left: auto;
margin-right: auto;
}
I'm sure the advice dgvid proposed would have been good for a static layout. But since the panels and horizontally stretched buttons move depending on expansion and collapsing that wasn't a fitting solution.
You might need to set the CSS display property of both your img and span.v_button_caption to inline-block.
See also this article: Understanding vertical-align, or "How (Not) To Vertically Center Content"
As for another technique to achieve the desired result: If you know the height of the container element and you know the height of the element to be centered (and unfortunately from the CSS you've posted, it does not appear that you do), then you could
Give the container element CSS property `position: relative'
Give the element-to-be-centered CSS property position: absolute
Set the CSS top property of the element-to-be-centered to (containerHeight / 2) - (centeredEltHeight / 2).