Gallery IMG modal bigger?


Is it possible to make Bloc’s galleries’s images bigger once clicked (800px max-width) on @media (min-width:992px) ?

I tried this even with “!important” with no result (btw I apprehended confusion/repercutions with modals…).

@media (min-width:992px)
.modal-lg, .modal-xl {
--bs-modal-width: 1200px;

If there is a trick or if i omitted something… thanks.

There are a few errors in your CSS snippet. That’s why it’s not working.

1 Like

That and you’re basically going to effect other modals you may want to use by doing it that way. That is once you resolve the CSS errors. :smiley:

:flushed: I modified nothing, the gallery is from scratch and I copy-pasted the source code, just changed ‘800px’ to ‘1200px’…
Ok I’ll search, then in this extent with snippet if I understand well, thank you.

Yes it is what I thought (.modal-lg, .modal-xl), but surpinsingly I find absolutely nothing else associated to the size with the inspector (reason why I come to you).
And what is this css you and Jerry are talking about, there is no css in the screenshot (and the snippet is copy/paste fromn inspector) ? :exploding_head:
As by deleting “dichotomically” all my css in Code editor, it changes nothing (then no interference with my css for sure). :thinking: :melting_face: :grin:

Or I may add a customed .css ?, butt adding a .css on each image… :woozy_face:

When I copy/paste it works for me.

You don’t need a custom class.

Ok following your screen (thanks) I jut created an empty project from scratch and ideed it is ok as you, it then has to do with my project file.
But again, when moving away all customised css fron code editor, it changes nothing (image sizes verified and deep refresh off course). :flushed:
Gonna look in wysiwyg styling, all that’s left is this… The great mystery of my day :grin:
Thank you

  • Code editor empty, nope
  • All class deleted (+Core reset), nope

This is amazing. It also can’t be by me, absolutely all sizes I define are systematically on another ratio (800px defined by me, impossible).
It also is a very basic project file with very basic and few styling. :exploding_head:

last hope before I have to re-do everything :hourglass: :melting_face:, if someone has an idea/thing to test I’m taker. :pray:

Modal’s CLOSE X button doesn’t works also, project file seems to be bugged…

…No doubt it has to do with

No idea how/where/when it is defined on 800px. :exploding_head: :melting_face:

Indeed. There are errors in your CSS.

“My css” How can it be ?! All styling away and still 800px. As impossible I’ve added “800px” value.

It must be associated to blocs internly (bug ? in memory ? Responsive value that… blocs^^ …)

Btw gonna re-do all (hopefully we can save Blcos), it’ll be quicker than to find to resolve… :upside_down_face: :melting_face:

If an idea, curious…

You need to format the css correctly for the media query.

I was trying to do the same thing recently and found a similar topic where the OP was advised to install Bootstrap’s JavaScript modal plugin, but that looks like it could get a bit involved if this is all you want to do. There is also a Modal Designer bric from Whitfield, but I’m not sure if it would help in this case.

I’m no expert, but I think I can see what you are trying to do (I think it’s the same thing I was looking for). You could try changing the “800px” to a percentage, I just tried with 90% and it worked fine for me.

As far as I can see, you only need to make the change to one place within the bootstrap.css file, this is what I tried;

@media (min-width: 992px) {
  .modal-xl {
    --bs-modal-width: 90%;

I don’t know of a way to do this within Blocs itself (maybe there is one), but you can modify the bootstrap.css file manually after the build, the only problem is you’ll need to remember to edit the file after every build, unless anyone knows a better way, which I would also be interested to learn. It also helps not to minify the bootstrap.css file if you have to edit it.

It would be useful to have a setting for the Lightbox size in the gallery.

Interested to hear of other’s thoughts if this is a feasible workaround, I couldn’t find any reference to using percentages for the modal width in any of the docs that I came across, but it does appear to work! A simple, but inconvenient fix. I guess the ultimate answer would be to buy the Iconic Gallery at 49€.

The difference is you correctly applied the CSS markup, which Eric was told he needed to fix to solve his problem :grin: (well almost, you are missing a closing } )

? Modals are part of Bootstrap, how old was that post ?