All comments

• 

  pierre-pellegrino• 970

  @pierre-pellegrino

  Submitted almost 3 years ago

  I'm facing an issue : Responsive is not working below 780px of page width and I can't figure out why.

  

  Huddle Landing Page

  1

  2

  0

  

  Nishkarsh Dubb• 165

  @Nishkarsh01

  Posted almost 3 years ago

  I saw your front-end challenge and the issue you were facing, and I created a pull request to help you understand.

  I updated the Html and CSS Code a bit in order to make the webpage responsive below 720px;

  1. I created a div with class .center to wrap & center the entire content.
  2. Apart from that I made use of relative units of measurement using % and rem.
  3. When the viewport width hit 720px I changed the flex-direction of the flex-container (.container) to column and accordingly adjusted the width of the mockup image.

  1

  This comment has received 2 repliesShow
• 

  Musha• 100

  @mushamak

  Submitted almost 3 years ago

  How to move svg on top left or right without adding any margin or padding? I tried with text-align: start , but it didn't work, so I simply added margin-right to display it on top-left.

  

  3 Flexible and Responsive Card Page

  2

  2

  0

  

  Nishkarsh Dubb• 165

  @Nishkarsh01

  Posted almost 3 years ago

  Try creating a responsive web-design. I notice that you've used display:flex on the main tag. Try changing the flex-direction to column to make the cards stack on top of each other in combination with media queries.

  As per the svgs I think you've already found a solution to that.

  1

  This comment has received 1 replyShow
• 

  P

  Fluffy Kas• 7,735

  @FluffyKas

  Submitted almost 3 years ago

  Feedback are very much appreciated, have a good day everyone! :)

  

  Single Price Grid Component with vanilla css

  2

  2

  0

  

  Nishkarsh Dubb• 165

  @Nishkarsh01

  Posted almost 3 years ago

  Could you please help me understand the place-value property that you used on body. Could not understand it over documentation. Would be great if you could take the time to help.

  Also, I loved the way you've written and organised your code. Really Beautiful.

  0

  This comment has received 2 repliesShow
• 

  Ramy Ibrahim• 105

  @RamyEbrahim

  Submitted almost 3 years ago

  Hello every one, Please help my to improve my code by your rate and point of view.

  

  3-column-preview-card-component

  2

  1

  0

  

  Nishkarsh Dubb• 165

  @Nishkarsh01

  Posted almost 3 years ago

  Hello, Ramy Ibrahim Fawzy! 👋

  Great Job on finishing another frontend mentor challenge! Here are few suggestions from me:

  • Update the background color of body to background: hsl(0, 0%, 95%);
  • Change the color of each h1 to #fff or white
  • Try rounding the corners of the boxes with CSS property border-radius by separately targeting the .box:nth-child(1) and .box:nth-child(3) .
  • Read about semantic. Semantic elements lead to more consistent code, they are easier to read and improve accessibility.
  • Try using comments more often in code, the comments eventually help you and others to clearly understand the logic behind the code be it in any language.

  Great effort! Keep Hustling, have fun coding! 💪

  0

  This comment has received 1 replyShow
• 

  Gilcllys de Souza Costa• 125

  @gilcllys

  Submitted almost 3 years ago

  I would like someone to check if the site correctly responsive.

  

  HTML5 and CSS3 , flex , hover

  1

  2

  0

  

  Nishkarsh Dubb• 165

  @Nishkarsh01

  Posted almost 3 years ago

  Hello, Gilcllys de Souza Costa! 👋

  Congrats on finishing another frontend mentor challenge! Here are few suggestions from me:

  • Update the background color of body to background: hsl(0, 0%, 95%);
  • Change the case of all the h1 headings to uppercase, using:

   h1{
    text-transform: uppercase;
  }
  

  • It is advised that you do not use inline styling for changing the size of SVG icons instead target them in the stylesheet, it is a bad practice as it makes code cluttery and harder to understand.
  • Try using utility classes to avoid repetition of code.
  • Try using comments more often in code, the comments stating the intent eventually help yourself and others clearly understand the logic behind using certain classes.

  Good luck with that, have fun coding! 💪

  0

  This comment has received 1 replyShow
• 

  Deepthi M R• 90

  @Deepthi-Ramesh

  Submitted almost 3 years ago

  Hello everyone ! Here is a solution for the 3-column-preview-card-component which is totally responsive, created using Flexbox and grid .I am open to take any suggestions to improve my design. Thank you everyone.

  

  3-column-preview-card-component (responsive webdesign)using HTML & CSS

  2

  3

  0

  

  Nishkarsh Dubb• 165

  @Nishkarsh01

  Posted almost 3 years ago

  Hello, Deepthi-Ramesh! 👋

  Congrats on finishing your first frontend mentor challenge! Here are few suggestions from me:

  • please do add the link to the GitHub repository so that we can view your code.
  • update the background color of body to background: hsl(0, 0%, 95%);
  • try giving the heading font-family: 'Big Shoulders Display', cursive;
  • try reducing the height of each card.
  • try fixing the ACCESSIBILITY ISSUES and HTML ISSUES mentioned in the report by frontend mentor.

  Good luck with that, have fun coding! 💪

  0

  This comment has received 7 repliesShow