All comments

• 

  uchenworks•290

  @uchenworksSubmitted over 1 year ago

  Am having issues with the grid sections there are some little white space in it, and i don't know how to get rid of it. can anyone please help me on how to solve this issue.

  

  Responsive landing page using Html, css / css grid, & javascript.

  1

  40
  

  Quelleris•190

  @QuellerisPosted over 1 year ago

  Hi, to solve your issue you can set display: block to images.

  1

  This comment has received 1 replyShow
• 

  odpage•10

  @odpageSubmitted over 1 year ago

  Hello!

  I'd really appreciate any feedback on this project.

  Some questions and challenges came up while building: • Did I overcomplicate this by using Flexbox? • I struggled to center the flex-container div vertically and horizontally. I ended up using position:absolute, after trying with Flexbox for a while. Is it okay to mix the two techniques together? Is there a more efficient way? • I'm not sure if I used Media Queries properly. I found it especially hard to make this responsive at 375px screen size and struggled to adjust the flex-container div width as well as font size.

  

  Responsive QR code component

  2

  70
  

  Quelleris•190

  @QuellerisPosted over 1 year ago

  Hi, using flexbox to center content on the screen is perfectly fine and it is a much better solution than using position absolute, as it will make layout more responsive. If you want to center the component, you can use display: flex on body element, like this:

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

  Also consider using rem units instead of vw for setting width of the component.

  Great job on this challenge and happy coding.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Abanoub Refaat•200

  @abanoub-refaatSubmitted over 1 year ago

  Hello again guys,

  I've just completed this challenge, I used the <main> tag and added the atr to the images as some of the feedback suggested. I'm open for more feedback.

  Thanks in advanced for your feedback and time!

  

  Three Column Card Preview Component [Responsive - Css Grid]

  1

  50
  

  Quelleris•190

  @QuellerisPosted over 1 year ago

  Hello Abanoub. Congrats on completing this challenge. I have a few suggestions for you:

  • you should avoid multiple <h1> elements. Generally, one page should have only a single <h1> element that marks up a page title. In this challenge you don't have a whole page so you can add visually hidden <h1> element with class="sr-only".
  • It seems that the car icons are decorative, so you can leave the alt attribute empty (alt="") so they can be ignored by screen readers.
  • notice that some elements like buttons or cards have similiar style. Instead of adding the same style to each element and repeating code, you can make a single class for example card-button and add this class to every button.

  .card-button {
      padding:  12px 20px;
      margin: 30px 15px;
      border: 1px solid transparent;
      border-radius: 25px;
      cursor: pointer;
      transition: .2s;
  }
  

  and then in HTML:

  <button class="card-button sednas-b">Learn More</button>
  

  I hope this helps. Happy coding.

  Marked as helpful

  0
• 

  clarisacosma•20

  @clarisacosmaSubmitted almost 2 years ago

  My first project! :)

  

  Chanel Project

  1

  60
  

  Quelleris•190

  @QuellerisPosted almost 2 years ago

  Hello @clarisacosma! Congrats on your first project and welcome to Frontendmentor. If you don't mind, I have a few suggestions for you:

  • As it is said in your accessibility report, you should wrap your main content in <main> landmark. HTML landmarks are used to improve navigation experience on your site.
  • It's not recommended to set fixed height to components. That way the element is not responsive and can cause some issues like content being cut off. Instead let the content of the component define height. If you must, use min-height or max-height.
  • The same goes for width. Instead of setting fixed width with px like width: 700px, use min-width or max-width. It will set a width for a component and let it grow or shrink if necessary.
  • To make the component closer to the design, you can add width: 50% to #desc-containeron desktop, and width: 100% on mobile.
  • consider using class selectors instead of id selectors. The id can be used only on one, unique element and class selectors can apply to multiple elements.

  I hope this helps. Happy coding.

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiSubmitted about 2 years ago

  Feedbacks are welcome!!!

  

  Column Card with CSS

  2

  71
  

  Quelleris•190

  @QuellerisPosted about 2 years ago

  Hello, I'd recommend not setting a defined height for the container. When making the screen smaller it causes the content to break outside of the container. Instead, use min-height or max-height to set element's height and allow it to grow or shrink if necessary. The same goes for width. Instead of width, use min-width or max-width.

  Use rem units instead of vw for setting width, it will cause the component to behave better.

  also minor thing, but you didn't add background-color to body and border-radius to the container.

  happy coding.

  Marked as helpful

  0