@osaaroh
There are a couple of problems I encountered. . .
The hero image is not shrinking even with max-width and % used?
Is there a way to position the icons inside the circle better?
How can I make both the icon and the circle border change color on hover at the same time?
Any advice regarding CSS if there are declarations I can remove would be greatly appreciated, Thanks!
@osaaroh
Posted
Hello Kurt,
Nice work on the challenge. The mobile view looks good but you can add margin-top for the".socmed-container". For your questions:
<main class="hero-container">
<div class="img-container">
<img src="">
</div>
<section class="content-container">
</section>
</main>
.img-container{
flex: 1
}
.content-container{
flex: 1
}
img{
/*Use width instead of max-width here*/
width: 100%
}
.fa-brands {
color: var(--white);
font-size: 1.1rem;
border: 1px solid white;
padding: 1rem;
border-radius: 3rem;
}
.fa-brands:hover {
color: var(--soft-magenta);
border: 1px solid var(--soft-magenta);
}
Hope this helps
Marked as helpful
@MJspitta
Submitted
If the mobile view and desktop view are the same, is there a need to do a media query for the page still?
@osaaroh
Posted
Hello Madu, congrats on finishing the challenge.
For your question, if the mobile view and desktop view are the same and is already responsive enough as in this case, then no, there is no need for a media query.
Marked as helpful
@Bolumorin
Submitted
The one thing I found difficult while working on this is Responsiveness. How can I make this how responsive as possible? Would CSS flexbox had given me a more responsive outcome? Please I'd really appreciate your feedbacks and what you think I'd have done best!
@osaaroh
Posted
Hello Bolu,
Good work in completing the challenge. Yes CSS flexbox will help with a more responsive outcome instead of using margins to center element.
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
The first three is to center all child elements horizontally and the last one takes all the size of the height of the device that sees it and centers the content vertically.
Hope this helps.
Marked as helpful
I had a bit of trouble using the right CSS selectors. Tips on how I can simplify my CSS would be appreciated.
@osaaroh
Posted
Hey Lucas,
Good work here. If you check your browser console tools when you load the github page, you will notice there's a 404() Not Found error: the quotation image cannot be found.
You need to check that the file path is defined properly in your css file like so:
.testimonial-one {
background-image: url(images/bg-pattern-quotation.svg);
}
Regards.
Marked as helpful
@52ymon
Submitted
It looks like I can't center the card as it should be, and I can't get my head around it... It would be greatly appreciated if anyone could give me some pointers :)
Edit: Thanks guys! I'm booking my eye test :')
@osaaroh
Posted
Hey there Szymon,
Nice work so far. I see you used relative length units "vw" which is great as they scale better. However the issue is with the height value your the <body> tag.
Instead of height: 100vw you should use height: 100vh
vw means relative to the width of the viewport and is different from
vh means relative of the height of the viewport.
You can check these links for more info:
Marked as helpful
@Emmanuel-webDev
Submitted
I had problem displaying the two p tags opposite to each other
@osaaroh
Posted
Hello Emmanuel,
Good work so far on the challenge.
You can use CSS flexbox/grid to display the two paragraphs side by side. For example, If you put the two paragraphs in a flex container div with class="stats__container"
.stats__container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
This will give better result than text align. Check out these resources to learn more on Flexbox and Grid:
Marked as helpful
@jokings
Submitted
This is my first challenge Feedback is welcome Thanks
@osaaroh
Posted
Hello Josh,
Welcome and good work in completing the challenge. Here are some suggestions:
<section> inside a <main class="card-main"> tag with the following attributes: display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
The first three is to center in the middle and the last one takes all the size of the height of the device that sees it and if the content is bigger the box is enlarged for that reason it is minimum of height.
Marked as helpful
@gbabohernest
Submitted
I struggled on adding hover effect to the social links in the footer. At first, I thought it was an icon, and I decided to add hover effect to it and change the color on hover. However, it didnt work cause it is an image. I also added it to the parent element but i didnt like the outcome.
Any help on how to handle this would be helpful and also any feedback on my solution and how to improve it will be great . Thanks and happy coding 👍👍
@osaaroh
Posted
Hello Ernest,
Nice work so far! As you discovered, you will not be able to use the color or background-color css properties to modify the color on an <img> tag. However, if you use an img tag and want to change the color property from black to any other color, one workaround is to use css filter:
a:hover {
filter: invert(55%) sepia(87%) saturate(357%) hue-rotate(121deg) brightness(93%) contrast(92%);
}
You use the CSS Filter Generator(Codepen) from here and enter the color code you want to change to. It will generate a filter for you and you can use it on the image. Note that this works best when the image color is black/very dark.
Hope this helps.
Marked as helpful
@shemjay
Submitted
What I found really difficult while building the projects was:
Areas I am unsure of: Pretty much all areas from the parts I found difficult above lol. Though I am also unsure on how I removed the default margin and padding of my website. Instead of using the '*' (asterisk) and setting the margin and padding to 0, i used bofy, html and set that margin and padding to 0. I hope that is not bad practice.
Questions I have:
@osaaroh
Posted
Hey
Good work so far on this task. For your questions:
@media only screen and (max-width: 576px) {
body {
flex-direction: column;
text-align: center;
background-image: url("../../images/bg-intro-mobile.png");
}
p {
font-size: 0.95rem;
}
}
Marked as helpful
@aminetakdenti
Submitted
All feedback is welcom
@osaaroh
Posted
Hi there Amine, work looks good and is very responsive.
The only issue is your social media icons at the bottom are not displayed.
Try checking your font awesome import or use the web cdn instead. You can check your web console for any info on the error.
You can also check out other icon suggestions. Here are the icon library suggestions from the style guide:
Marked as helpful
