Jeuri Morel

Latest comments

• 

  joenigiri•10

  @nrl-izahSubmitted over 1 year ago

  

  Building a QR Code design

  2

  70
  

  Jeuri Morel•1,385

  @JeuriMorelPosted over 1 year ago

  The body element has a margin of 8px by default. This adds 16px to the width on top of the 100% of the attribution. Giving the body a margin of 0 fixes the issue you're having.

  The image isn't showing up when I view your site; check that you're properly linking it.

  Marked as helpful

  0
• 

  Alejandro Cañon•260

  @alecanonmSubmitted over 1 year ago

  

  Responsive component with Mobile first, html and css

  #bem

  1

  80
  

  Jeuri Morel•1,385

  @JeuriMorelPosted over 1 year ago

  You might want to try adding mix-blend-mode: multiply; and changing the opacity to 75% to the images to get them looking closer to the design. By the way, you don't have to use filter if you want to change the opacity of something, opacity is its own property (where 0 = 0% and 1 = 100%)

  Marked as helpful

  2
• 

  Shaun Pour•630

  @ShaunPourSubmitted over 1 year ago

  

  Fylo Landing Page /w Two Column Layout

  1

  30
  

  Jeuri Morel•1,385

  @JeuriMorelPosted over 1 year ago

  To prevent the Sign In text from wrapping, you can give your lis width: max-content;. If you want to learn more about how this works you can read the docs here.

  As for the img color, I don't think you can change the fill of an svg that is brought in as an img, you'd have to add the svg to the HTML. If there were only one thing in the image I would tell you to use a filter, for example: filter: invert(1); But that inverts the color for everything in it, including the logo.

  1
• 

  John Vincent Alvarado•10

  @JVinceeSubmitted over 1 year ago

  

  QR code component using html and css

  2

  80
  

  Jeuri Morel•1,385

  @JeuriMorelPosted over 1 year ago

  I personally like using clamp a lot as a way of handling responsive sizes. Don't know what widths the design calls for, but as an example I would give the card the following: width: clamp(320px, 20vw, 375px);. If you never used clamp before, the first value is the min-width, the third is the max-width, and the middle value is the preferred value. You can read more about it here. In my example it will calculate 20% of the screen width and assign that to the card, without going outside of the 320px and 375px range.

  Try not using margins as a way of centering items. You've already setup the body as a flexbox, but the reason the card isn't perfectly centered vertically is that the body isn't taking up the full height. To fix this give the body height: 100vh;

  Marked as helpful

  1
• 

  Celestino Trosso•200

  @iamcelestinoSubmitted over 1 year ago

  

  notification-page

  1

  40
  

  Jeuri Morel•1,385

  @JeuriMorelPosted over 1 year ago

  Clicking on a notification makes the counter go up indefinitely but I'm pretty sure that the counter is supposed to represent the number of unread notifications. So it should start with how many of the notifications are in the unread state and decrease by one whenever those notifications are marked as read.

  0
• 

  Pranjali Sargar•520

  @Psargar616Submitted over 1 year ago

  

  Testimonials grid section solution using Tailwind CSS

  #accessibility#tailwind-css

  1

  80
  

  Jeuri Morel•1,385

  @JeuriMorelPosted over 1 year ago

  The easiest way to center an item is to make its parent a flex box, so I would give the body the following:

      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  

  the min-height is so that it takes up the full screen. This will perfectly center the grid section once you remove the margin-top on it.

  The grid section appears to be too wide, so I would give it a max-width of something more pleasing and closer to the design, maybe 1200px or so.

  Marked as helpful

  0