'can't get image and text to align with CSS/flexbox under the navbar
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!
Solution 1:[1]
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>
Solution 2:[2]
Ended up solving this problem by setting a width to my text!
Solution 3:[3]
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>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Rayees AC |
Solution 2 | st123 |
Solution 3 | Millhorn |