Maia• 60
@maia-fw
Submitted
Any tips on how to center align the card? That seems to be the only thing I'm missing.
Manjesh R V
@manjeshrv592
All comments
- Manjesh R V• 320
@manjeshrv592
Posted
On container set min height to 100vh, display to flex, align items to center.
.container { min-height: 100vh; display: flex; align-items: center; }Marked as helpful
2 - Uzma Khan• 70
@Uzmakh
Submitted
How can I make it responsive other than a media query?
Manjesh R V• 320@manjeshrv592
Posted
Responsive without media queries?
You can use max-width on card instead of width. So it will occupy 100% if screen is below 380px.
make sure you add padding to body or section, so your design won't stick to edges of the screen on smaller devices.
Make sure you reduce overall width of the card and align it vertically at center using flexbox. So it will be more inline with the design file.
Marked as helpful
0 - Ronaldo Kashari• 40
@RonaldoKashari
Submitted
Still new to the whole HTML CSS world and trying to improve little by little each day. Could I have written less code and gotten the same result?
Manjesh R V• 320@manjeshrv592
Posted
You have achieved desired results with minimal amount of code. It looks good.
From design point you can reduce the drop shadow transparency. 0.05 to 0.1 would look good.
Now coming to css selectors for best practice use classes as much as possible avoid id's.
Use semantic elements. In your case <div> tag with id name center, replace it with <main> tag.
Marked as helpful
1 - Abhishek Daga• 10
@abhishekdaga
Submitted
Font did not work on the site. Additionally, letter-spacing also did not work. This is the beginning of my journey and it was very helpful to explore and search to get the solution. The solution is not perfect but I want to have some inputs from the community to move forward.
Manjesh R V• 320@manjeshrv592
Posted
About font family in your css body selector your using font-family property 2times. So the last property value is used by the browser. Just remove
font-family: 'Fraunces', serif;in body tag and font will be fixed for body.In your css file select all heading tags and set their font family to Fraunce, So it should look something like this
h1,h2,h3,h4,h5,h6 {font-family: 'Fraunces', serif;}Now browser will use 'Montserrat' for body and 'Fraunces' for titles.
For letter spacing select the tag and add css property 'letter-spacing'. Play with the values and see what works. 5px would work for this challenge.
I see image is not visible. You're using wrong path for the src and srcset attributes. According to your folder structure image path should be
./image-product-desktop.jpgor./image-product-mobile.jpgHappy coding 👍
Marked as helpful
0 - Eduardo Sampaio• 20
@eduu17
Submitted
What are the good practices that I can use and how can I improve my html and css?
Manjesh R V• 320@manjeshrv592
Posted
Congrats on completing the challenge.
Some possible improvements you can make
HTML
1.For qrcode-content you have used section tag. Section is a semantic tag used to seperate different section of a webpage. A general tag like <div> would make sense.
2.For best practice make sure you have class name for every tag in your html. In your case <h2> inside qrcode-content can have a classname of qrcode-title and <p> tag can have something like qrcode-text. This isn't issue for small project. When you work on bigger project you have to make sure you have lowest possible specificity for all the elements. This can be achieved by using unique classname for all tags.
CSS
1.If you struggle with unique classname for tags like me 😅, I advice you to learn about BEM for naming css classes. This is only for large projects though.
2.You used flex on qrcode-content which is not necessary. A simple margin bottom on <h2> tag can get the job done.
3.Your targeting .qrcode-content h1 in your css. But you have used <h2> tag html.
4.Your setting font to roboto in css but your importing Montserrat font from google in your html. Make sure font you are importing and font being used in css are similar.
Marked as helpful
0 - Vaishnavi• 10
@Vaishu03
Submitted
Did you find any problem in viewing the QR code in mobile and desktop views?? Any suggestions to improve project code?
Manjesh R V• 320@manjeshrv592
Posted
Your projects is broken on mobile screen and not well aligned in desktop. We can't help you since your github repo link is not found.
By the looks of it I think you used position absolute which is not necessary in this challenge.
I just completed this challenge you can visit my git repo in my solutions section or any other solution in this community. So you will know what went wrong.
Marked as helpful
0 - Miguel Garoz• 240
@mgaroz
Submitted
I'm still unsure about when to use rem vs em, I would appreciate any input on the matter.
Manjesh R V• 320@manjeshrv592
Posted
By default browsers font size is 16px.
1rem always defaults to 16px no matter where you use it.
1em depends on font size of the parent element. Let's say you have paragraph inside div tag and font size of div is 20px. Then 1em inside that div means 20px.
Suppose you have another div whose fontsize is 36px. Then 1em will be equal to 36px in that div.
If your looking to size a child element based on parent then you use em.
In practice I never use em and I haven't seen it being used in any projects. Always stick to rem. Advantages of em over rem is negligible and em is lot more confusing to use.
If you want to size child element relative to parent then percentage is the best option.
Marked as helpful
1
