Lightbox images are not displayed on mobile breakpoints

[stfm (Martin)]

---

Hello guys,

I have a problem with images inside light boxes: The images are not showing on the mobile breakpoints (767px and below). I did not do anything special with the light-boxes (as far as I can tell) - the problem arises in all of them no matter if the images are from CMS or not.

What I already did:
I already checked the properties of “all images”, as advised in a similar topic (Lightbox is not displaying image when selected on mobile breakpoints) regarding a identical problem, but as far as I can see, there are no values applied…

…So tbh I am blank, what could be the issue here.
Never had anything like this before in all of my projects…

I am very thankful for advice, what else could be the problem here
Many thanks in advance!

Here is my site Read-Only: LINK
→ There is a Lightbox at the the site “Forschung” in the lower section “Bedeutsamkeit der Ergebnisse” after the red video section

[ahmed_moeed (Webflow Developer)]

@stfm

Bedeutsamkeit der Ergebnisse

@stfm which page is the issue?

[stfm (Martin)]

@stfm

Forschung

For example on the page “Forschung” right after the red video section. Headline for the section is “Bedeutsamkeit der Ergebnisse”.

It seems, that as soon, as the viewport is smaller than the image-with, the image is not displayed anymore…

[AJ_Dev (from Memberstack)]

Hey @stfm ,

Hope this is resolved.

But for future purposes, this is happening because in the Style Guide page, you have set the Border styling of Figure element as follows:

Clicking on the ‘Borders’ and clicking ‘Reset’ should solve this issue on every page that you use Lightbox on for smaller breakpoints.

In case, you want to have the border for the figure if it is nested inside a Rich Text, you can select the ‘Nest selector inside of rich-text-blogpost’ option shown below the ‘All Figures’ selector tag in the styling tab and apply the border styling as you require, so that this gets applied only if it’s a figure element inside a rich text class of your choice and does not conflict with other native elements.

Hope this helps.

[stfm (Martin)]

Many thanks for alle the help!
@ahmed_moeed and @AJ_Dev - for providing a work around and identifying the underlying issue. Great community here.

To sum possible issues/solutions with the native Webflow Lightbox element for future readers having a similar problem:

Take care of the global classes the Lightbox uses:
It seems to rely on ”all images” and “all figures” - If you have margins and borders applied on the classes ”all images” and “all figures” remove them (You should never change the native/global classes. If you want to make changes use combo classes… did it by accident ).