@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
@alonsovzqz
Posted
Thanks a lot @Arteque !! I made the change and it actually worked!! Just like magic. And yes I must admit this is a quite tricky one and given the structure of the page I decided to go with another solution that was to wrap the indicators and the "content" (or description/text) in a wrapper. But that brought another different problem with the javscript file and the navigation. I think so far it works but I need to take my time to take a look into it really deep since need to fix it but without lose the current functionality from the other pages. Once again, thanks man 🏆
@Arteque
Posted
@alonsovzqz. Oh perfect. I'm happy that I could help you solve this problem. Keep up the good work though
