All comments

• 

  Egnodia• 70

  @Egnodia

  Submitted 5 days ago

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

  Can I get more responsive websites hints, cause I'm really struggling with it :(

  

  Responsive Product Preview Card

  1

  20

  

  Vynny LonlySoft• 110

  @Lonlysoft

  Posted 5 days ago

  You did a pretty well job in desktop! There's still some stuff like the icon positioning and the hover on the button, but those can be resolved easily.

  There are a lot of responsive website hints, so it would be better if you say what you're more struggling with so the help would be more precise. But seeing your code I might have noticed some stuff that might had been difficult to you:

  If you're wondering how to do the image switch for mobile and desktop, in HTML you can use the <picture> tag. It might sounds like a more complex tag, but it's used to change the image according to a media query statement. Example:

  <picture>
      <source media = "(max-width: 23em)" srcset = "img.png"/>
      <img src = "img2.png"/>
  </picture>
  

  • You can add more than one source tag if you need to.

  The mobile design you can do it by using the flex-direction: column in the flexbox container and appliyng the proper styles on the media query.

  I think this is the better option here since you used flexbox.

  Also, I see you tried to test media queries, but nothing might have happened. The issue is that the mobile width isn't 375rem. (The font size in the root isn't 1px.) And since the font size is 16px you actually are appling the media query to a screen which width is between 6000px and 23040px. You need to convert 'px' to 'em' in order to get the media query interval right.

  Hope those hints help.

  Marked as helpful

  0
• 

  Mohammad Razim• 60

  @yours-truly68

  Submitted 8 days ago

  

  Recipe Page CSS

  2

  40

  

  Vynny LonlySoft• 110

  @Lonlysoft

  Posted 8 days ago

  Good looking! The only thing that I think it misses is that in the mobile the image has the padding so it doesn't have a effect that looks like a banner. My recommendation is to divide the image from the rest of the text and in the @media adding a padding to this division and turning the recipe-page's padding 0. Also, the font is already bold by default, so just dim the font-weight in the headings to 400 or to var(--fw0-light) this will look closer to the design and you'll still have the headings' properties.

  0
• 

  CyPhEr420• 380

  @CyPhEr420

  Submitted 22 days ago

  

  simple app

  1

  50

  

  Vynny LonlySoft• 110

  @Lonlysoft

  Posted 9 days ago

  There's some subtle differences in colors, but I like them. One of the things that I felt missing here is the color changing when hovering and the link and the anchor doesn't covers the whole button. That means that the user needs to click on the text to access the link. To do that you could just style the <a> and not the div or just set the width and height of the <a> to 100%.

  0
• 

  P

  Abuzer Emre Osmanoğlu• 190

  @aeosmanoglu

  Submitted 9 days ago

  

  Blog Preview Card

  2

  20

  

  Vynny LonlySoft• 110

  @Lonlysoft

  Posted 9 days ago

  It looks good. In the code I see that you used tailwind to do the work. It's overall a good technology to get used to. The only thing that I may point out is that you forgot to add a border. Although, it looks even better than the original design because it looks cleaner. Pretty clever if it was intentional.

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Franixerx• 10

  @piolonrqz

  Submitted 10 days ago

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

  centering the div, right position of image and the text

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

  positioning of the dv, image and text

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

  Project with logical background like a color sequence it has logics behind it

  

  Screen Responsive Landing Page

  1

  10

  

  Vynny LonlySoft• 110

  @Lonlysoft

  Posted 10 days ago

  Alright, here's some tips:

  1. I see that you tried the position absolute centering in the container. This can't be done there because the body has no height or width. (50% of 0 is 0). To that work define a width for the body element to actually use position absolute centering. Yet, I don't recommend absolute centering unless you're making elements that need to be overlapped. This is not the case so I recommend flexbox.

  2. The image has its original size. So it comes off the boundaries of the container. I see that you tried to make the qr-code div as a try to contain image size, but issue is that the image doesn't obey this declaration. My recommendation is to add the img selector in CSS and set its width and height to 100% or... just delete the qr-code div and set the class name qr-code directly to the img tag.

  About logic background color: In this project there's no need for a said "it has logics behind it". The little "gradient" there is just made using CSS' box-shadow property in the container. And the background color is just a solid color that you can get 1:1 on the style-guide.md file provided in the challenge. It's in hsl() between lines 14 to 18.

  I hope those tips help.

  Marked as helpful

  0