Grid, flex, mobiler first

Community feedback

• 

  hitmorecode•6,250

  @hitmorecodePosted about 1 year ago

  Nice well done. There is an issue when going to mobile the circle is no longer a circle. On desktop is fine on mobile not. This problem is caused by margin conflict. Here is how you can fix this

  .component__top {
    background: linear-gradient(var(--gradient1), var(--gradient2));
    border-radius: 0 0 40px 40px;
    display: flex;
    align-items: center;
    align-items: center;
    flex-direction: column;
    padding-top: 1rem; /* add this line */
  }
  
  .component__top__title {
    color: var(--Light-lavender);
  /*   margin-block: 1.6rem 1.5rem; */ /* remove this line */
    font-weight: 500;
    margin-bottom: 15px; /* add this line */
  }
  
  .component__top__content {
    width: 80%;
    color: var(--Light-lavender);
    text-align: center;
  /*   margin-bottom: 2.7rem; */ /* remove this line */
  }
  

  Marked as helpful

  1