Responsive popup notification with css and jquery

Question

In my webpage I created a new notification center popup but I can't understand how to change my css from "normal mode" to "responsive mode".

This is my popup:

Icon to open the notification center

In a "big" web page, i see the popup as follow

If i open the page in my mobile browser, i see the popup as follow

This is my css and html code:

<div>
    <div id="noti_Container">
        <div id="noti_Button">
           <button></button>
        </div>
        <div id="notifications" style="margin-top: 13px;">
             <h3>Notifiche</h3>
             <div style="height:200px;"></div>
        </div>
     </div>
</div>


#noti_Container
{
    position:relative;
}

#notifications {
    display:none;
    width:330px;
    position:absolute;
    top:30px;
    right:-30;
    background:#FFF;
    border:solid 1px rgba(100, 100, 100, .20);
    -webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
    z-index: 0;
}

#notifications:before {
    content: '';
    display:block;
    width:0;
    height:0;
    color:transparent;
    border:10px solid #CCC;
    border-color:transparent transparent #FFF;
    margin-top:-20px;
    margin-left:268px;
}

h3 {
    display:block;
    color:#333;
    background:#FFF;
    font-weight:bold;
    font-size:13px;
    padding:8px;
    margin:0;
    border-bottom:solid 1px rgba(100, 100, 100, .30);
}

How can I change my popup to responsive mode?

Thanks!

Answer 1

Try using width:100% and max-width:330px on css. As I said, using hardcoded width will be always respected regardless of viewport width.

I made a sample with max-width:600px.

Pen