Skip to content
OverviewSolutions
11
Comments
11

Keytron

@Dev-TronCarney's Point Nj270 points

I am a computer science student currently studying front-end framework. I am friendly and easy to get along with. I also like to help others out where it is needed. Please feel free to ask me anything.

I’m currently learning...

Full-Stack JavaScript, Express, Sql

Latest solutions

View more solutions

Latest comments

  • Keytron•270
    @Dev-TronPosted over 1 year ago

    There are actually a couple ways you can easily achieve this affect. You could use the display: show or hide property to display the images at different breakpoints using media queries. You can find out more about media queries here. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries. My next and favorite way of doing it is using the picture element. You can find out more about that in the mdn web docs as well. So basically, you're placing your images between picture tags and setting the breakpoints. It's as easy as that. Good luck and hope this info help you in the future.

    0
  • Keytron•270
    @Dev-TronPosted over 1 year ago

    Hello sir, this is actually quite a simple fix. This line: "<link href="/dist/output.css" rel="stylesheet">" located in the head of your html file should probably be: "<link href="/input.css" rel="stylesheet">" In other words just correct the path at which the css file is located in the structure. This may solve your problem.

    0
  • Keytron•270
    @Dev-TronPosted almost 3 years ago

    It is not a bad practice to use negative margin. A general rule of thumb is that if it looks good then it usually is good. You could also simply apply position: relative; to your parent divs and then the position: absolute values (ie. top:; right:; bottom:; left:;) to child elements which can help you avoid using negative values greatly.

    Marked as helpful
    0
  • Keytron•270
    @Dev-TronPosted almost 3 years ago

    The reason why your image isn't rendered is that it is not correctly referenced. You should use either a ./ or just plain <img src="images/image-qr-code.png" alt="qr code pic">. You do this to indicate that the files are in the same directory. Other than that your solution looks great. Keep up the good work and never give up.

    Marked as helpful
    2
  • Keytron•270
    @Dev-TronPosted almost 3 years ago

    Your solution is actually really good sir. The only thing I would do to make it better is to make it more responsive. Have you researched media queries? You could set one on your box div to control the width at different screen sizes. I would also suggest a margin-top value using percentages which will help you control the vertical alignment of that div. You can do all this using media queries. Remember it's best to start your project from a mobile-first approach. It will help you a lot in the long run. I also see that you have a few issues with accessibility. You can fix those by separating your content with <header> <nav> <main> <footer> tags.

    Marked as helpful
    1
  • Keytron•270
    @Dev-TronPosted almost 3 years ago

    Hmm, let's see here. It looks like your files are a bit all over the place in your repository. The first thing Id says you should do is organize your CSS and image files in their own folder. Make sure you reference that CSS stylesheet in your link located in the header of your Html. Second, edit your readme-template.md and rename it readme.md. Make sure you delete the current readme.md displayed right now. Lastly, you should probably rename your qr.html to index.html and delete the one you don't need anymore. You should also read and try fix your accessibility and html issues as those are required skillsets to have. You could place your content between tags such as <header> <body> <footer> to fix the landmarks issue. After these steps try pushing to your github and seeing if this improves your solution.

    0
View more comments