Skip to content
OverviewSolutions
7
Comments
7
Mebo David
@meistens

All comments

  • Mebo David•130
    @meistensPosted over 2 years ago

    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
    1
  • Mebo David•130
    @meistensPosted over 2 years ago

    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).

    1
  • Mebo David•130
    @meistensPosted over 2 years ago

    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
    0
  • Mebo David•130
    @meistensPosted over 2 years ago

    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)

    1
  • Mebo David•130
    @meistensPosted over 2 years ago

    Weird flex, but the script not really necessary. Also your site got accessibility issues.

    0
  • Paweł•1,030
    @Pawel-GnatSubmitted over 2 years ago

    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.

    NFT preview card component, basic css and html

    2
    Mebo David•130
    @meistensPosted over 2 years ago

    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

    1
  • Illyaas•700
    @Illyaas4ShowSubmitted over 2 years ago

    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

    QR code component

    2
    Mebo David•130
    @meistensPosted over 2 years ago

    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
    0