Marcin Garski• 350
@margsoftbf
Submitted
Maybe someone can tell me what I could do better with my code, it is important for me to go in the right direction when i try do next challenges
Priya Garg
@Priya366
All comments
- Priya Garg• 200
@Priya366
Posted
Hi Marcin . I hope you are doing well.
You know, when I opened your site it shows me mobile version (which was not even scrollable) layout instead of desktop layout.
You can use min-height: 100vh in CSS <body> instead of height: 100vh . By doing this , the mobile-layout will be scrollable.
For media queries, You can also add a breakpoint at min-width: 800px , it will look more representable.
I hope this feedback will be helpful for you .
1 - Yash Kadam• 280
@yash-278
Submitted
Hi everyone, This is my solution for Stats Preview Component.
For the Image and Purple overlay, I added the image as a
background-imageand added overlay colored div to it. Is this the only solution for overlay, or can it be done differently ?Feedback Welcome !
Priya Garg• 200@Priya366
Posted
Hey Yash!
You did an awesome work.
As per your queries, I think method does not matter , as long as, your work is done.
I used <img> tag for image upload and <div> tag for image color overlay both in html instead of background-image.
I hope this will be helpful!!!
Marked as helpful
1 - Mahmoud Nasr• 270
@mahmoudnasr71
Submitted
can someone tell me plz why i keep getting these warnings in my html code from frontendmentor ? i am not sure what i am doing wrong
Priya Garg• 200@Priya366
Posted
Hi Mahmoud Nasar, You did an amazing work.
As per your question, I also faced the same html and accessibility issues.
You can settle your code by using <main> tag just below the <body>tag. These are landmarks which must be present in our html as it makes our website more accessible . The landmarks are as: <header>,<nav>,<main>,<footer>.
and one <h1>tag inside of the main context of html.
I hope this will be helpful for you.
Marked as helpful
1 @fellipemnds
Submitted
The property "margin: auto" only centralizes it horizontally, but I would like to do it vertically as well, so, how can I centralize the #container div, both horizontally and vertically?
Priya Garg• 200@Priya366
Posted
Hi Felipe! You have done an awesome work and your code is easy to read. Good job!
As per your query, You can center container by styling body as follows:
** body { display: flex; justify-content: center; align-items: center; height: 100vh; } **
Really hope this will be helpful.
!!!One more thing, do check and improve your accessibility issues too!!!
Marked as helpful
1- IanV• 90
@ivdevelopment
Submitted
I was having some troubles with centering the container to the middle of the screen. It works fine when I try to do it horizontally but whenever I try to center it vertically I fail.
If anybody got any tips on how I can do this better please do :)
Priya Garg• 200@Priya366
Posted
Hi lanV Good job! Your code looks good.
As per your question, Your container can be centered vertically and horizontally by using:
body { background: hsl(212, 45%, 89%); padding: 0; margin: 0; width: 100%; box-sizing: border-box; font-family: 'Outfit', sans-serif; display: flex; height: 100vh; flex-direction: column; }
By setting ( flex-direction: column) Both screen and attribution will be directed in column and the card will be centered.
I hope this will be helpful.
Marked as helpful
0 @dominikapap
Submitted
I spend a lot of time on image hover effect, couldn't get two elements to have different opacity, is there a better solution?
Priya Garg• 200@Priya366
Posted
Hi Dominika! Good work!
It will be great if you provide border-radius on hover effects of image same as the image border-radius.
Also, cursor: pointer would look better for hovering interactions.
I hope this will be helpful.
0
