Luis Cabrera• 160
@lcabrera13
Submitted
I had problems with the images and adapting these to different devices, is there a better way to do this?
Keytron
@Dev-Tron
All comments
- Keytron• 270
@Dev-Tron
Posted
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 - PBrett Siedschlag• 20
@BrettSiedschlag
Submitted
This was a pretty simple project, so I only have one question. Does the project look right in GitHub pages, or did I do that wrong? Thanks!
Keytron• 270@Dev-Tron
Posted
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-Ray
Submitted
Is the use of negative margin bad practice? What are the best alternatives to that?
Keytron• 270@Dev-Tron
Posted
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 @DorinelIonut
Submitted
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.
Keytron• 270@Dev-Tron
Posted
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@Emaye96
Submitted
Very very new to this. Actually got some trouble with getting the external font
Keytron• 270@Dev-Tron
Posted
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- Lawal Tobiloba• 10
@thobbi22
Submitted
All feedbacks are welcome
Keytron• 270@Dev-Tron
Posted
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 - Arun Kanaujia Patel• 170
@arunkanaujia23
Submitted
Can anyone help me with how to Vertical Align the div?
Keytron• 270@Dev-Tron
Posted
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
@XENO2410
Submitted
Image may hv issues donno how to solve it thnks :)
Keytron• 270@Dev-Tron
Posted
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 - Covaci Alex• 120
@covacialex
Submitted
Keytron• 270@Dev-Tron
Posted
Looks great lol.
1 - Tushar Biswas• 4,100
@itush
Submitted
It was a nice challenge to practice client-side form validation using JavaScript.
I'd really appreciate if you could answer the following:
What did I do wrong? What did I do right? How can I improve?
Thanks in advance :)
Keytron• 270@Dev-Tron
Posted
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
