When the screen size is greater than 560px, my page looks like...
When the screen size is smaller than 560px, my page looks like...
However, when block 2 and block 3 become too close, it looks like...
when I want it to look like...
Long story short, block 1 and 3 have set heights and widths, and block 2 doesn't. Instead of block 3 moving down below the level of block 2, I want block 2 to adjust with the screen size. My code (let me know if it's not enough) can be seen below.
<div className='box'>
<div className='test'>
<p className='box1'>1</p>
</div>
<div className='test'>
<p className='box2'>2</p>
</div>
<div className='test'>
<p className='box3'>3</p>
</div>
</div>
.box {
display: flex;
flex-wrap: wrap;
flex-direction: row;
column-gap: 16px;
div.test {
&:first-child {
width: 32px;
height: 32px;
}
&:last-child {
width: 24px;
height: 24px;
margin-left: auto;
}
}
#media all and (max-width: 560px) {
display: flex;
justify-content: space-between;
div.test {
&:first-child {
text-align: -webkit-center;
margin: auto;
margin-bottom: 16px;
width: 100%;
}
}
}
}
p.box1 {
width: 32px;
height: 32px;
font-size: 20px;
object-fit: contain;
flex-shrink: 0;
align-self: center;
}
p.box2 {
margin: 4px;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
color: #000;
}
p.box3 {
width: 24px;
height: 24px;
font-size: 14px;
object-fit: contain;
flex-shrink: 0;
align-self: center;
}
I changed the code around to try and make it more understandable, but let me know if you have any questions! I think the flex-wrap: wrap may be the reason for my issue, but I really don't know how to resolve it without messing up other aspects. I am fairly knew to JS and CSS, so I know I probably have several issues otherwise, but I appreciate any help!
Edit: My styling files are SCSS files.
Related
This is how it's looking
i need to make the icon and the text on the same line and close to each other, i tried usingdisplay: inline-block; but it didn't work, here's my code.
HTML:
<div className="Comment_Icon">
<img src={StudentIcon} alt="StudentIcon" class="Student_Icon"></img>
<div className="Comments">5 Class Comments</div>
</div>
CSS:
.Student_Icon {
height: 1vw;
width: 1vw;
display: inline-block;
}
.IconText {
padding-top: 0.8vw;
font-size: 1.5vw;
}
.Comments {
font-size: 2.5vw;
display: inline-block;
}
Use flex in this case as shown below
.IconText {
padding-top: 0.8vw;
font-size: 1.5vw;
}
.Comments {
font-size: 2.5vw;
display: inline-block;
}
.Comment_Icon {
display: flex;
flex-direction: row;
align-items: center;
}
.Student_Icon {
margin-right: 3px;
}
<div class="Comment_Icon">
<img src={StudentIcon} alt="StudentIcon" class="Student_Icon"></img>
<div class="Comments">5 Class Comments</div>
</div>
.Student_Icon {
float: left;
padding-right: 10px;
}
.IconText {
padding-top: 0.8vw;
font-size: 1.5vw;
}
.Comments {
font-size: 2.5vw;
display: inline-block;
}
<div className="Comment_Icon">
<img src=https://via.placeholder.com/20 class="Student_Icon"></img>
<div className="Comments">5 Class Comments</div>
</div>
I made use of float: left;
So the icon/image comes left and the text next to it.
You can achieve this with flexbox styling. Note that I am changing your React structure a bit and also adding a fake image. And did you mean to use 1vw? that means 1% of the viewport width and is pretty small - esp on small screens.
Using and referencing REM units is more reliable ( REM is set in the root element and is usually 16px but can be changed. But the advantage of using rems is that it is a common size that all elements can access.
.Comment_Icon {
display: flex;
align-items: center;
}
.Student_Icon {
height: 1.5rem;
width: 1.5rem;
}
.Comments {
font-size: 1rem;
margin-left: 8px;
}
<div class="Comment_Icon">
<img src="https://hipsiti.com/uploads/default-profile.png" alt="StudentIcon" class="Student_Icon"/>
<span class="Comments">5 Class Comments</span>
</div>
I have a header-component that has a title to the left and some links to the right of the page. The size and position of these divs are (partially) responsive and I am happy with the way they move along when I resize my window. However, I would like the left div to act as a wall for the others. As in when I resize my window to really small the links will 'hit' the title and only then start wrapping into multiple lines. How can I do this?
<html>
<head>
<style>
.body {
position: fixed;
top: 0;
background-color: lightgoldenrodyellow;
box-sizing: border-box;
width: 100vw;
height: calc(2% + 75px);
z-index: 10000;
}
.titleContainer {
position: fixed;
left: 0;
display: flex;
align-items: center;
font-size: calc(18px + 0.5vw);
width: 250px;
min-width: 200px;
height: calc(2% + 75px);
transition: 0.3s;
margin-left: 10px;
}
.titleContainer:hover{
cursor: pointer;
}
#title {
margin-right: auto;
padding-left: 5px;
text-decoration: none;
font-size: 32px;
font-weight: 750;
font-family: Arial, Helvetica, sans-serif;
}
.pageLinkContainer {
position: fixed;
right: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: calc(2% + 75px);
width: auto;
}
.pageLink {
margin-right: 10px;
margin-left: 2px;
font-size: calc(12px + 0.3vw);
}
</style>
</head>
<body>
<div className="titleContainer">
<h3><Link id="title" to="/" >TITLE</Link></h3>
</div>
<div className="pageLinkContainer">
<Link className="pageLink" to="/upload">Upload a funny Gif</Link>
<Link className="pageLink" to="/gifs"> Look at funny Gifs</Link>
<Link className="pageLink" to="/database">Database</Link>
</div>
</body>
</html>
EDIT #3:
As per Niwo's answer below, here's my current css. I use Styled Components that create a body as a wrapper around the component. I've tried to explain the flow of the page as clearly as possible. Another idea I had was to use the window.innerWidth to make the links disappear if the window is resized.
I've updated this CSS to the working answer, for anyone who cares to know. I've also added back in my styled Components (which I removed in order to remove the React from this). All credits go to Niwo of course.
CSS
//GLOBAL STYLE
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
background-color: rgba(0,0,50,0.3);
height: 100%;
width: 100%;
position: absolute;
}
`
//GLOBAL CONTAINER
//A WRAPPER-DIV AROUND ALL COMPONENTS
const GlobalContainer = styled.div`
{
height: 100%;
width: 100%;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
`
//HEADER COMPONENT
//ANOTHER WRAPPER-DIV JUST FOR THIS COMPONENT
const HeaderStyle = styled.div`
{
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
background-color: rgba(100,200,100,0.6);
width: 100vw;
height: calc(2% + 75px);
z-index: 10000;
}
.titleContainer {
display: flex;
flex-shrink: 0;
align-items: center;
font-size: calc(18px + 0.5vw);
width: 250px;
transition: 0.3s;
margin-left: 10px;
}
.titleContainer:hover{
cursor: pointer;
}
#title {
text-decoration: none;
font-size: 32px;
font-weight: 750;
font-family: Arial, Helvetica, sans-serif;
}
.pageLinkContainer {
right: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: calc(2% + 75px);
}
.pageLink {
white-space: nowrap;
margin: 0 0.5rem;
font-size: calc(12px + 0.3vw);
}
`
HTML
<GlobalStyle />
<GlobalContainer>
<HeaderStyle>
<div className="titleContainer">
<h3><Link id="title" to="/" >Movie Scores</Link></h3>
</div>
<div className="pageLinkContainer">
<Link className="pageLink" to="/upload">Upload a funny Gif</Link>
<Link className="pageLink" to="/gifs"> Look at funny Gifs</Link>
<Link className="pageLink" to="/database">Movies We've Seen</Link>
</div>
</HeaderStyle>
</GlobalContainer>
Use flexbox to prevent other elements from overlapping
If you want the solution on fiddle, it's right here: https://jsfiddle.net/Niwo04/o1df63L2/1/
I've cleaned your code a bit up and replaced your React stuff with normal HTML (because I don't know something about React). I also did some coloring, because I thought that might make everything visually better to understand.
If you have any questions about my changes, feel free to reply on this answer ; )
body {
margin: 0;
background-color: darkgray;
}
.body {
position: fixed;
display: flex;
justify-content: space-between;
background-color: lightgoldenrodyellow;
width: 100vw;
height: 75px;
z-index: 10000;
}
.titleContainer {
display: flex;
align-items: center;
width: 250px;
background-color: red;
flex-shrink: 0;
}
.pageLinkContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: blue;
}
.pageLink {
white-space: nowrap;
margin: 0 0.5rem;
}
<html>
<body>
<div class="body">
<div class="titleContainer">
<h3>TITLE</h3>
</div>
<div class="pageLinkContainer">
<a class="pageLink">Upload a funny Gif</a>
<a class="pageLink">Look at funny Gifs</a>
<a class="pageLink">Database</a>
</div>
</div>
</body>
</html>
I tried coding it myself based on research on the internet. I was able to get it fixed at the bottom. When clicking, it does slide out the menu; but it slides out downwards when it should have pushed the tab upwards to display the menu. If I use negative margin and simply change bottom: -150 to bottom: 0px on click, it does produce the desired behavior by sliding it up from past the bottom of the window and it displays correctly. But it means the menu is pushing the page past the bottom of the page rather than simply being hidden. So when it's "hidden", one can simply scroll down and see the full menu which shouldn't be the case.
So rather than using bottom to manipulate it, I tried using $(this).show("slide"). The menu came out looking distorted thanks to using the sliding animation.
Here's the snippet:
var supTabState = false;
$("#dccontainer").css('bottom', '-150px');
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500, function() {
//execute this after slideToggle is done
});
supTabState = !supTabState;
if (supTabState) {
// $("#dccontainer").css('bottom', '0px');
$(this).show("slide", {
direction: "down"
}, 1000);
} else {
// $("#dccontainer").css('bottom', '-150px');
$(this).show("slide", {
direction: "up"
}, 1000);
}
});
#dccontainer {
position: absolute;
bottom: 0;
width: 300px;
left: 50%;
height: 200px;
margin-left: -150px;
transition: .5s;
overflow: hidden;
}
#dccontainer * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
font-weight: bold;
/* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}
#dcsupporttab {
background-color: #f5f5f5;
color: #434343;
text-align: center;
width: 150px;
padding: 10px;
padding-bottom: 3px;
margin: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
#dcsupportcontainer {
background-color: #f5f5f5;
padding-top: 10px;
color: #434343;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
/*height: calc(100% - 43px); */
display: none;
}
.dcbutton {
display: flex;
text-align: center;
background-color: #fff;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 230px;
height: 40px;
}
.dcthelabel {
text-decoration: none;
color: #434343;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nonsolid {
background-color: #f5f5f5;
border-color: #fff;
border-style: solid;
border-width: 3px;
}
#dcmessageus {
text-transform: none;
}
#dcaslnow {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
I've tried various techniques. I've tried toggling with CSS alone using CSS animation and toggleClass, I've tried using slide, and I've tried using slideToggle. I also tried using display: block; instead of using flexbox. Both had the same effect. Researching the internet yielded several possible solutions (which I've tried, but all came out with the same result), and those usually weren't based on an element being fixed at bottom of window. The only one that came closest to what I was looking for was this:
http://atomicrobotdesign.com/blog_media/toggleslide_multiple.html
But strangely, when I attempted to use the same code that used, nothing happened. Clicking did not bring up the menu. I'm at a loss at this point. Where am I going wrong?
This is my latest attempt (using above code): https://codepen.io/doncullen/pen/JjdrxzY
To answer your question Where am I going wrong: you're specifying a fixed height of 200px on #dccontainer. Specifying a fixed height to the container renders the jQuery's slideToggle useless. jQuery's slideToggle animates the height of the given element, and in your case, you're animating #dcsupportcontainer. Even though you're animating the height of #dcsupportcontainer to 0px using slideToggle, the whole support block will still remain 200px in height. This causes makes the whole block not to move down when the #dcsupportcontainer is gone. You can, of course, manually calculate and assign the new bottom value to #dccontainer, but that's a real hassle and really unintuitive.
Not wanting to calculate the bottom value myself, I will not set a height to #dccontainer and just let its height be. It will set its height to all its children's requirements (the default value is auto). Furthermore, instead of using fixed, you used absolute. You should use fixed here as you want the support block to always be visible (even when the user scrolls down); this means that you should position it based on your viewport and not an element (read more about positioning here). I also did minor adjustments on your CSS styles so that it's a tad more concise. One last thing, I suggest that you revisit flexbox here and here to utilise it better.
Here's a working solution:
// First time accessing, hide the support buttons section
$('#dcsupportcontainer').hide()
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500)
});
* {
box-sizing: border-box;
margin: 0;
}
body {
min-width: 100vw;
min-height: 100vh;
}
#dccontainer {
position: fixed;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
width: 50vw;
min-width: 200px;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
}
#dccontainer * {
padding: 7px 20px;
text-align: center;
}
#dcsupporttab {
font-weight: bold;
border-radius: 5px 5px 0 0;
background: #121212;
color: #ffffffee;
cursor: pointer;
}
#dcsupportcontainer {
border: 1px solid #121212;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
Just take the fixed height from your main container #dccontainer, and everything will be fine. You should also remove a few lines of your javascript code to fix everything. That fixed height of dccontainer makes the whole nav to stand 200px up from the bottom of your page and that makes you use more jQuery to fix it at the bottom. Remember that the bottom: 0px will set the bottom of your element at the 0px bottom of its container.
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500, function() {
//execute this after slideToggle is done
});
});
#dccontainer {
position: absolute;
bottom: 0px;
width: 300px;
left: 50%;
margin-left: -150px;
transition: .5s;
overflow: hidden;
}
#dccontainer * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
font-weight: bold;
/* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}
#dcsupporttab {
background-color: #f5f5f5;
color: #434343;
text-align: center;
width: 150px;
padding: 10px;
padding-bottom: 3px;
margin: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
#dcsupportcontainer {
background-color: #f5f5f5;
padding-top: 10px;
color: #434343;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
/*height: calc(100% - 43px); */
display: none;
}
.dcbutton {
display: flex;
text-align: center;
background-color: #fff;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 230px;
height: 40px;
}
.dcthelabel {
text-decoration: none;
color: #434343;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nonsolid {
background-color: #f5f5f5;
border-color: #fff;
border-style: solid;
border-width: 3px;
}
#dcmessageus {
text-transform: none;
}
#dcaslnow {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
I dont really know what exacly write.
I have 4 boxes with width 300px, if document width is (I dont know maybe) 600px then 2 boxes should stay at page and others should be hide.
Is there a way to make it dynamic? Maybe js or jquery? Hope you can help me with this! ^^
Here is what I have now.
HTML
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<article class='Conteiner' id='howItWorks'>
<section class='Conteiner-Highlight howItWorks-Highlight'>Jak to działa?</section>
<section class='Steps'>
<section class='step'><div class='digit'>1</div><span class='digit-description'>Analizujemy <br> potrzeby klienta</span></section>
<section class='step_hidden'><div class='digit'>2</div><span class='digit-description'>Tworzymy <br> projekt graficzny</span></section>
<section class='step_hidden'><div class='digit'>3</div><span class='digit-description'>Przedstawiamy <br> propozycję klientowi</span></section>
<section class='step_hidden'><div class='digit'>4</div><span class='digit-description'>Przystępujemy <br> do pisania strony</span></section>
</section>
<section class='steps-Controls'>
<span class='steps_check'>
<i class='material-icons'>radio_button_checked</i>
<i class='material-icons'>radio_button_unchecked</i>
<i class='material-icons'>radio_button_unchecked</i>
<i class='material-icons'>radio_button_unchecked</i>
</span>
<span class='steps_arrows'>
<span class='step_arrow' id='step_arrow_left'><i class='material-icons'>keyboard_arrow_left</i></span>
<span class='step_arrow' id='step_arrow_right'><i class='material-icons'>keyboard_arrow_right</i></span>
</span>
</section>
</article>
</body>
</html>
SCSS
:root{
--red: rgb(231,76,77);
--white: rgb(242,241,244);
--darker-blue: rgb(14,60,91);
}
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100vh;
color: #0E3C5B;
font-size: 16px;
}
/* Modern browsers */
#media screen and (min-width: 25em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
/* Safari <8 and IE <11 */
#media screen and (min-width: 25em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
#media screen and (min-width: 50em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
.Conteiner-Highlight{
width: 100%;
height: 100px;
font-family: Roboto;
font-weight: 900;
display: flex;
justify-content: center;
align-items: center;
margin: 50px auto;
font-size: 1.2rem;
}
.Conteiner{
width: 100%;
min-height: 1000px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-bottom: 1px solid rgb(14,60,91);
}
#howItWorks{
.Steps{
width: 80%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row;
.step , .step_hidden{
max-width: 300px;
width: 80%;
max-height: 500px;
height: 60vh;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 0px 4px 10px rgba(144,144,144,.5);
margin: 0 50px;
border-bottom: 10px solid rgb(231,76,77);
padding: 10px;
transition: all .3s ease-in-out;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.digit{
height: 40%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
font-family: Roboto;
font-weight: 900;
color: rgb(231,76,77);
}
.digit-description{
height: 30%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: .5rem;
font-family: Raleway;
font-weight: 400;
}
}
.step_hidden{
opacity: .3;
}
.arrow{
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
}
.steps-Controls{
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
margin: 50px 0;
.steps_arrows{
display: flex;
flex-flow: row;
margin: 10px 0;
cursor:pointer;
.step_arrow{
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
margin: 0 10px;
background-color: var(--red);
i{
color: var(--white);
}
}
}
.steps_check{
display: flex;
flex-flow: row;
cursor:pointer;
i{
font-size: .4rem;
}
}
}
}
CodePen
There are several ways to do this.
You could just make the css-container of those elements non-wrapping, so if there isn't enough space, they are just not visisble by window-size.
In this scenario it is possible to see 2 + 1/2 Elements when you resize the window because they "disappear" gradualy.
The other solution is just to use javascript. You could write a function that is fired on each resize-event and write an if-condition where those elements' visibility is hidden when the window-size gets too small.
For both solutions there are plenty of examples and documentation out there, so i would just suggest you search for those and pick one that is easy to understand for you and fit's your situation.
edit: Since other comments on your question came up: If you only make your decision based on the whole viewport-size, then you can use #media-queries. You can't use them if you are depending not on the viewport but some outer html-element and layouting.
You can achive this by media queries. if you expand the snippet you can see all other hidden boxes.
.container{
display: flex;
flex-direction : row;
}
.container .box{
margin: 5px;
background-color : #333;
width : 50px;
height: 50px;
}
#media screen and ( max-width: 982px ) {
.container .box:not(:first-of-type){
display:none;
}
}
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
example according to you code :
https://codepen.io/anon/pen/EeOgxE
I don't really know what exactly (to) reply ;)
You could skip script entirely and go with CSS, assuming that each box is 300px wide and 600px combined, you could do something like this:
/* Showing 2 */
#media (min-width: 600px)
{
.my-container-with-four-boxes {
width: 600px;
height: 300px;
overflow: hidden;
}
}
/* Showing 3 */
#media (min-width: 900px)
{
.my-container-with-four-boxes {
width: 900px;
height: 300px;
overflow: hidden;
}
}
/* Showing 4 */
#media (min-width: 1200px)
{
.my-container-with-four-boxes {
width: 1200px;
height: 300px;
}
}
You'd probably have to adjust the screen limitations and container sizes with padding or something else not mentioned here ;)
I have the following HTML:
<div class="admonition info">
<p class="admonition-title">Info</p>
<p>Text here</p>
</div>
And CSS:
.admonition {
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.admonition > p {
margin: 0;
padding: 6px;
display: block;
}
.admonition-title {
background-color: #2B83BD;
color: #fff;
display: block;
padding: 2px;
}
.admonition > .admonition-title {
font-size: 1px;
letter-spacing: -1px;
color: transparent;
width: 64px;
text-align: center;
vertical-align: middle;
min-width: 60px;
}
.admonition > .admonition-title:before {
font-family: "FontAwesome";
font-size: 32px;
letter-spacing: normal;
color: #fff;
}
.admonition.info > .admonition-title:before {
content: "\f129";
}
.admonition.info > p:not(.admonition-title) {
background-color: #7DBAE3;
}
.admonition.info > .admonition-title {
background-color: #2B83BD;
}
I would like to render the children with the following constraints:
They are vertically centered
If their height is not equal, they should stretch to fill the gaps
The white gaps are what I would like to avoid. Live on JSFiddle
The HTML is generated from markdown and I don't really have control over the structure. Is this possible to implement in a simple way? Javascript, jquery is also OK, but I'd prefer to do this in CSS.
Just use align-items: stretch; to make the items fill the parent height.
Then, your icon will need to be centered manually, I have done it with:
.admonition > .admonition-title {
display: flex;
align-items: center;
justify-content: center;
}
https://jsfiddle.net/4mw8a08x/