Skip to content
OverviewSolutions
8
Comments
4

Eren

@for-dev9Bangkok210 points

Programmer

Latest solutions

View more solutions

Latest comments

  • Eren•210
    @for-dev9

    Hi, Nice job. You can change your CSS class when screen size change by using @media

    Example // effect when screen size is <= 600px and then change flex-direction from row to column

    @media (max-width: 600px) {
  .yourClass {
    flex-direction: column;
  }
}

For more information https://www.w3schools.com/cssref/css3_pr_mediaquery.php
    Marked as helpful
  • Eren•210
    @for-dev9

    Hi, Nice work But i think u miss something. when click 'mark all as read' background color & Dot should disappear.

    Marked as helpful
  • Eren•210
    @for-dev9
    1. add modal div --> <div id="modal" class="modal"></div>
    2. set modal stylesheet --> display: none; position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);
    3. update your menu stylesheet z-index to 2
    4. Call JS function to show modal div -- > document.getElementById('modal').style.display = 'block';
    Marked as helpful
  • Eren•210
    @for-dev9
    1. add modal div --> <div id="modal" class="modal"></div>
    2. set modal stylesheet --> display: none; position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);
    3. update your menu stylesheet --> z-index:2
    4. Call JS function to show modal div -- > document.getElementById('modal').style.display = 'block';
    Marked as helpful