@Feyisara2306
Submitted
I used relative units and somehow still don't get responsive display on tablets. A feedback on what I did wrong is welcome. Thank you.
@meistens
@Feyisara2306
Submitted
I used relative units and somehow still don't get responsive display on tablets. A feedback on what I did wrong is welcome. Thank you.
@meistens
Posted
Recheck your css code, seeing some errors
@media screen and (max-width: 375px){
.container{
display: flex;
flex-direction: column;
width: 90%;
padding: 1em;
}
Above should be min-width: 375px, not max-width, I'm getting a desktop design on my device plus I feel your question would be answered if you added a breakpoint like this
@media screen and (min-width: 375px) and (max-width: 767px){
...styles
}
Marked as helpful
@Fikayomi31
Submitted
Have difficulty in background-image in the css
@meistens
Posted
Hey there. Checked your code and honestly, I don't even know where to begin.
Your HTML file got some messy code, CSS file is all wrong and a nightmare to read.
My advice is you should debug and make changes using your browser dev tool or rewrite it all from scratch and take a refresher on html and css (honestly, the best option right now).
@meistens
Posted
To add to what was suggested, your media query is somewhat unnecessary, seeing as you followed a desktop-first approach to build the page.
Here's an example of how it should be (not actual px, so you should modify as it seems you know what you're doing).
@media screen and (min-width: 320px) and (max-width: 420px) {
.container {
margin: 100px auto 0 auto;
max-width: 500px;
display: flex;
flex-direction: column;
max-height: 60vh;
}
Marked as helpful
@nobody1234455
Submitted
Can anybody show me how to overlay image effectively. Many thanks :D
@meistens
Posted
Hey there
For your question on how to overlay, use the pseude elements ::before
and ::after
on the image container.
Below is an example of how to overlay using the pseudo elements I listed above. The before property can be used to set the color, the after property for the eye icon. Doing otherwise means the icon will be hidden behind the color as it will be positioned absolute.
HTML
div class = 'img'
img src = "img-here" alt = "any_text"
</div>
</div>
CSS
.container{
position: relative;
}
.img::before{
background-color: blue;
position: absolute;
.img::after{
background: url(./Image jpg) ;
position: absolute;
Don't mind the messy code though, but other than what was given, you can use the top, left or right property to position it to the center of the container (which is the .container specified)
@Gaipov5791
Submitted
@meistens
Posted
Weird flex, but the script not really necessary. Also your site got accessibility issues.
@Pawel-Gnat
Submitted
Hardest part was placing svg eye icon inside image div and make proper bg-color with hover. It took me 2 hours to get it. I find hard positioning divs inside other ones. I think I still need more practice doing it.
@meistens
Posted
Hey there, Not bad with the design, though to be honest, your code was kinda hard to read. Here's some tips though
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: hsl(217, 54%, 11%);
}
Once you got the body sorted out, apply these to your container and fiddle about with the height and width values as you fit.
.container{
background: hsl(216, 50%, 16%);
width: 15rem;
height: auto;
border-radius:1rem ;
}
For centering the eye icon and the background color, use the ::before
and ::after
pseudo elements, should make things easier for you
@Illyaas4Show
Submitted
This is my first challenge and it was pretty easy but I really struggled to publish the site because it didn't work on Github and didn't work on netlify with a git hub file so I had to use the file straight from my computer which I wasn't very happy about. When I deploy the repository on netlify, it says the page isn't working even tho I saved the file as index.html. I am unsure why that is. Please do you have any advice to how I can get it to work because I have tried everything and I think it would make life easier if I could connect it with GitHub. Thank you
@meistens
Posted
Hey there, For hosting on GitHub, I think you have to make sure that the files are in a separate repository instead of lumping them in a folder inside a repo. Though it looks like you're trying to host an empty file, using the doc route. Try putting the files in the doc folder or outside of it.
Marked as helpful