Responsive Grid Layout

Community feedback

• 

  Fran Extremera•210

  @franexmo81

  Posted almost 2 years ago

  Really nice job.

  The solution looks as the intended design and the responsiveness works perfectly.

  If you want to, you could simplify your CSS a bit by grouping similar elements with the same class name. For example:

  Here is some code from your solution:

  <div class="one" id="one">
  <div class="two" id="two">
  
  .one {
    background-color: var(--moderate-violet);
    background-image: url(./images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position: 90% top;
    border-radius: 10px;
    overflow: hidden;
    padding: 1.5rem;
  }
  
  .two {
    background-color: var(--very-dark-grayish-blue);
    border-radius: 10px;
    overflow: hidden;
    padding: 1.5rem;
  
  

  What you could do is assign an additional common class to both divs that contain the common properties, like this:

  <div class="card one" id="one">
  <div class="card two" id="two">
  
  .card{
    border-radius: 10px;
    overflow: hidden;
    padding: 1.5rem;
  
  .one {
    background-color: var(--moderate-violet);
    background-image: url(./images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position: 90% top;
  }
  
  .two {
    background-color: var(--very-dark-grayish-blue);
  
  

  This could be applied to the rest of the elements (userone/usertwo, infoone__p__s/infotwo__p__s ...)

  This brings some advantages. Let's say that in the future you want to modify the padding for all the cards. You would only need to modify it in one place.

  I hope you find this useful and have a successful learning.

  11