First time using CSS Grid And SCSS

Community feedback

• 

  Adler G Luders•1,580

  @just-a-devguyPosted about 3 years ago

  @ibnsmay96; yes, you can definitely do this with flexbox. I think grid might be the smartest and easiest approach for the wrapper but it can be done with flex as well. Great job overall though. I know, from experience, this challenge can be tricky so really well done on completing it.

  Marked as helpful

  1

  ---

  

  Mahmoud Samy•20

  @ibnsamy96Posted about 3 years ago

  @adluders But how to achieve changing sections order in flexbox? It's possible but not in the way the challenge wanted. As described in the next image, The challenge wanted sections order to change in the mobile view. https://ibb.co/6nJQXPs

  1

  

  Martha•510

  @Mtc-21Posted about 3 years ago

  @ibnsamy96 Use the order property on the flexible element you want to change

  0

  

  Adler G Luders•1,580

  @just-a-devguyPosted about 3 years ago

  @ibnsamy96, @mtc-21 answered below. There is an order property in CSS which you can use to dictate what order something gets displayed as. The main pitfall with it it's I don't believe it's accessible

  0

  

  Mahmoud Samy•20

  @ibnsamy96Posted about 3 years ago

  @Mtc-21 @adluders I know about the flexbox order attribute but if you saw how the design should be in the mobile view, you would find that at using flexbox, it needs to change HTML elements structure in the mobile view, not just the css values. To make my point clear, let's assume that we structred our html code like that:

  <main>
      <div>
          <img src="logo.png"/>
          <div>We're Coming Soon</div>
      </div>
      <img src="girl-image.jpg"/>
  </main>
  

  And we used the next css rules in the desktop view:

  main{
      display:flex;
      flex-direction:row;
  }
  

  In this case, using flex-direction in mobile view to be a column won't help as it will put the content in a vertical way ( logo => content => girl-image ). And if we changed orders we can make it ( girl-image => logo => content ) not ( logo => girl-image => content ) as the html structre prevents us from doing so.

  I don't know if I'm still missing the point 😕

  2

  

  Adler G Luders•1,580

  @just-a-devguyPosted about 3 years ago

  @ibnsamy96 that's a good point, maybe I was mistaken. I think it is possible with flex but I'd have to sit at my computer and test it out. I feel like maybe having everything as an individual div and play with the heights should work but I can't test it to know for sure. I'll test my theory out when I get on my computer and will let you know how my experience goes.

  Marked as helpful

  2

  

  Martha•510

  @Mtc-21Posted about 3 years ago

  @ibnsamy96 see the example, I hope this helps you, link in one of the challenges use this property, if you want you can see it this type of designs is better to work with grid and do not have to complicate in the relocation of the elements, because with grid-column and grid-row decide where the only one, to change the resolution with a media query

  0

  

  Mahmoud Samy•20

  @ibnsamy96Posted about 3 years ago

  @adluders Great, I'll try to test it too.

  0

  

  Adler G Luders•1,580

  @just-a-devguyPosted about 3 years ago

  @ibnsamy96 How did it go?

  0

  

  Martha•510

  @Mtc-21Posted about 3 years ago

  @ibnsamy96 Hi, how are you doing? Just in the challenge I posted yesterday, I used flexbox and order in the form to change the order of the span tag.

  Marked as helpful

  0
• 

  Mahmoud Samy•20

  @ibnsamy96Posted about 3 years ago

  @Mtc-21 @adluders, Thanks for you both. I achieved the same result using float in the desktop view and flexbox with its order property in mobile view. https://codepen.io/ibnsamy96/full/VwzyXwj

  0

  ---

  

  Adler G Luders•1,580

  @just-a-devguyPosted about 3 years ago

  @ibnsamy96 ayye glad you found an alternative solution

  1