Max-Width & Centered Inline Content

  • Resolved bestewar

    (@bestewar)


    7 years, 10 months ago

    I am trying to display inline-content in a Fancybox, centered, at 100% width/max-width 800px. I’ve (for the most part) achieved this by overriding the CSS with my own, but it’s still a bit buggy.

    If you’ll notice on my page: https://blmprinthouse.com/blm_revamp/about/ when you click a team thumbnail, the majority of the Fancyboxes display correctly centered, but here are the bugs: initially the boxes start on the left side of the screen and then jump to the middle. Also, randomly, some of the Fancyboxes stay left aligned. I can’t find a rhyme or reason to which boxes display centered and which don’t.

    Is there a setting that automatically could take care of this for me? How about the Pro version? Any help is appreciated, thanks!

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi,

    FancybBox was built so all sizing is handled by the script. Overriding this with style rules will mess with script calculations, making for the weird effects you describe.

    The max-width you are looking for, should be your inline content width. It will be a max width because on smaller screens, the script will reduce the window size to fit the screen including a border and margin for the close button and light box effect. Window border and margin sizes can be adjusted on Settings > Media.

    Best to remove all custom styles that affect frame size and do something like this where your max-width is 780px — in this example allowing for another 10px border at each side, making 800px total width:

    
<div id="chrisBio" style="width:780px">
<h3>Chris Brooks</h3>
...
</div>
    Thread Starter bestewar

    (@bestewar)

    Wow, that easy eh? I knew there had to be a simpler version than what I was doing! Thank you so much, works perfectly!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Max-Width & Centered Inline Content’ is closed to new replies.