Title: Make Responsive PopUp Width Fixed
Last modified: August 22, 2016

---

# Make Responsive PopUp Width Fixed

 *  [frometa79](https://wordpress.org/support/users/frometa79/)
 * (@frometa79)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/make-responsive-popup-widgh-fixed/)
 * I need some help making a Responsive PopUp to have a Fixed Width Size. When the
   User Resize the Screen, or use Mobile, I want the PopUp to have a Default Width
   Size.
 * Demo: [http://mitves.com/wordpress/demo/](http://mitves.com/wordpress/demo/)
 * **The PopUp Width get mess up when I change Screen Resolution.**
    See this Image:
   [http://i61.tinypic.com/2gtq554.png](http://i61.tinypic.com/2gtq554.png)
 * I need the Popup Size Fixed, for Example: 55% Width.
 * **This is the CSS code I have right now:**
 * `.modal-box {`
    `position: fixed;` `top: 50%;` `left: 50%;` `margin-top: -50px;``
   margin-left: -100px; }` `@media (min-width: 50em) {` `.modal-box { width: 10%;}}`
 * `.modal-box header,`
    `.modal-box .modal-header {` `padding: 1.25em 1.5em;` `
   border-bottom: 1px solid #ddd;` `}`
 * `.modal-box header h3,`
    `.modal-box header h4,` `.modal-box .modal-header h3,``.
   modal-box .modal-header h4 { margin: 0; }`
 * `.modal-box .modal-body { padding: 2em 1.5em; }`
 * `.modal-box footer,`
    `.modal-box .modal-footer {` `padding: 1em;` `border-top:
   1px solid #ddd;` `background: rgba(0, 0, 0, 0.02);` `text-align: right;` `}`
 * `.modal-overlay {`
    `opacity: 0;` `filter: alpha(opacity=0);` `position: absolute;``
   top: 0;` `left: 0;` `z-index: 1000;` `width: 100%;` `height: 100%;` `background:
   rgba(0, 0, 0, 0.3) !important;` `}`
 * `.modal-box a.close {`
    `line-height: 1;` `font-size: 1.5em;` `position: absolute;``
   top: -0%;` `right: 2%;` `text-decoration: none;` `color: #bbb;` `}`
 *     ```
       <code>.modal-box a.close:hover {</code>
       <code>color: #222;</code>
       <code>-webkit-transition: color 1s ease;</code>
       <code>-moz-transition: color 1s ease;</code>
       <code>transition: color 1s ease;</code>
       <code>}</code>
   
       <code>.buttonFb {</code>
       <code>background: none repeat scroll 0 0 rgb(73, 108, 180);</code>
       <code>box-sizing: border-box;</code>
       <code>border-radius:10px</code>
       <code>color: #ffffff !important;</code>
       <code>cursor: pointer;</code>
       <code>display: block;</code>
       <code>font-family: Lucida Grande;</code>
       <code>font-size: 16px;</code>
       <code>font-weight: 400;</code>
       <code>padding: 18px 5px;</code>
       <code>width: 100%;</code>
       <code>font-size: 22px;</code>
       <code>text-decoration:none !important;</code>
       <code>text-align:center;</code>
       ```
   
 * `}`

The topic ‘Make Responsive PopUp Width Fixed’ is closed to new replies.

## Tags

 * [popup](https://wordpress.org/support/topic-tag/popup/)

 * 0 replies
 * 1 participant
 * Last reply from: [frometa79](https://wordpress.org/support/users/frometa79/)
 * Last activity: [11 years, 7 months ago](https://wordpress.org/support/topic/make-responsive-popup-widgh-fixed/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics