Sirajul Islam

Latest comments

• 

  P

  mci3x•70

  @mci3xSubmitted 17 days ago

  What are you most proud of, and what would you do differently next time?

  I'm proud of not giving up at this point.

  Every time I managed to get something to work, some other thing got broken.

  Recreating elements based on Figma is easy but to get it to be responsive and keep it to design, turned out to be very frustrating and very time consuming.

  I feel like lines like these are a little step forward:

  width: clamp(20.438rem, 87.2vw, 24rem);
  height: clamp(36.188rem, 63.65vh, 38.188rem);
  padding: clamp(var(--s-md), 6.4%, var(--s-lg));
  

  Overall I'm not too happy with how it came out.

  What challenges did you encounter, and how did you overcome them?

  This small project almost broke me down :|

  I had a lot of problems with getting rid of media queries and at the same time keep it to design.

  There is no top and bottom padding on mobile, on tablet padding is bigger and on all sides and no padding at all on desktop. At the end I had to use two media queries for that.

  At first I wanted to use <ul> on links but I had issues with styling buttons and it was really annoying. Decided to use role="list" instead.

  Wanted to go back to <ul> at some point when I discovered that at some particular screen sizes my buttons are overflowing and I didn't find the solution. I only added overflow: auto so there is a way to scroll when it happens

  It is killing me that on my .list element gap and justify-content: space-between is not working as I would expect and I don't know why. I wanted to get rid of gap so buttons would come closer when viewport height is lower but they just overflow.

  What specific areas of your project would you like help with?

  In case of some screen dimensions like 1280x800 my buttons are overflowing and I couldn't help it.

  I wanted to use clamp() on gap but I failed.

  I wanted to use space-between without a gap but it didn't work.

  Didn't want to shrink buttons because on design their height is fixed.

  Tried flex-shrink also but without success.

  

  Responsive Social Links Card Component

  #accessibility

  2

  30
  

  Sirajul Islam•260

  @sirajshaonPosted 17 days ago

  Great work. Try removing height property from class "card". I think, It will fix your scroll issue. Let me know. Thanks...

  Marked as helpful

  1
• 

  Giriprasath1726•30

  @Giriprasath1726Submitted 29 days ago

  

  Four_Card_Section

  1

  30
  

  Sirajul Islam•260

  @sirajshaonPosted 29 days ago

  add

  html, body { height:100%;}
  

  then add these inside body tag

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  

  this will make your design centered. and make sure to use the design responsive for all size using variable units instead of px. You can check my solutions

  0
• 

  Franco•230

  @Franco-CipollaSubmitted about 1 month ago

  What are you most proud of, and what would you do differently next time?

  Can someone please look at my website and code and tell me the solution to why my cards fly up a bit when i hover over the button? it happened since i put a border to my button when hovering

  

  3 Component Page Flexbox

  1

  20
  

  Sirajul Islam•260

  @sirajshaonPosted about 1 month ago

  give your button border inside button style and give border color --clr-grey. remove border and it's color from button:hover style. for more understanding, you can check my design..

  0