Space tourism mobile-first solution using CSS Grid and Flexbox

Community feedback

• 

  P

  Ahmed Lemssiah•410

  @ArtequePosted 9 months ago

  Hello @alonsovzqz, congratulations on finishing the challenge though 😉 I had a hard time with this one too 😕

  First Question: the picture alignment

  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;
    }
  }
  

  Second question: "the bugs"

  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

  0

  ---

  

  P

  Alonso Vazquez•170

  @alonsovzqzPosted 9 months ago

  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 🏆

  0

  

  P

  Ahmed Lemssiah•410

  @ArtequePosted 9 months ago

  @alonsovzqz. Oh perfect. I'm happy that I could help you solve this problem. Keep up the good work though

  1