@elfreeze
Submitted
I'll appreciate any feedback most especially on accessibility and responsiveness.
@Femi-Bright
@elfreeze
Submitted
I'll appreciate any feedback most especially on accessibility and responsiveness.
@Femi-Bright
Posted
To fix your accessibility issues, try to always wrap your whole content in a <main></main>
or when you use a div, try to add a main role
<body>
<div role="main">
...
</div>
</body>
Marked as helpful
@Lavishq
Submitted
I want to know how can the code can be made better. Product image is not visible on github but was visible on localhost. I have studied responsiveness but failed to implement so I want to know some suggestions for getting better.
@Femi-Bright
Posted
Hi! Lavishq, try to always precede your relative paths with ./ when you use only / it would work locally but might not work when hosted online
Use this instead
#perfume-img {
background: url(./images/image-product-desktop.jpg);
@mandresyandri
Submitted
The difficult of this project are :
The css is the areas I'm unsure.
I want to growth my front skills what is the next tech that I should learn ? React ? Angular ?
@Femi-Bright
Posted
Hi! mandresy, Nice attempt. I also deal with the sizing issues, finding the perfect sizing takes much of my time. I should also add this, try to fix the accessibility and HTML issues (you can do that in the View Report section)
You can adopt using css variables so you don't have to keep repeating those color values. As regards what to learn next. Provided you have a sound knowledge of javascript, you can try React but make more personal research too,
Marked as helpful
@dic-key
Submitted
@Femi-Bright
Posted
Hi Justin! NIce Attempt. Try to fix the Accessibility issues (You can do this in the View Report section). I noticed the web page is overflowing on my laptop thereby adding an horizontal scrollbar
i want to suggest you remove the width, it should still work fine.
.container {
display: flex;
align-items: center;
justify-content: center;
background-color: hsl(30, 38%, 92%);
/* width: 100vw; */
height: 100vh;
}
Marked as helpful
@lee-fentress
Submitted
How would you make this responsive? Should I use grid instead of a table?
@Femi-Bright
Posted
Hi Len! I think you provided a wrong URL as your live URL
@Martincillo94
Submitted
¿Qué te parece esta solución? ¿como se optimizaría mas el código?
@Femi-Bright
Posted
Este es un muy buen intento MARTINCILLO. Incluso usaste el elemento figura, acabo de aprender esa idea ahora. Bonito👏. Espero que Google haya hecho un buen trabajo traduciendo esto.
@Captressketh001
Submitted
On the mobile screen, the previous button is displaying on the sidebar when it is active. How can I resolve that? Thanks, I await your feedbacks
@Femi-Bright
Posted
Hi! Oluwakemi! Nice Attempts 👏. As regards the sidebar issue. I will suggest you add z-index to the sidebar to place it above the buttons
.wrapper .sidebar {
z-index: 50;
}
I also noticed that the nav bounces whenever I hovered over a Link. You could correct that by this trick
header ul li.menus {
border-bottom: 5px solid transparent;
}
header ul li.menus:hover {
border-bottom-color: (255, 125, 26);
}
the bottom borders will always be there, so its not like they will be adding to the height of the nav each time you hover. I hope you find this helpful
Marked as helpful
@wesleyjacoby
Submitted
I mostly seem to struggle with resizing images. I've used the max-width property on the QR Code image, but should I have used the width and height properties instead? Does max-width and min-width have to do with responsiveness? The difference between these properties is something I need to research further.
Mostly, I'm relatively pleased with the result.
@Femi-Bright
Posted
Hi Wesley, Lucas has already given a comprehensive explanation on max-width/min-width. Let me just add this.
img {width: 500px;}
You are telling the browser that "Hey! come rain, come sunshine, I always want this image to always be 500px even if the viewport width is 320px IDC"
img {max-width: 500px;}
You are telling the browser that "Hey! if there's enough space to make this image 500px fine! else feel free to scale it down as the viewport decreases. I just want it to have a maximum width of 500px"
img {min-width: 500px;}
You are telling the browser that "This should be the minimum width for this image at any viewport but feel free to scale it up if need arises"
Nice, attempt btw
Marked as helpful
@timmld
Submitted
@Femi-Bright
Posted
This is very good but remember to fix your accessibility issue. I'd suggest you add a role="main" attribute to your card div
@Femi-Bright
Submitted
@Femi-Bright
Posted
Your feedbacks are needed and will be appreciated 👌