I am having fun solving these challenges. Please review my code and tell me how can i improve my code. How can I optimize my code is there any other efficient method please let me know.
I am waiting for yours feedbacks.
Hello my friend, you did a great job but the qr image isn't showing and here's how to fix that :
on your <img class="qr-code" src="/images/image-qr-code.png" alt="image-qr-code">
see that / before images in your src ?
delete that!
then it will show just fine... you did a great job, keep going and have fun
How should I make the button clickable (even if it doesn't do anything)? I thought about replacing the <button> for an <a> tag, but considering a complete e-commerce web application I know it shouldn't be a link.
Really nice work my friend, well done..
you can add cursor: pointer; to your button and then give it a hover effect and it will look like it's clickable, but to actually make it clickable and works like a link, I think you will need some JS to add an onclick event, It looks like this : <button type="button" onclick="alert('I am Clickable')">Click Me!</button> try it in your code and see how it works ...
Hope this was helpful and happy coding
I was trying to resize the width of the image to fit into the box Both the size of the box and image
Hello My Friend, well done and congrats on finishing this challenge, and here are some tips :
try removing the margins from your image and give it a max width of 100%, then go back to your box and give it small padding and the image will be closer to the design
using 20% on your box width may look fine on desktop screen but when you go to mobile screen the 20% is very low, so try using a fixed pixels for the width or use @media to change it on mobile screen only, yeah it is not best practice to use fixed px but in our simple challenge here it won't be problme so try setting the width to 300px and see how it looks
hope this was helpful to you and happy coding
I've completed this QR Code site challenge but couldn't make it responsive . Can someone help me with that ?
Hi Sulieman, Welcome to Front-End Mentor community nad well done, your challenge is almost
about making it responsive you are setting the max-width of your content div to 18vw, which means 18% of the visual width and that will be a problem when you are on a moblie screen with like 400px width the 18vw is 72 px only
try changing the max-width to a fixed pixel size or use @media to change it on mobile screen only... and a final tip try adding a top margin to your h1 and paragraph..
hope this was helpful and happy coding>
Well done.. congrats on completing your first challenge, I love that you use rem in most of your code and that is great.
just a little tip : try making the h1 font size a little smaller (maybe 1.4 rem would be great) and increase the top margin a little bit more in the paragraph.
then work a little bit more on making it more responsive
good luck on your journey
Hello my Friend, Welcome to the Front End mentors community, you did a great jop in your first challenge, I wish you a very happy journey and here are some tips :
try usig semantic HTML eg: <main>, <section>, <article>, instead of divs it better for accessability
on your .center div you have a padding tob and bottom and a transform translateY, try to hide these lines and see how it will look >, your display flex on the body already is making every thing on the center so no need for all of that and i think that is whatgiving you the side scroll... (giving the parent element display flex + align items center is enough to put the child in center)
hope this was helpful , and keep going my friend
Really Amazing work my Friend, I love how you use relative Units perfectly.
my advice to you is to put the your html code inside of a <main> tag and put the display: flex and height properties in the main tag instead of the body, and think about adding a box-shadow to your div it will look great and more perfect than it already is
I hope my comment is helpful to you and happy coding journey >>
Basic page in html / css. Had some trouble making the image and description stack on top of each other on smaller screens, especially regarding scaling of the photo. If the screen gets too small the image is zoomed out. I would appreciate any feedback on how to fix that, thanks!
Hi @StigAkl, You did a great job Sir.
I had a similar problem when I did this challenge, and there is an amazing guy commented and advised me to use <picture> tag instead of using background-image in an empty div.
In your images you were provided with two images one for mobile and the other is for the Desktop, using the picture in html file allows you to put both images and the screen size will determine which to show.
plus I think it would be better if you sit the max-width in your @media to 767px and leave the bigger screen with the flex-direction of row.
take a look at how I did this challenge and read the comment about the Picture tag it is very helpful...Happy coding journey.
here is my solution
