CODEWITHSUNDEEP
cssmodal-dialog
JusTTaIReX
JusTTaIReX

Reputation: 11

How to make a responsive modal? CSS

I got an assignment to make a modal below responsive. Should I just place more media queries or fix modal sizes to a percent? Are there any techniques,tips or websites which could help me to accomplish my goal?

Thank you in advance.

Modal Parent:

.OverlayModal {
  z-index: 2;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

Modal: 

.SignInModal {
    background: rgb(255, 255, 255);
    border-radius: 20px;
    border: 1px solid rgb(204, 204, 204);
    margin: auto;
    width: 238px;
    height: 550px;
    outline: none;
    overflow: scroll;
    padding: 0;
    @media (min-width: 768px) {
        width: 420px;
        height: 400px;
    }
}

Upvotes: 0

Views: 1047

Answers (1)

Hash
Hash

Reputation: 8020

In simple,

Percentage based layout is used when the layout should be similar on every screen.

Media queries is used when you want to change the layout on different screen sizes.

Upvotes: 2

Related Questions