Subscription page( Grid)

Community feedback

• 

  aykutminikli•280

  @aykutminikli

  Posted over 2 years ago

  Hi, congratz on completing the challenge.

  I think i saw your problem with mobile grid. It seems like you wrote your css for desktop version first and mobile version after. When you gave grid-template-columns to your .parent_section and grid-column to child sections, they still stay when you go mobile. So with your css code, in mobile there is still 3 columns at .parent_section.

  You can approach this with more than one way.

  Way One:

  1. First, you can change grid-template-columns at your .parent_section to grid-template-columns: 1fr. After making your .parent_section a grid you can delete flex-direction: column;
  2. Then you can change grid-column at your section css classes(section_one, section_two, section_three) to all grid-column: 1/2 in your media to make it they are only using 1 column at mobile version.
  3. You can also add grid-template-rows: repeat(3, auto); to your .parent_section to make it 3 rows with auto heights.

  with this your media code should look like this

  @media screen and (max-width:425px){
    .parent_section{
      margin: 13px;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3,auto);
    }
    .section_two{
      grid-column: 1/2;
      border-bottom-left-radius: 0em;
    }
    .section_three{
      grid-column: 1/2;
      border-bottom-left-radius: var(--sect_rad);
    }
    .attribution{
      grid-column: 1/2;
      font-size: 12px;
      font-weight: 700;
    }
  }
  

  Way Two:

  You should start with mobile version and make desktop version after with @media screen and (min-width: your breakpoint choice). When you start with mobile version, there are less problems with making it desktop version. It's like building a house from floors.

  Hope this was helpful.

  01

  Marked as helpful