Menu icon Foundation
Centering a Reveal Modal with Max-Width

Here's an demo of what I'm trying to fix: http://jsfiddle.net/23SgB/

I'm trying to fill up an entire reveal-modal with an image of width 950px. I can accomplish this like so:

.reveal-modal {
    padding: 0;
    max-width: 950px;
    background: transparent;
}
            

         

<div id="myModal" class="reveal-modal" data-reveal>
    <img src="http://placekitten.com/950/1552" />
    
    <a class="close-reveal-modal">&#215;</a>
</div>
            

         

This scales well unless the viewport is wider than the image, in which case the modal looks off-center (since it's then limited by it's max width of 950px rather than the normal percentage value). How can I keep the modal centered past this breakpoint?

revealmodalcentermax-width

Here's an demo of what I'm trying to fix: http://jsfiddle.net/23SgB/

I'm trying to fill up an entire reveal-modal with an image of width 950px. I can accomplish this like so:

.reveal-modal {
    padding: 0;
    max-width: 950px;
    background: transparent;
}
            

         

<div id="myModal" class="reveal-modal" data-reveal>
    <img src="http://placekitten.com/950/1552" />
    
    <a class="close-reveal-modal">&#215;</a>
</div>
            

         

This scales well unless the viewport is wider than the image, in which case the modal looks off-center (since it's then limited by it's max width of 950px rather than the normal percentage value). How can I keep the modal centered past this breakpoint?


Doug Macklin gave the most helpful answer for this post
Doug Macklin over 5 years ago

Figured out a solution, not sure why I didn't think of it earlier. I just put all of the content in the modal into another div with the following style:

.reveal-modal-inner {
    margin: 0 auto;
    position: relative;
    max-width: 950px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

Works perfectly, here is the updated fiddle: http://jsfiddle.net/23SgB/2/

This post has been closed. No new replies can be added.

Rafi Benkual over 5 years ago

You will probably have better luck using clearing for this as it is made for images.

We removed the max-width and that allowed the modal to be centered as it should be. You image needs to scale with the reveal modal which is more messy to do.

Here is the example that works up to 2145px wide screens http://cdpn.io/yjxsw
You can see I applied one of our modal size classes to the markup. These also may help.

You can use interchange to swap different size images.

Doug Macklin over 5 years ago

I would use clearing if it were only images, but I'm going to embed a video and put some buttons below the image. The image kind of acts as a title for the modal.

If I add the "small" class, then the image modal shrinks to take up only 40% of the viewport. I want it to take up around 80 or 90% of the viewport UNLESS the screen is wider than the image width of 950px, at which point I want it to stay 950px wide and in the center.

Doug Macklin over 5 years ago

Figured out a solution, not sure why I didn't think of it earlier. I just put all of the content in the modal into another div with the following style:

.reveal-modal-inner {
    margin: 0 auto;
    position: relative;
    max-width: 950px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

Works perfectly, here is the updated fiddle: http://jsfiddle.net/23SgB/2/