@margsoftbfSubmitted over 2 years ago
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
@Priya366All comments
- @Priya366Posted over 2 years ago
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-278Submitted over 2 years ago
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 !
@Priya366Posted over 2 years agoHey 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 helpful1 - @mahmoudnasr71Submitted over 2 years ago
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
@Priya366Posted over 2 years agoHi 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 helpful1 - @fellipemndsSubmitted over 2 years ago
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?
@Priya366Posted over 2 years agoHi 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 helpful1 - @ivdevelopmentSubmitted over 2 years ago
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 :)
@Priya366Posted over 2 years agoHi 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 helpful0 - @dominikapapSubmitted over 2 years ago
I spend a lot of time on image hover effect, couldn't get two elements to have different opacity, is there a better solution?
@Priya366Posted over 2 years agoHi 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
