Four card feature section solution built using Gridbox

Community feedback

• 

  _SabijaThor_•355

  @SasaVaticPosted 12 months ago

  Hi Mostafa Mohi, Your solution is very nice. Two things that I would change as if I was one writing css. I Would not use relative position for .feature-logo. You can position it with padding or margin. I would do something like this to escape overflowing:

  .feature-logo {
      margin-left: auto; ---> add
      display: block; ---> add
      /* position: relative; */ ---> delete
      /* top: 20%; */  ---> delete
      /* left: 75%; */ ---> delete
  }
  

  And for div I will exclude fixed height. In this case it is not mandatory. But what if in the future you add some extra text. Text and .feature-logo will overflow their div parent if their content height is larger then parent height.

  div {
      width: 100%;
      max-width: 400px;
      /* height: 250px; */ ---> delete
      padding: 30px;
      border-radius: 5px;
      box-shadow: 10px 4px 30px var(--shadow-color);
  }
  

  That is my brief summary. If you have any more questions feel free to ask. Good luck Mostafa :)

  Marked as helpful

  1

  ---

  

  Mostafa Mohi•170

  @mo-oePosted 12 months ago

  @SasaVatic , this is very helpful, at first I was wondering why my text and logo are overloading outside their parent div, now I figured it out "because of fixed height" thanks to you. Thank you very much for this input :)

  1

  

  _SabijaThor_•355

  @SasaVaticPosted 12 months ago

  @mo-oe You're welcome :)

  0