Menu icon Foundation
How to Align Contents of F5 Reveal Modal

I am confident that the answer to this is painfully obvious, but here goes. Love the modal. Works perfect. Looks great... until I viewed on a 27 in iMac set to full screen. My modal is set to medium, yet my image that is contained in the modal is only 960px wide. The result: The image and a headline are left aligned in this really wide modal.

I can live with the wide modal in this particular scenario, but if the contents were centered, it might look better.

How should I solve this, short of inserting a really huge image that would reduce to fit the space.

Can I wrap my reveal modal div within a row and column that has a centered column.? I don't want center-align text, but rather the entire group to be centered within the modal when viewed on a really large full screen.

Any suggestions very much appreciated.

Foundation 5Contentsalignmentrevealmodal

I am confident that the answer to this is painfully obvious, but here goes. Love the modal. Works perfect. Looks great... until I viewed on a 27 in iMac set to full screen. My modal is set to medium, yet my image that is contained in the modal is only 960px wide. The result: The image and a headline are left aligned in this really wide modal.

I can live with the wide modal in this particular scenario, but if the contents were centered, it might look better.

How should I solve this, short of inserting a really huge image that would reduce to fit the space.

Can I wrap my reveal modal div within a row and column that has a centered column.? I don't want center-align text, but rather the entire group to be centered within the modal when viewed on a really large full screen.

Any suggestions very much appreciated.

Rafi Benkual over 5 years ago

Can you post the code you're working with? Would be helpful to drop it in a codepen http://codepen.io/mhayes/pen/qdCAc

Marc McGee over 5 years ago

Wow. Thanks for responding. And, apologies for not tuning back in. I got swept away with other projects.

Below is my code. When viewed full screen on iMac 27 inch, the modal gets wider and then the dive containing the content gets left-aligned.

Actually, I think I know the answer. The content is a floor plan jpeg. I just need to add a class to center, or insert a larger image. Basically my image is not as wide as the modal on full screen, so that explains the left align.

I'm having the toughest time getting used to working with image files in a responsive environment.

Foundation 5 is absolutely the coolest though!

Thank you again for jumping in to help, and please forgive my tardiness.

<div class="row">
<div class="large-12 columns text-center space-below doubleborders">
<a href="#" class="button small secondary" data-reveal-id="FullFloorplanModal" data-reveal>View Relative to Property Map.</a>
</div>
</div>

<!--REVEAL MODAL BEGINS-->
<div id="FullFloorplanModal" class="reveal-modal medium" data-reveal>
  <h2>Location of: [[*longtitle]]</h2>
  [[*floorplanRoomRelative]]
  <a class="close-reveal-modal">&#215;</a>
</div>
<!--REVEAL MODAL ENDS-->

Darrell MacLennan over 5 years ago

You have your main row, with the large-x divs dividing sections, then align those with text-center, or left or right.

i.e. Headling, class="text-left"
Image, class="text-center"
Text, class="text-left

with each of those in their own DIV

To use a wider image, or smaller one for faster loading times, you use data-interchange, so you will load a larger image for larger screens, and a smaller image for smaller screens.

Foundation has named queries in the template so you just reference those: http://foundation.zurb.com/docs/components/interchange.html

Marc McGee over 5 years ago

Wow! You are the hero of the day! Thanks for the help Darrell, and link to interchange.

I've really been struggling with this responsive image thing. My pea brain still wants to create a unique image class with display block and margin 0 auto to get an item to center.

Marc McGee over 5 years ago

If I may pester with one more silly question relating to the concept of center aligning images with F5:

Things like a company logo would always jump to left align on iPhone, which didn't look so good, so, as mentioned, I have been using display: block; and margin: 0 auto; and it seems to work.

Should I be wrapping those images in divs and using a rule of text-align: center: instead?

Is the whole display block 0 auto just old school at this point as far as F5 is concerned.