Skip to content
OverviewSolutions
11
Comments
11
Keytron
@Dev-Tron

All comments

  • Keytron•270
    @Dev-TronPosted about 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 about 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
  • Khemmie Ray•280
    @Khemmie-RaySubmitted over 2 years ago

    Is the use of negative margin bad practice? What are the best alternatives to that?

    Advice Generator App

    3
    Keytron•270
    @Dev-TronPosted over 2 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
  • Toncea Dorinel Ionut•30
    @DorinelIonutSubmitted over 2 years ago

    I dont understand why my link image can't be seen after i upload it. On my computer after i finished i tested it was working just fine, but it was working only if i put as img source, up a folder, then the actual images folder.

    Mobile first - QR code component

    1
    Keytron•270
    @Dev-TronPosted over 2 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 over 2 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 over 2 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
  • Keytron•270
    @Dev-TronPosted over 2 years ago

    There are many ways to center a div. In your case you could try giving your body a margin-top value of maybe 10% or so.

    Marked as helpful
    0
  • Tarun•140
    @XENO2410Submitted over 2 years ago

    Image may hv issues donno how to solve it thnks :)

    HTML CSS

    1
    Keytron•270
    @Dev-TronPosted over 2 years ago

    Looks like your link is not properly set in your href located in the header of your html. You should either use ./ or just plain styles.css as those will reference the current directory.

    Marked as helpful
    0
  • Keytron•270
    @Dev-TronPosted over 2 years ago

    Got it thanks a lot. I will fix right away.

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

    Looks great lol.

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

    You could try adding a media query that will add some padding to the container of your content that way it could be more responsive at cellphones/tablet screens

    0