Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
JMM
Experienced
Topic Author
Posts: 154
Joined: 02 Aug 2021, 11:18

Can I increase width in popups from current (640?) to something slightly larger (like 720)?

03 Sep 2022, 22:50

Hello, Karl.

I have implemented & am happily using your custom CSS solution (Description in popup) to increase the height of my popups on one of my sites:
Code
.popup-caption-description {
  display: block !important;
}
As you can see in THIS example, I manually insert breaks <br> in the descriptions, so as to truncate lines in a tidy fashion.  I acknowledge & understand your comment about the height possibly causing issues when the descriptions are viewed on mobile devices, but they seem to look fine on desktop monitors & iPads.  On my mobile phone, however, in standard portrait mode the popups look terrible  :thinking:, but in landscape (sideways) mode not too bad.  But I can live with that issue, as I probably get at most maybe a dozen visitors a year  :sunglasses:, and I would assume that most of them are visiting using a desktop.

As for the titles (which is the purpose of this post), I am already using <small>Title</small> to make them display in smaller font size, but although I have reduced the number of characters in the titles as best as possible, some of the titles are still wrapping.

Is there some custom CSS code that I can use, to slightly increase the width of the information displayed in the popups?

In searching these forums, I found a post from 2 years ago where someone was inquiring about this same thing, and you had mentioned at that time that you were about to come out with a new version of X3 whereby the width would be increase from 480 to 640.  Assuming that the width these days (X3.31.1) is still 640, I would be interested in trying to increase it to something like 720.  I would still keep most (if not all) of the descriptions at their current lengths (by utilizing <br> as required), I would just like the titles to not wrap.

Is this doable?

Thanks in advance  have a great weekend.

John
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   GalleryWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com/galleries   |
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Can I increase width in popups from current (640?) to something slightly larger (like 720)?

04 Sep 2022, 00:15

JMM wrote:I have implemented & am happily using your custom CSS solution (Description in popup) to increase the height of my popups on one of my sites:
Code
.popup-caption-description {
  display: block !important;
}
Just for your information, with the above, you are simply removing the "clamp" function which restricts captions to a certain amount of lines, so that it doesn't entirely obstruct the image. You might want to check this on small screens (mobile devices)
JMM wrote:As you can see in THIS example, I manually insert breaks <br> in the descriptions, so as to truncate lines in a tidy fashion.
In my opinion, your approach is not optimal. Line-breaks don't make text easier to read, unless it's a new text section, in which case <p> paragraphs should be used (or double line-break as workaround). Also, your centered text is not helping:

Hard to read:
Image

Easy to read, and it's less tall and less likely to cause complications on small screens.
Image
JMM wrote:As for the titles (which is the purpose of this post), I am already using <small>Title</small> to make them display in smaller font size, but although I have reduced the number of characters in the titles as best as possible, some of the titles are still wrapping.
For me, it doesn't seem useful to resolve this by making the area wider and font smaller. The optimal amount of characters per line is 45-80 (like a book) and you are exceeding that already, without making it wider. Perhaps more importantly, what happens when you add a new image where the title breaks onto a new line? I don't have a problem reading lines that break, even if it's inconveniently by a single word.

Anyway, just some thoughts, but you the boss of your own website!
JMM wrote:Is there some custom CSS code that I can use, to slightly increase the width of the information displayed in the popups?
Try this in Settings > Custom > Custom CSS:
Code
.pswp__caption__center {
  max-width: 720px;
}