responsivecoding-bootcamp-testimonials-slider by using Object and flex

Community feedback

• 

  Sahand Masoleh•1,210

  @sahand-masolehPosted about 2 years ago

  Hi there! Here's what I think:

  1. Don't use 100vh, it will cause scrolling on mobile browsers because of the address bar.

  2. Remove max-width from your body, because you need the body to stretch to be able to center your content. Set your max-width on your <main /> element and give it a margin of auto to have it centered all the time.

  3. You've lost responsiveness because your text element is absolutely positioned and thus removed from the flow of the page. It doesn't care about the other elements. You can control how much your two main elements occupy of the parent flex box using flex-basis and width, preferably with a percentage unit.

  Marked as helpful

  1

  ---

  

  MX•290

  @xingxing-progPosted about 2 years ago

  @sahand-masoleh Yes, I agree, mine is broken responsive. but what can you put the text some text on the picture, the only way I can think of is to put the position is absolute, I couldn't come up with other way. But I know that's not real responsive, I literally just made mobile and desktop mockup look, it's not responsive. I saw your project for this assignment, it's so coherent and real responsive. Do you have any good ideas, please share with me? Thank you very much.

  0

  

  Sahand Masoleh•1,210

  @sahand-masolehPosted about 2 years ago

  @xingxing-prog You can set the parent to be a grid with more tracks, say 10, and then set the text part to be for example grid-column: 1/7 and the picture to be grid-column: 5/10. This way the will overlap each other but you still have control.

  0

  

  MX•290

  @xingxing-progPosted about 2 years ago

  @sahand-masoleh that’s a very good idea. Let me learn more responsive and try it. I am still learning the grid and responsive now. Thanks for providing this good idea.

  1

  

  Sahand Masoleh•1,210

  @sahand-masolehPosted about 2 years ago

  @xingxing-prog You bet.

  Keep this in mind, an HTML page with no CSS is always responsive, if something overflows, it's because somewhere in your code you're preventing it from shrinking or wrapping properly.

  Marked as helpful

  1

  

  MX•290

  @xingxing-progPosted about 2 years ago

  @sahand-masoleh that’s true. Thank you bro.

  1
• 

  Adriano•38,290

  @AdrianoEscarabotePosted about 2 years ago

  Hi MX, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header, for people who use screen readers, identity what the main title is.
  • I noticed that there is a vertical scrollbar on the page, to solve this we can do the following:

  @media screen and (min-width: 600px)
  body {
      margin: 0;
      padding: 0;
  }
  

  The rest is great!

  I hope it helps... 👍

  0

  ---

  

  MX•290

  @xingxing-progPosted about 2 years ago

  @AdrianoEscarabote I am great!!! How about you? You know me I am still kind of learning the layout and accessibility. Thank you so much. I think it helps a lot. By the way, there is no content in h1, is it Ok?

  0

  

  Adriano•38,290

  @AdrianoEscarabotePosted about 2 years ago

  @xingxing-prog yes, in the case of this layout h1 would fit better in place of p.advice!

  it's a problem because if a screen reader were to read the content it wouldn't have anything, then it would be kind of confusing if the main title doesn't have any content hauahua

  0

  

  MX•290

  @xingxing-progPosted about 2 years ago

  @AdrianoEscarabote Oh, I would try to change it. Hope I can make it works. Haha, It's challenge to make them accessible. Thank you bro.

  0