- This topic has 5 replies, 2 voices, and was last updated 4 years, 10 months ago by
.
-
Posts
-
-
“Try to adjust size to inline/html content.” is selected and works for a majority of the inline content boxes but some of them are limited to a smaller size (the same dimensions). The content is identical but the inline content container is sizing differently.
-
Hi, it will be more helpful to see the issue live. Can you share a link to the web page where this can be seen? You can use the contact form if you prefer to keep it non-public.
-
Hi Saam, thank you for the email.
Looking at your site, I see you have to ways to go:
1. Either uncheck the option “Try to adjust size to inline/html content” and then set one standard size under Dimensions in the Window section. This works well if you know all your inline content is going to fit within the same box size.
2. Or, if you have inline content which needs different sizes, leave the option checked but then you need to define the preferred box size (at least a fixed width) on each inline content div.This last option gives you the flexibility to adapt your inline content boxes to various sizes.
I see for the first inline content div, you used
<div id="column1ID-2" class="hentry" style="width:460px;max-width:100%;">which is good. If you do the same for all others, then all will keep to that width and adapt height to what is needed depending on the content. -
-
What I see is that in the firs and last column, each content div has a width set in its style attribute. Fancybox can work with that. But in the center column, there are no width given to the divs. This means the inline content has no width and FancyBox does not know what to do. So it waits until the browser renders the content and then adapts to that.
Depending on what the browser decides to do with the content, the resulting light box varies in size. This usually depends on nested elements inside the div, like images, title, paragraphs and lists. In a list element, it’s each item line length that decides the width up until the maximum allowed space. The max is by default the size of the wrapping element, in this case the inline content div. But since that has no size set, it will make stretch to the size it thinks it needs, which makes it kind of unpredictable…
May I ask why you prefer not to give these light boxes a fixed width? On smaller screens, the light box will reduce its size to make it fit the screen. The height will adapt according to the content dynamically while the light box sizes are still more predictable.
-
-
- You must be logged in to reply to this topic.