I still can not figure out how to vertically center my <main> element. I have tried align-items with flex multiple times but it just doesn't work. I would love to hear any feedback on how to align any div element to the center relative to the screen size of the browser.
Would also love any other tips you could give me. Currently learning responsive CSS, although not doing great atm.
Hi @zach007james. Remove margin-top: 8vh; property in main, then change the height of the body to 100vh instead of 100%.
I couldn't figure out how to properly colorize the grayscale images so I had to improvise. Some advice on that aspect along with how to improve responsiveness would be nice.
Hi @Lau-San, it's easy and you just need only two lines of code. First set a background color to the img container (<div class="img">), and then blend the img with its container with mix-blend-mode css property. So in your code:
<div class="img">
<div class="violet"></div> /*<------ delete this*/
<img class="img-mobile" src="./assets/images/image-header-mobile.jpg" alt="">
<img class="img-desktop" src="./assets/images/image-header-desktop.jpg" alt="">
</div>
and in your css file delete all the .img .violet. properties. Also delete the opacity: 0.5; in the .img .img. Finally add this two lines
.img {
width: 100%;
position: relative;
background-color: hsl(277, 64%, 61%); /*<------add this line*/
border-radius: 0.5rem 0.5rem 0 0; /*<------you need add this also*/
}
.img img {
width: 100%;
border-radius: 0.5rem 0.5rem 0 0;
mix-blend-mode: multiply; /*<------add this line*/
display: block;
}
Hope this will helpfull.
A little difficulty centering the avatar and the author's name. I don't know how to make ' :hover ' the image correctly.
Corrections are always welcome!
Thanks!
Hi @tathykanashiro. Let's start with centering the avatar. It's easy, first remove the margin to the .text p
.text p {
font-size: 16px;
font-weight: 300;
opacity: .7;
color: var(--softBlue);
line-height: 1.3em;
margin-bottom: 18px; <---- remove this
}
And now add this css properties to the avatar div
.avatar {
display: flex;
flex-direction: row;
align-items: center;
}
My problem was that I can't place the background as the challenge asked, any advice on that?
Hi @Cachilox. To fix that, just remove the background-position property in the body selector. It is seted to "center".
body {
font-family: 'Red Hat Display', sans-serif;
font-size: 16px;
background-color: $Paleblue;
background: url('../images/pattern-background-mobile.svg');
background-size: cover;
background-repeat: no-repeat;
background-position: center; /* delete this*/
}
I was unable to overlay the image with a color. I tried the following resources, but none of these solutions worked for me: https://stackoverflow.com/questions/18815157/how-to-overlay-image-with-color-in-css https://www.w3schools.com/howto/howto_css_overlay.asp https://www.delftstack.com/howto/css/css-image-overlay-color/
I don't know if there's anything else I didn't do right, I would appreciate it if someone could teach me how to do it!
Hi @akcumeh. To overlay the image you need to ad one more <div> element to de img container, like this
<div class="img01-div col-lg-6">
<img src="images/image-header-mobile.jpg" class="img01" alt="">
<div class="overlay"></div>
</div>
You need to add another for the img02 too
<div class="img02-div col-lg-6">
<img src="images/image-header-mobile.jpg" class="img02" alt="">
<div class="overlay"></div>
</div>
Now add some css properties. In your .css file would look like
.img01-div, .img02-div {
margin: 0;
padding: 0;
border-radius: 15px 15px 0 0;
position:relative; /*add this property*/
}
.overlay {
/* absolute position of the overlay, relative to its container*/
position: absolute;
top: 0;
left: 0;
/* give it the size of its container*/
width: 100%;
height: 100%;
/*and give it colour and transparency*/
background-color: hsl(277, 64%, 61%);
opacity: 0.6;
}
Remember to add border-radius property too!
Teach me how to set background i don't understand to use 2 background to show i try Thankyou for watch me and sorry i not expert Eng
Hi @Chitsanupong723. To set background image to the page simply add background-image property .
The background-color property is to give some extra color.
The background-image property is the image you want to set in background.
The background-repeat sets to "no-repeat" is to no repeat the image for cover the entire container.
The background-size sets to "contain" scales the image as large as possible within its container.
body {
background-color: var(--Pale-blue);
background-image: url(images/pattern-background-desktop.svg);
background-repeat: no-repeat;
background-size: contain;
}
I struggled with the responsiveness on this one, a lot. I think it could be a lot better and would appreciate comments on that. A feq questions I have are :
Change this properties
#container {
display: inline-flex;
flex-wrap: wrap;
height: 100%;
justify-content: center;
}
And try this
#container {
display: flex;
flex-direction: row;
height: 400px; /*adjust this!!*/
justify-content: center;
align-items: center;
}
Hi, nice try! I realize you used bootstrap, but you don't have to. I give you some tips and I hope they are useful:
1- Realize that you have in the main content a card that has an image on one side and the text on the other, then you could try something like
<main>
<div class="card">
<div class="image-container"></div>
<div class="text-container"></div>
</div>
</main>
That would be the basic structure. To center the card you simply give some properties to your <main> element:
main {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}