I want to align my image right next to when the heading ends i.e next to "Sample Text".
Currently the container which contains heading and emoji is a flexbox.
.container{
display:flex;
.heading-text {
font-weight: 400;
font-size: 24px;
line-height: 1.33;
}
.emoji-img{
display: flex;
flex-direction: column;
align-items: center;
align-self: flex-end;
}
I've tried using grid too but cant find a way. What can I do?
If you would use simpler code, you have the solution.
.container {
display: flex;
align-items: flex-end;
}
.heading-text {
font-weight: 400;
font-size: 24px;
line-height: 1.33;
padding-right: 10px;
line-height: 1em;
}
.emoji-img {
padding-bottom: .1em;
}
<div class="container">
<div class="heading-text">
Some text<br>
Some more<br>
Heading text
</div>
<img class="emoji-img" src="https://www.gravatar.com/avatar/8?s=20&d=identicon" />
</div>
Use align-items for vertical aligning and justify-content for horizontal aligning.
For more, you can read about FlexBox here.
Here is an example for you:
.container{
/* edited here*/
width: 300px;
height: 200px;
display:flex;
align-items: center;
border: 1px solid red
}
.heading-text {
font-weight: 400;
font-size: 24px;
line-height: 1.33;
}
.emoji-img{
display: flex;
flex-direction: column;
align-items: center;
align-self: flex-end;
}
<section class="container">
<p class="headering-text">Hello, World!</p>
<img src="https://picsum.photos/50/50"/>
</section>
Simply put it there
.heading-text {width: 170px; font:16px/1.33 sans-serif;}
.emoji-img:after {content: "🦋"; font-style: normal;}
<div class="heading-text">
THIS IS THE SAMPLE TEXT HELLO HELLO Sample Text <i class="emoji-img"></i>
</div>
Related
Just finished a mini project and everything seemed to be going accordingly until I completed the footer this page. For each section, the divs do not stretch to the end, which wasn't an issue before. I'm assuming it's something to do with the pixels on the page?
Notice the gap on the left/right of the screen:
enter image description here
enter image description here
HTML:
<body>
<div class="header">
<div class="header-left">
<div class="logo">Header Logo</div>
</div>
<div class="header-right">
<div class="links-top">
<li>header link one</li>
<li>header link two</li>
<li>header link three</li>
</div>
</div>
</div>
<div class="hero">
<div class="hero-left-head">
<h1>This website is awesome</h1>
<p>This website has some subtext that goes here under the main title. It’s a smaller font and the color is lower contrast.</p>
<button class="hero-button">Sign Up</button>
</div>
<div class="sade">
<img src="https://s3.us-east-1.amazonaws.com/vnda-cockpit/www-streetopia-me/2020/09/11/5f5bfd8c2bb85sade01.jpg" alt="sade" height="200" width="350">
</div>
</div>
<div class="middle">
<div class="title"><h1>Some Information?</h1></div>
<div class="bmw-pics">
<div class="bmw-text">
<img src="https://aprperformance.com/wp-content/uploads/2015/01/BMW_M4_Lip_Installed_LR_7.jpg" alt="puke-green">
<p>Puke Green</p>
</div>
<div class="bmw-text">
<img src="https://cdn.bmwblog.com/wp-content/uploads/2015/03/Yas-Marina-Blue-BMW-F80-M3-Gets-Some-Essential-Updates-7.jpg" alt="yas">
<p>Yas Marina</p>
</div>
<div class="bmw-text">
<img src="https://f80.bimmerpost.com/forums/attachment.php?attachmentid=2671354&stc=1&d=1628858312" alt="Frost White">
<p>Frost White</p>
</div>
<div class="bmw-text">
<img src="https://1c2a8a2161d644d95009-22d26b38e78c173d82b3a9a01c774ffa.ssl.cf1.rackcdn.com/image/projectcars/f80m3/f80_m3_carbon_mirror_covers_7_w705.jpg" alt="Imola Red">
<p>Imola Red</p>
</div>
</div>
</div>
<div class="above-footer">
<div class="above-footer-p1">
<p>If you do what you've always done, then you'll get what you've always had, you dumb buffons!</p>
</div>
<div class="above-footer-p2">
<p>- A Wise Prophet</p>
</div>
</div>
<div class="last-space">
<div class="blue-box">
<div class="action"><strong>Call to action! It's time!</strong></div>
<div class="product-bit">Sign up for our product by clicking the button to your right :)</div>
<button class="last-button">Sign Up!</button>
</div>
</div>
<div class="footer">
<p>Copyright © The Odin Project 2021</p>
</div>
</body>
CSS:
.header {
background-color: #1F2937;
display: flex;
justify-content: space-around;
color: #f9faf8;
font-size: 24px;
padding: 10px;
}
.links-top {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
gap: 16px;
font-size: 20px;
}
a {
text-decoration: none;
color: #f9faf8;
}
p {
font-size: 15px;
}
.hero {
display: flex;
flex-direction: row;
background-color: #1F2937;
gap: 50px;
align-items: center;
justify-content: center;
padding-bottom: 30px;
}
.hero-left-head {
font-size: 24px;
color: #f9faf8;
}
.sade {
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.hero-button {
background-color: #3882F6;
color:#f9faf8;
border-radius: 25px;
padding: 0;
height: 30px;
width: 100px;
}
.middle {
display: flex;
flex-direction: column;
color:#1F2937;
}
.bmw-pics {
display: flex;
margin-left: auto;
margin-right: auto;
gap: 20px;
}
.bmw-text img {
height: 260px;
border-radius: 10px;
width: 250px;
}
.bmw-text p {
text-align: center;
}
.title {
text-align: center;
}
.above-footer {
background-color: #e5e7eb;
justify-content: center;
display: flex;
flex-direction: column;
}
.above-footer-p1 p,
.above-footer-p2 p {
font-size: 36px;
}
.above-footer-p2 {
display: flex;
justify-content: flex-end;
margin-right: 50px;
}
.above-footer-p1 p {
font-style: italic;
margin-top: 100px;
color: #1F2937;
display: flex;
align-items: center;
justify-content: center;
}
.last-space {
color: #f9faf8;
display: flex;
justify-content: center;
align-items: center;
}
.blue-box {
display: flex;
background-color: #3882F6;
width: 800px;
margin: 50px;
flex-direction: column;
padding: 50px;
border-radius: 15px;
}
.last-button {
align-self: flex-end;
padding:5px 25px 5px 25px;
color:#F9FAF8;
background-color: #3882F6;
border-radius: 10px;
border-color: #F9FAF8;
justify-content: center;
}
.footer {
background-color: #1F2937;
color: #F9FAF8;
display: flex;
justify-content: center;
align-items: center;
}
Please forgive the extensive css sheet, I'm still learning :) Any help is greatly appreciated!
There's margin on the body. By default the body element has 8px of margin on all sides. You can resolve this by adding this CSS to your project:
body {
margin: 0;
}
Some call this a CSS reset. You can learn more here. Hope this helps!
It's because the body html element (along with many other elements) has margin automatically applied. You can just clear it by adding this to your CSS:
body {
margin: 0px
}
You might want to try using something like Normalize.css for your projects. It really removes a lot of these "why is this happening" issues related to CSS. Also, you should read up on your browser's Devtools (on Chrome, for example, you can click Ctrl+Shift+i and it will open. You can then inspect specific elements and it will tell you why a certain element has a certain style.
For example, you can see that by hovering over the first paragraph of your post that it has a margin-bottom of 1.1em because it is selected by .s-prose p.
Hope that helps!
My divs are overlapping here's the code of my index.html :
.titlesec {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
margin-bottom: 50px;
padding: 20px;
}
#moi {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 107px 70px 0 70px;
height: 80vh;
}
.nom h1 {
font-family: 'Lato', sans-serif;
font-size: 130px;
}
.intro {
margin-top: 150px;
width: 50%;
align-self: flex-end;
line-height: 35px;
font-size: 23px;
}
<div id="moi">
<div class="nom reveal-">
<h1>Maxime Miquel</h1>
</div>
<div class="intro reveal-2" >
<p >some text no one cares about</p>
</div>
</div>
<div id="one" class="titlesec reveal-2">
<h1>TITLE</h1>
</div>
<div id="formation">
.........
</div>
And the result : Image in a browser
The title is overlapping the div right on top of it when i reduce the viewheight. This problem appeared when i changed the height of #moi to 80vh.
Hope someone can help me. Thank you =)
You can either use the flex box containers or you can use the css grid to make two columns.
grid-area: item1, item2
item1, item2;
This question already has an answer here:
Text not centered with justify-content: center
(1 answer)
Closed 1 year ago.
I'm trying to make an array of "buttons" with links.
It works fine when the text is only one line, but if the text wraps to two lines, the lines get left justified.
I'd rather have both lines centered.
.brand-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
height: 100%;
font-family: Montserrat, verdana, sans-serif;
}
.brand {
font-size: 14px;
width: 31%;
height: 50px;
background-color: #eee;
border: solid 3px white;
display: flex;
justify-content: center;
align-items: center;
}
.brand A {
text-decoration: none;
color: #6f6f6f;
line-height: normal;
}
a {
outline: none;
border: none;
}
<div class="brand-wrap">
<div class="brand">Short</div>
<div class="brand">words</div>
<div class="brand">gets centered</div>
<div class="brand">Both horizontally</div>
<div class="brand">and vertically</div>
<div class="brand">But long sentences get left-justified</div>
</div>
Try this:
.brand-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
height: 100%;
font-family: Montserrat, verdana, sans-serif;
}
.brand {
font-size: 14px;
width: 31%;
height: 50px;
background-color: #eee;
border: solid 3px white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.brand A {
text-decoration: none;
color: #6f6f6f;
line-height: normal;
}
a {
outline: none;
border: none;
}
<div class="brand-wrap">
<div class="brand">Short</div>
<div class="brand">words</div>
<div class="brand">gets centered</div>
<div class="brand">Both horizontally</div>
<div class="brand">and vertically</div>
<div class="brand">But long sentences <b>DON'T</b> get left-justified</div>
</div>
The problem with your code was that because it overflowed, the container expanded to the maximum possible width, making it appear as if the text wasn't center-aligned. Adding a text-align:center fixes that problem.
You can try adding justify-content: center; or align-items: center;
on your flexbox container!
I've been trying to align text to the right of an image but no matter what I do -- when the text line gets to be too long -- it keeps showing up right underneath the image instead of continuing onto the next line next to the image. I've tried to add a display inline for the text but it doesn't change a thing. I've also attempted to float the image to the left but it ends up cutting my image in half.
p {
text-align: right;
color: white;
font-size: 20px;
font-family: orpheuspro, serif;
font-style: normal;
align-items: center;
line-height: 2.5;
text-transform: capitalize;
font-size: 30px;
justify-content: right;
float: right;
padding-right: 100px;
padding-bottom: 90px;
overflow: auto;
}
img {
padding-left: 90px;
opacity: 0.55;
height: auto;
}
div {
position:relative;
background-color: #361833;
min-height: 40vh;
}
The HTML file :
<div>
<div>
<br>
<img src='../../assets/img/image0.jpeg' alt="wj" width="500"/>
<p>some loooooooooooooooooooooooooooong text here shdfklshjfsldfhskdjfzf</p>
</div>
</div>
Any guidance would be appreciated as I'm pretty new to CSS! Thanks!
try this instead using flex property instead of float.
Also add to p tag word-break:break-word; to align next line
Result desktop view:
Mobile view:
p {
text-align: right;
color: white;
font-size: 20px;
font-family: orpheuspro, serif;
font-style: normal;
align-items: center;
line-height: 2.5;
text-transform: capitalize;
font-size: 30px;
justify-content: right;
padding-right: 100px;
padding-bottom: 90px;
overflow: auto;
word-break:break-word
}
img {
padding-left: 90px;
opacity: 0.55;
height: auto;
}
.nav {
position:relative;
background-color: #361833;
min-height: 40vh;
display:flex;
flex-wrap:nowrap;
}
#media only screen and (max-width:768px){
.nav {
display:flex;
flex-direction:column;
}
}
<div>
<div class="nav">
<img src='https://i.stack.imgur.com/amhjm.png' alt="wj" width="500"/>
<p>some loooooooooooooooooooooooooooong text here shdfklshjfsldfhskdjfzf</p>
</div>
</div>
Ended up solving this problem by setting a width to my text!
I know this question has been up for a while, but I've simplified this so the image doesn't get squished. Not sure why that was a viable solution anyway.
header {
background-color: #361833;
}
.nav {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
max-width: 1100px;
margin: 0 auto;
}
.nav img {
height: auto;
max-width: 100%;
opacity: 0.5;
}
.nav p {
color: white;
text-transform: capitalize;
text-align: center;
}
#media screen and (min-width: 768px) {
.nav {
flex-direction: row;
}
}
<header>
<div class="nav">
<img src='https://i.stack.imgur.com/amhjm.png' alt="wj"/>
<p>some loooooooooooooooooooooooooooong text here shdfklshjfsldfhskdjfzf</p>
</div>
</header>
I have aligned two divs side-by-side using Flexbox and I want the text in both the divs to be pushed to the bottom of the divs at equal levels but there seems to be different level of spacing underneath the individual texts.
.wrapper {
display: flex;
flex-direction: row;
}
.block1 {
font-weight: bold;
font-size: 2em;
color: red;
border: 1px solid;
display: flex;
align-items: flex-end;
}
.block2 {
font-size: 1em;
color: grey;
border: 1px solid;
display: flex;
align-items: flex-end;
}
.block1.hack-fix {
line-height: 29px; /* HACK */
}
<h2>Current:</h2>
<div class="wrapper">
<span class="block1">
23
</span>
<span class="block2">
Quote
</span>
</div>
<hr/>
<h2>Needed:</h2>
<div class="wrapper">
<span class="block1 hack-fix">
23
</span>
<span class="block2">
Quote
</span>
</div>
Thanks for the help!
What you're looking for is called baseline alignment.
To achieve this in flexbox use align-items: baseline.
Here's a more complete explanation:
What's the difference between flex-start and baseline?
.wrapper {
display: flex;
flex-direction: row;
align-items: baseline; /* NEW */
}
.block1 {
font-weight: bold;
font-size: 2em;
color: red;
}
.block2 {
font-size: 1em;
color: grey;
}
<div class="wrapper">
<span class="block1">23</span>
<span class="block2">Quote</span>
</div>
Parents :
display: flex;
Children:
flex: 1;