@vivek33up
Submitted
Could someone help me in optimizing this site for mobile (375 width)?
@yosrajalali
@vivek33up
Submitted
Could someone help me in optimizing this site for mobile (375 width)?
@yosrajalali
Posted
Hi Vivek🙋♀️ congratulations on successfully completing this challenge🎉.
Regarding your question: when they say Mobile: 375px it doesn't mean that you have to have a media query for width of 375px, it just means that the width of screenshot that they provide us is 375px.
any way if you want to optimize your page for mobile devices you should use media query, like this👇
{
@media only screen and (max-width: 600px){
**put your codes that are related to the mobile design here**}
}
this👆 block of code executes only If the browser window is 600px or smaller.
you can change 600px to any other width, and also you can add more than one media query base on your design.
I hope you find this helpful..
@ismailakinkunmi
Submitted
Am I following the best practice in HTML and CSS and where do I need to improve? I really appreciate any help you can provide
@yosrajalali
Posted
Hi Ismail👋.You did great on this project, I think you have forgotten to add hover effect on the image.to do this, you need to add this👇 to your code..
{
<div class="img__container">
<img
class="diamond__img"
src="images/image-equilibrium.jpg"
alt="diamond"
/>
<div class="middle">
<img class="icon" src="images/icon-view.svg" alt="view icon" />
</div>
</div>
}
and this is for your Css👇
{
.img__container:hover .middle {
opacity: 1;
cursor: pointer;
}
.middle {
transition: 0.5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
background-color: hsla(178, 100%, 50%, 0.3);
border-radius: 0.5rem;
}
}
I hope you find it useful..
Marked as helpful
@BassemNegm
Submitted
And feedback is very appreciated..
@yosrajalali
Posted
Hi Bassem 👋. Congratulations on successfully completing the challenge!🎉
just a couple of suggestions
HTML
CSS
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
body {
font-weight: 300;
background-color: rgb(227, 224, 224);
}
Anyway your solution is great🙂
I hope you find it useful😊
Marked as helpful
@Stephenpleasant
Submitted
Just completed this project. Please help!
@yosrajalali
Posted
Hi 👋 Congratulations on completing the challenge!
just a couple of suggestions:
I hope you find it useful 🙂
Above all your solution is great.