Stats Preview Card

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  Hello and good work! Layout is close to the provided design.

  Answer 1: To set a background color on an image you need a container element, give it a color and lower the image opacity

  Answer 2: Text overflows because there is a min-width on h1 element. Seems you tried to fix it by giving max-width for mobile size but min-width still applies. Here is some refactor fixing your issues:

  .left-section-bottom {
      flex-wrap: wrap;
      justify-content: center;
  }
  /* To prevent overflow of bottom elements */
  
  
  <div class="img-container">
      <img src="images/image-header-desktop.jpg" alt="people working in comfy office" class="right-image">
  </div>
  
  .img-container {
      background-color: hsla(277, 65%, 42%, 0.66);
  }
  
  .right-image {
      display: block;
      opacity: .3;
  }
  /* You might need to play around with it */
  
  @media screen and (max-width: 375px) {
          h1 {
              /* max-width: 10rem; */ 
              min-width: 1rem;
          }
         /* Remove max-width otherwise it won't align to center */
  
          .right-image {
              width: 100%;
          }
         /* To prevent overflow of image and give it a proper size for mobile*/
  }
  

  There are still things can be changed for responsive layout. A tablet user won't see half of the content as it overflows. I suggest designing mobile version first. From there you can adjust with media-query for bigger screens. At worst a user will get a small content for it's screen size but better than overflowing. With desktop-first approach, on smaller screens elements mesh up with each other and needs extra refactoring as content keeps overflowing as screen gets smaller. Also html is responsive by default, we're the ones making it non-responsive ^^ This makes it more convenient to design mobile first. It is a personal preference after all but try to be careful with overflow on small screens regardless.

  Additional suggestions:

  • Elements should be wrapped by landmarks for semantic markup. You can change .container <div> to <main> for this project.
  • You shouldn't leave alt empty. Gave an example on above solution. Also on images just for design purposes you can use aria-label:hidden so that screen reader only bothers with meaningful content.

  Marked as helpful

  1

  ---

  

  Paul Toledo•60

  @PaulawlietPosted about 2 years ago

  Thanks @ErayBarslan for the suggestion and helpful tips! I've done your suggestion and it works perfectly:

  1. changed the wrapped elements to main so that it will be semantic markup, created a div for the image to set opacity and put an alt on the image

  2. for the media query I have successfully done it and it is now responsive for 375px below as you can see

  Thank you for the help!

  1

  

  Paul Toledo•60

  @PaulawlietPosted about 2 years ago

  @ErayBarslan follow- up question any tips when designing mobile first? do I just create media query right away when I created my semantic layout before designing?

  0

  

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  @Paulawliet You're welcome! With mobile first approach, you can style the initial layout for mobile. Then adjust for bigger screens by using min-width media query. So you don't need to create media queries before designing mobile version. It would be hard to predict what values to use on queries without seeing the outcome.

  How I approach is to use media query below each section of design. For example queries for navigation are placed before starting another section. Then do the same for each design block separate from other parts up to footer. This makes it easier for me to navigate through queries. Other approach requires lots of scrolling.

  Always start styling from top of the screen and style through bottom once you're happy with result. Placement of elements are relative to the elements above them. If you'd change the margin of navigation container it effects the entire page but same won't apply for footer

  Whether to add media query after finishing each section or entire layout; I like to finish the mobile layout first then style for bigger screens. But styling the layout for each screen size in blocks is also convenient.

  Lastly, I suggest you to not start styling mobile blindly. One column layout is usually all mobile needs but for desktop it differs for each design. For example if the desktop design makes more sense with a grid layout, it would be redundant to use flex for that part on mobile. So what I do is to check both designs side by side to have an idea before starting up.

  If you have any other question feel free to shoot and happy coding :)

  1