Responsive feature cards

Community feedback

• 

  Yacoub AlDweik•990

  @YacoubDweikPosted about 1 month ago

  Oh Alex it is amazing!

  I guess you have the figma design for all screens, I would only say that your design overflows under 330px and at the same time when your design reaches any breakers (those values for media quieres) it looks a bit odd, I mean the cards are too wide.

  These two issues caused by the same thing which is the width of the cards so try to solve that by changing the width of the container and the cards for some of those media, btw in such designs where you can clearly see it is like a table then the grid would be a life saver here and make the life easier cuz grid is the best when it comes to 2D while flex is the best when it comes to 1D.

  Keep it up!!

  Marked as helpful

  2

  ---

  

  Alex•120

  @CaplexWPosted about 1 month ago

  @YacoubDweik Thank you Yacoub! The width is really a bit neglected at some points, I'll try to polish it to shine. But I didn't get about overflowing under 330px. I jsut tested it in a dev mode and on my iPhone SE-1 (320px), and it look fine. Maybe not pretty, but at least all the content is on the screen. And nothin is beyond it's borders. What did you mean by "overflow"? Can you describe how you tested it, so I can recreate it and find out the problem?

  1

  

  Yacoub AlDweik•990

  @YacoubDweikPosted about 1 month ago

  @CaplexW

  Go to your browser (it's Chrome in my case) then right click --> inspect then start minimize the window and you would see a horizontal scroll bar appears under 335px , yeah the elements would be visible but your design would start go to left and right, also they won't be visible under 300px, they say that the smallest screen would be around 320px but I always encourage you to make youe design unlimitedly responsive

  1

  

  Alex•120

  @CaplexWPosted about 1 month ago

  @YacoubDweik That’s strange, because before I write my reply I did the same thing. I also did it in chrome and in Firefox. And it was completely fine before 320 PX. Under 320 PX the layout started to scale down in chrome. In Firefox it started to overflow to right, and that’s understandable because I have a minimum width of the body element to 320. But I completely don’t understand why could it overflow under 330, because there is only two minimum width in the styles.

  1. in the body
  2. the card element.

  But card element minimum width is 33% of the container so it should never be wider then the container.

  Amount of content on the other hand is also should not be a problem of overflow under 330. So I’m kind of lost on this.

  Update. I found some kind of bug in chrome right now. I tried click "inspect" instead of activating dev.tool on F12 like I always do, and it's overflowing! But it's not overflowing on 330px, it's overflowing on any size, right now I stretch it to 2400x1000 and it's overflowing on both sides.

  When I close dev.tool and reopen in (still with inspect) it opens on 2400x1000 and it works fine. Again I narrowed it to 300px and it's still fine. Could it be the same bug on your side?

  1

  

  Yacoub AlDweik•990

  @YacoubDweikPosted about 1 month ago

  @CaplexW

  Hey! They are the same for me F12 or right click then inspect it is the same, Now the reason why your design is overflowing at 335px and not at 320px is because the width of the window when you minmize it is gonna be the width of your design (320px) + the width of the vertical scroll bar (16px I guess) so that's why we see that your design overflows at 336px and not from 320px.

  Like in all cases there's no need for that min-width of the body as I saw when I removed it nothing was destorted -.-

  1

  

  Alex•120

  @CaplexWPosted about 1 month ago

  @YacoubDweik Well, I guess 320+scrollbar makes sence. It would explain why I don't have overflow on mobile device, but I still don't understand why I don't have a horizontal scrollbar in a browser when you do.

  min-width on the body is not needed, it's just a cutoff for screens under 320px. I do this because I don't believe that it's needed to make layout under 320px, but if somehow it happens that page opened on a screen less than 320px the layout no longer shrinks but simply scaling down. It's not ideal, but at least it's readable.

  Did I get it right - when you turn off the min-width on the body, overflow is gone?

  1

  

  Yacoub AlDweik•990

  @YacoubDweikPosted about 1 month ago

  @CaplexW

  100%

  Yeah Without min-width the body and all its elements will be very flexible and gets smaller and smaller according to the window size

  Marked as helpful

  1