Md Wasim Akhtar• 10
@starlord18
Submitted
This is to improve my styling skills kindly give me a feedback with clean code if possible.
Erik Aakre
@eaakre
All comments
- Erik Aakre• 230
@eaakre
Posted
The mobile version of this needs a little work. The design looks good on a very specific size screen. But once that screen size changes, the text on the bottom acted a little funky. Being that the qr-code should probably stay the same size whether on mobile or desktop, and it should be in the center of the screen. With that knowledge, I would use more specific heights and widths. I would make these changes to your CSS:
Move the background color to the body element: body{ background-color: rgba(213,225,239,255); }
Add this to the '.mainContent' div style: position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); (change height to 80vh as well - or perhaps to 'max-height': 500px;) (remove margin attribute here too)
Use a max-width attribute in both the '.contentBox' div and '.content2' div. I would use something like: max-width: 300px;
I also would remove the width attribute on the '.mainContent', '.contextBox' divs
Lastly, change the padding on the .Content1 div to: padding: 25px;
1 - Christopher Tonkov• 20
@izkurten
Submitted
Hi. After deploying the page, I saw that I can't really see the QR code. I was wondering and I could do the href of the <a> tag to be a link, then it will be visible. But, upon further pondering, every website I go to, of course I don't have the pictures stored on my computer. So, in theory it should open, but it doesn't. If you have a tip for that, please let me know how to show the QR code.
Erik Aakre• 230@eaakre
Posted
When I download the starter files for each project here, I notice there is an extra folder that contains another folder with all the starting files. I only keep that last folder that includes the images, designs, index.html, etc...otherwise when you put those files on Github, that extra folder will be included. Then, the site won't actually show up because there isn't an 'index.html' file in the main folder.
Also, it looks like you are manually uploading each file onto Github. Here is a link on how to connect your Github to VS Code. If you have a different editor, you can probably do something similar. It will save you some time
https://www.youtube.com/watch?v=shP-3p-2m6g
1 - Christopher Tonkov• 20
@izkurten
Submitted
Hi. After deploying the page, I saw that I can't really see the QR code. I was wondering and I could do the href of the <a> tag to be a link, then it will be visible. But, upon further pondering, every website I go to, of course I don't have the pictures stored on my computer. So, in theory it should open, but it doesn't. If you have a tip for that, please let me know how to show the QR code.
Erik Aakre• 230@eaakre
Posted
I had to look through your Github. The github-pages for this site brings me to the folder and a 404 error, but I found that this is your live link for the qr-component:
https://izkurten.github.io/Frontend-Mentor-QR-Challenge/qr-code-component-main/index.html
Maybe update the 'Live Link' on here to this url instead?
Looking at the actual page though, it looks great! Well done!
Marked as helpful
1 - Juan Diego• 20
@NeeFar
Submitted
This is my project!
Erik Aakre• 230@eaakre
Posted
Nice job! Looks very good on both desktop and mobile!
I noticed the text has a little less margin than the design. If you wanted to match it a little more you might make these changes in your CSS (only changed the margin attributes):
.card .card-title { color: hsl(218, 44%, 22%); font-weight: 700; font-size: 1.5rem; margin: 1rem .25rem; }
.card .card-text { color: hsl(220, 15%, 55%); font-size: 1rem; margin: 0 .25rem 1rem .25rem; }
Well done!
Marked as helpful
1 - onyil44• 50
@onyil44
Submitted
Erik Aakre• 230@eaakre
Posted
To make it a little more responsive for mobile, take out the width from your body element in your CSS file:
body { width: 144rem; }
Then, your QR code will stay in the center no matter what screen width you have. Right now, if you look at mobile you would have to scroll out of the screen to the right.
Marked as helpful
0 - Sparks• 50
@csparks78
Submitted
Its a little awkward in mobile view. I welcome any tips!
Erik Aakre• 230@eaakre
Posted
When inspecting your site when its on a mobile setting, I found the extra space to be on the ".wrapper". On the desktop, it is set to "width: 580px;"
One of the things that worked for me when looking at the mobile version through the "Inspect" tools was to change your @media settings for the wrapper.
From this:
.wrapper{ box-shadow: none; margin: 0; }
To this:
.wrapper{ box-shadow: none; width: auto; margin: 0; }
I don't know if that fixes everything, but it doesn't have the scroll left or right for me anymore.
Marked as helpful
0 - juan123sebastian• 30
@juan123sebastian
Submitted
Erik Aakre• 230@eaakre
Posted
Good use of the span element in your HTML. Comparing my code to yours, I did not use the span and wrote some extra code that doesn't need to be there! So, well done!
You wrap your '#container1' into a larger container ('.container') in your HTML and CSS. I think if you also wrapped '#container2' into that larger container as well, you could achieve a more uniform layout between the two sides. Looking at your page, the "Your Result" text and the "Summary" text do not line up with each other. By wrapping them both into ".container", it might make them a little more balanced with each other. It would also even out the vertical white-space on your right side
Marked as helpful
0 - Markus Schneider• 250
@DirtyRonin
Submitted
Erik Aakre• 230@eaakre
Posted
Looks good, and responsive to mobile! Nice job. I like that you did this using CSS grid. I've been feeling more comfortable with flexbox, and tend to lean on that probably too much. It was interesting looking through your code and seeing the mobile CSS code right under the desktop code. I feel like that is very readable
Marked as helpful
0
