@Arteque
@alonsovzqz
Submitted
@Arteque
Posted
Hello @alonsovzqz, congratulations on finishing the challenge though 😉 I had a hard time with this one too 😕
The 100% width in the index.css file on line 797 takes up all the available space, which is why justify-self: flex-end does not trigger. Changing the width to fit-content solves the problem, but you need to check the behavior in the mobile view. You can also add this as a media query though:
@media screen and (max-width: /*your desired width*/) {
.grid-container--technology > picture {
grid-area: image;
max-width: 100%;
/* width: 100%;*/
justify-self: flex-end;
width:fit-content;
}
}
I think the problem with this project is the fact that there are 3 "Sliders" Style and as a dev, I tried to use as less Js as possible and css. That's why I opted for self-contained class names, at least I tried, with no nesting with the parents' element. Like so, I could place the element of the sliders where I wanted after displaying a grid element. I was too lazy and didn't take that much time analyzing the template designs... 😞
You did a good job though. Just take time and read your code again, try to use global reusable classes.
Marked as helpful
@alecanonm
Submitted
Hi!, this was my approach to this challenge
this is all, hope you having a good day 🌱
regards, Alejandro
@Arteque
Posted
Hello Alejandro,
I loved this one too. Pretty challenging though. I'm not an expert, but I'll try to help :D (I mean, you used React, and I know so little about it).
For the dark mode, I used the localStorage option!
Here is my way:
When the dark mode button is triggered, I check for the dark mode value in the localStorage. If it doesn't exist, I'll save the dark mode value to the localStorage.
When the light mode is triggered, I check if the dark mode exists in the localStorage. If it does, I'll remove it.
I added a DOMContentLoaded event to check if the dark mode exists in the localStorage to decide which color mode the page will use. Perhaps there are some gurus here to correct or validate this method.
// Set dark mode in the localStorage
localStorage.setItem("theme-mode", "darkmode")
// Get the dark mode item
localStorage.getItem("theme-mode")
// Remove the dark mode
checkDarkmodeExist() && localStorage.removeItem("theme-mode")
Hopefully, I could help.
Regarding the global considerations:
In the desktop view, you need to use a maximum of 4 cards in a single row. If the cards have more width, the flags are going to render much better.
Keep up the good work and take care though ;)
Marked as helpful
@hassanmoaa
Submitted
Done with:
Feedback for improvements is absolutely welcome!
@Arteque
Posted
Hello Hassan Moataz, Congratulations on finishing the challenge, though. I noticed in the mobile view that the pseudo ::after element is causing a scroll on the x-axis. Perhaps setting right: 0; could be better?
Marked as helpful
@TheTreeveloper
Submitted
I need help!
I'm not sure I understand how responsiveness works. I get confused because I don't know if I am to do a media query for every screen size or not, I don't know what the "standard" is. Also, I can't seem to align my form to the left, I'm at wits end. Any help and feedback to help me improve would be greatly appreciated! Thank you.
@Arteque
Posted
Hello Tolulope Oluwabukunmi,
First and foremost, congratulations on completing your challenge! 😊
In your code, you've already used media queries in the right way, I think. The idea is not to use Media Queries for everything. Most of the time, it means that your HTML structure needs improvement. Block-level DOM elements like divs, sections, headers, paragraphs, and headings are by default taking up all the device width. That's why, and you did it right, I think, we start with mobile-first when we code web apps. The breakpoints are to be used when your layout breaks in the browser: for example, when images are way too big and blurry, or paragraph tags are way too large and hard to read for the users.
The fact that you used flex-direction: column in style.css line 58 has rotated the axis of your flexbox. That means that align-items is affecting the "X" axis now - normally the "justify-content" would do that. In this case, I would write my code like this:
.form { display: flex; /* flex-direction: column; / / align-items: center; */ justify-content: center; margin-top: 1.5rem; margin-bottom: 0; padding-bottom: 0; }
And for the desktop view (in your case):
@media screen and (min-width: *****px){ .form { justify-content: unset; } }
I hope this helps a little bit 😊.
My advice is to take more time at the beginning of your coding by analyzing your design carefully and thinking about which HTML structure is the best to use to recreate the current fraction of your design system, and how you are going to make the transition between mobile design to tablet to desktop. The best advice is to try and try again, though.
Marked as helpful
@toubayes
Submitted
i hope you like it please note me
@Arteque
Posted
Hi Youcef Laala,
Though I don't know if it's just me, but for me, there was no margin-inline: auto; for the divs. Everything is on the left side. Perhaps you need a container element for all the elements or something like: body { width: fit-content; margin-inline: auto; } On the mobile view, the control arrows are floating in the middle of the screen. Take care tho ;)
@matheusmantini
Submitted
I had some troubles when applying responsiveness, because in each break point I had to change element's places. So I had to create custom mixins in sass, to solve this issue.
@Arteque
Posted
Hello Matheus,
There are some issues with your <a> tags and hovering behaviors. I think you have to use padding on the <a> tag elements instead of the <li> elements. Some images do not show up. Perhaps check the paths again. Keep it up. It's pretty nice.
Marked as helpful
