Responsive Grid Layout

Community feedback

• 

  Fran Extremera•210

  @franexmo81Posted about 1 year 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.

  1

  ---

  

  Aram Nayebbandi•510

  @devaramnyePosted about 1 year ago

  Thanks. I will keep in mind to simplify my code for advantages. I thank you alot!@franexmo81

  1