I currently have this design
As you can see, the jumbotron (boostrap v5) is aligned in the center but I want it to be touching the very top of the body. I've tried playing around with margin, display, and align but I can't seem to work it out.
Here is the code so far:
body {display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.jumbotron {
padding: 2rem 1rem;
margin: 0 auto;
width: 100%;
background-color: #e9ecef;
border-radius: .3rem;
}
If I delete the body's align-items:center, the jumbotron aligns at the top but for some reason its height then increases to take up almost all the body. Why might that be? How can I keep the size of the jumbotron as it appears in the image attached but get it to align at the very top?
Thank you!
You can remove the align-items: center; on body and add align-self: flex-start; to your jumbotron. Or just don't use display flex and if the jumbotron is the first item it will be at the top of the page.
body {
display: flex;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.jumbotron {
align-self: flex-start;
padding: 2rem 1rem;
margin: 0 auto;
width: 100%;
background-color: #e9ecef;
border-radius: .3rem;
}
Related
I used display: flex and justify-content: center to center the img within the div, it did in fact center the img but it shrank the img to a very small size. How do I center the img without having it shrink? I included a picture of this. I also tried re-sizing it with .img-star img { width: 3em; }, but it doesn't work. Pls help thanks.
.img-star {
border: 1px solid white;
padding: 20px;
margin: 30px;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
}
Not use flex. Use this CSS:
div {
text-align: center;
}
Don't use flex. just use this on your div
div {
text-align: center
}
Adding the align-items: center property could potentially fix it. It will also center the image vertically, if that is wanted.
I tried it with a div and it worked as intended It also appears to be fixing distorted images, such as this answer
img-star {
border: 1px solid white;
padding: 20px;
margin: 30px;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
}
set img display to block and set left + right margins to auto, e.g.
.img-star {
margin: 30px auto;
display: block;
padding: 20px;
border: 1px solid white;
border-radius: 50%;
width: 45px;
height: 45px;
}
You have also set the width of this class at 45px, so when this class is applied to an img it will be shrinking it to 45px. Try upping the width and height. width: 100%; height: 100%; will preserve your original image size to the max size of the block the image is in. Changing it based on px or em will set it to that e.g. width: 300px;.
I've got a small problem regarding background-image and some content. Right now, I've got a specific div that contains a background-image. I've got another one with content. They seperate the page into 2 sections. But when I'm sizing my image, it pushes the text all the way to the right. I'd like to have the image (it's smaller on small screens, but grows bigger when screen sizes increases) be independent from my content, so that I can center the text until the image is about to touch it, then make it so that the image is more on the left and the text more to the right. My HTML looks like this:
<div className={styles.indexMain}>
<div className={styles.imageWrapper}>
<div className={styles.heroImage}></div>
</div>
<div className={styles.ctaContent}>
<h1 className={styles.ctaTitle}>
Lorem Ipsum
<span> Lorem</span> Lorem Ipsum.
</h1>
<p className={styles.ctaSubtitle}>
Lorem ipsum some call to action paragraph
</p>
<Link to="/contact" className={styles.ctaButton}>
Contact us
</Link>
</div>
</div>
MY CSS currently looks like this:
.indexMain {
display: flex;
justify-content: space-between;
align-items: stretch;
position: relative;
margin-top: 5rem;
}
.imageWrapper {
flex-direction: column;
display: flex;
justify-content: flex-end;
}
.heroImage {
background-image: url(../images/heroBackgroundMain.png);
min-height: 100vh;
min-width: 50vw;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom left;
opacity: 0.9;
margin-top: 5rem;
z-index: -1;
margin: 0 auto;
}
.ctaContent {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0 auto;
margin-left: -2rem;
}
.ctaTitle {
font-weight: 500;
font-size: 2rem;
margin-bottom: 1rem;
text-align: center;
}
.ctaSubtitle {
font-weight: 500;
font-size: 1rem;
margin-bottom: 2rem;
text-align: jusitfy;
}
.ctaButton {
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-decoration: none;
background-color: #f07818;
transition: all 300ms ease-in-out;
font-size: 0.9rem;
}
.ctaButton:hover,
.ctaButton:focus {
background-color: #78c0a8;
}
.ctaTitle span {
color: #78c0a8;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
}
I hope it makes sense. I've been stuck on this for far too long, and I can't seem to figure out why :(
You have two sections, the left section is your background image and the right section is the text.
For bigger screens, your text isn't centered in the section to the right, because you move it to the left with minus margin. Remove margin-left: -2rem; from .ctaContent to fix it.
If you want the image behind the text, you can for example move the code for the background image to .indexMain. The content doesn't get affected by the image this way.
.indexMain {
display: flex;
justify-content: space-between;
align-items: stretch;
position: relative;
margin-top: 5rem;
//background image
background-image: url(https://placekitten.com/600/600);
min-height: 100vh;
min-width: 50vw;
background-size: contain;
background-size: cover;
background-repeat: no-repeat;
background-position: bottom left;
}
In this case, CSS media query plays a vital role in changing size, and shape, enabling or disabling the view of content, etc. You can read about responsive web design media queries on the w3schools website. This is very well explained there.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I have a chat box that looks like this:
My main issue is that all messages are a fixed width, when I want the width to auto-resize by the amount of text. The elements are all spans within the chat div, with a display of block (inline or inline-block will render side-by-side) and changed side margins to make messages 'stick' to one side. Here is my css
.psentMessage {
text-align: right !important;
background-color: #F0F0F0;
margin-right: 0 !important;
border-top-right-radius: 0 !important;
}
.pmessage {
text-align: left !important;
background-color: white;
margin-left: 0 !important;
border-top-left-radius: 0 !important;
}
.pmessage, .psentMessage {
display: block !important;
padding: 2vh 1vw;
max-width: 85%;
margin-top: 1vh;
margin-bottom: 1vh;
border-style: hidden;
border-radius: 10px;
}
How can I make the divs auto-resize but still have them in this layout?
This can be solved by a flexbox layout with flex-direction: column;.
When you add align-items: flex-start;, the width of each message is adapted to the content. Add align-self: flex-end; to the messages you want to align to the right side.
Simplified example: https://codepen.io/anon/pen/bMobqM
HTML:
<div>
<p class="other">Hello</p>
<p class="other">This is the project managment app</p>
<p>gwkki</p>
<p class="other">hello</p>
<p class="other">hi</p>
<p>Hello</p>
<p class="other">online</p>
</div>
CSS:
div {
background: #ccc;
padding: 20px;
width: 150px;
display: flex;
flex-direction:column;
align-items: flex-start;
}
p {
background: #fff;
padding: 10px;
}
.other {
align-self: flex-end;
background: #ddd;
}
More information about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
inspired by:
Flexbox - Vertically Center and Match Size
fiddle with the problem:
http://jsfiddle.net/Nbknc/22/
what i try to achieve:
I want to get the text of the second button to start at the same height as the text on the first button.
HTML
<section class="buttonsSection">
<a class="button" href="#">Very Long Word aaaa xx ccc ddd ee</a>
<a class="button" href="#">Short Phrase</a>
</section>
CSS
.button {
padding: 10px 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: top;
display: flex;
flex-direction: column;
justify-content: center;
}
.buttonsSection {
margin: 30px 0;
display: flex;
justify-content: center;
height: 500px;
}
body
{
width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
margin: 0 auto;
}
a photo of how i want it to look
EDIT the reason I use flexbox and justify-content is to make it work with different screen sizes. Space is perfectly distributed with flexbox. Adding a padding is suboptimal as it will stay the same, even if the screen has a height of say 200px.
Here is one way, one where I added an extra wrapper that centers
.buttonsSection {
display: flex;
flex-direction:column;
justify-content: center;
height: 400px;
border: 1px solid;
width: 200px;
margin: 0 auto;
}
.buttonsWrap {
margin: 30px 0;
display: flex;
}
.button {
padding: 50px 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: top;
}
<section class="buttonsSection">
<div class="buttonsWrap">
<a class="button" href="#">Very Long Word aaaa xx ccc ddd ee</a>
<a class="button" href="#">Short Phrase</a>
</div>
</section>
You can accomplish this by removing the flexbox properties from the button and adding a span around your button text with the following CSS:
position: relative;
top: 50%;
transform: translateY(-50%);
You may need to play with those percentages to get things to line up ideally, but this gets you in the ballpark.
http://codepen.io/angeliquejw/pen/QNdrOZ?editors=0100
I updated the fiddle
Suggest if its not that you require.
http://jsfiddle.net/Nbknc/30/
.button {
padding: 50% 15px 0 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
}
.buttonsSection {
margin: 30px 0;
display: flex;
flex-direction:row;
height: 500px;
}
Now its much simpler , now you can add the required padding to your button
so that the text in both button will align with equal top padding .
UPDATE
included some changes to your html and css
http://jsfiddle.net/Nbknc/32/
Edit: http://jsfiddle.net/Dneilsen22/36yL3y5m/5/
Removing the justify-content for .button and increasing the top padding would accomplish this.
.button {
padding: 100px 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: top;
display: flex;
flex-direction: column;
}
I have two buttons next to each other using flex and I have their contents vertically centered, which work great so far. However, when my site is viewed on mobile pages (using responsive design to scale the page), the second button, which has less text in it becomes a different size than it's companion.
So, the goal is to vertically align the text on my buttons as well as to have the two buttons always match each others size.
<section class="buttonsSection">
<a class="button" href="#">Very Long Word</a>
<a class="button" href="#">Short Phrase</a>
</section>
.button {
padding: 20px 10px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: center;
}
.buttonsSection {
margin: 30px 0;
display: flex;
align-items: center;
justify-content: center;
}
body
{
width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
margin: 0 auto;
}
JSFiddle: http://jsfiddle.net/Dragonseer/WmZPg/
If the problem isn't obvious right away, try reducing the width of the Result window.
Solution inspired by this question, was to set the buttonsSection to flex and center, and setting the button to flex, column and center.
See Fiddle here: http://jsfiddle.net/Dragonseer/Nbknc/
.button {
...
display: flex;
flex-direction: column;
justify-content: center;
}
.buttonsSection {
margin: 30px 0;
display: flex;
justify-content: center;
}
Just add align-items: stretch; to .buttonsSection
see that Working Fiddle
.buttonsSection {
margin: 30px 0;
display: flex;
justify-content: center;
align-items: stretch;
}
also: when using flex you'll have to pay attention to the vendors specific prefix's.
read more about it here
Update:
If you're using my original proposal, you can also control the vertical-alignment.
check out this Working Fiddle
HTML: (same)
Very Long Word
Short Phrase
CSS:
body
{
width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
margin: 0 auto;
}
.buttonsSection
{
margin: 30px auto;
display: table;
border-spacing: 3px 0;
}
.button
{
display: table-cell;
vertical-align: middle;
padding: 10px 15px;
background-color: deepskyblue;
color: white;
text-align: center;
max-width: 100px; /*Or any other width you want*/
}