More than full site image

[AlainR]

Hi.
We need to display the photos as wide as possible: www.thierry-images.ch/2026/galeries-de- ... id=1&pid=2
For this, I applied CSS to the pswp__zoom-wrap and pswp__zoom-wrap img classes.pswp__img
The problem is that when you drag to the next or previous photo, all the other photos are not centered.

Code: Select all

.pswp__zoom-wrap{transform:none !important}
.pswp__zoom-wrap img.pswp__img{margin:auto;position:relative;text-align:center;transform:translate(-50%,0) !important}

Then I apply other CSS rules and the opposite happens: the clicked photo is not centered but all the others are.

Code: Select all

.pswp__zoom-wrap img.pswp__img{left:50%;margin:auto;position:relative;text-align:center;transform:translate(-50%,0) !important}

Could someone who knows CSS help me please?

Joomla! 6.1.3
PG 6.1.3
PHP 8.3.33

[christine]

Hi,
Generally: it's not recommended to work with negative values.
As for the -50% etc., you’ll have to figure that out yourself.

I don't know what you want to comment out, because the comments are kind of jumbled.
Sometimes at the end, sometimes in the middle. Take a look at line 11, for example.

I would do it like this:

Code: Select all

/*.pg-item-box-title,
.pg-category-box-title {font-size:115%}

The end of */ is actually in the code that follows.
Also */ is missing on line 15.
OT: Please make sure your site has an SSL certificate.

Kind regards,
Christine

[AlainR]

Thank you for your response, I had not been notified.
The comment at lines 10 and 11 is because I had increased the size of the titles, but in the end we only wanted to increase the size of the photo's titles and not the categorie's titles.

For my question, it is mainly lines 13 and 14 that are important. The comment on line 13 was an attempt but ultimately inconclusive.
As for the negative value, it’s a trick found on another forum or website (I'll see if I refind the URL) and seems to work well to center the images. Nevertheless, I am interested in best practices if you have any.

OT: you're right but I have to see it with the provider because SSL certificate doesn't work
Thank you again.

[christine]

Hi,

If you want to comment something out, comment out the entire block—don’t just do it in the middle. That way, you’ll have a better overview.
Check those comments again on lines 15 and 16.
For example:
/* text */
or some code:
/*some codes */

Regarding the negative value:
If it works, then that's fine.
Just keep the mobile version in mind.

Categories (Description) Title = h3
Enlarge photo titles:

Code: Select all

.pg-item-box-info {
font-size: 115%;
}

Something else I noticed:
You have both “themes” activated.

That is: theme_standard.css and theme_simple.css.
Try temporarily deactivating one of them.Then you’ll see the differences.
You can choose whichever version you like best.(By deactivating one of them in the backend under “Themes”).
Either theme_standard.css or theme_simple.css.

https://imgur.com/a/5h2YGej

SSL certificate:
Activate it in the backend (configuration).

Kind regards,
Christine

[christine]

Hi,

Concerning centering:
Change line 14 to:

Code: Select all

.pswp__zoom-wrap img.pswp__img{margin: 0auto;position:relative;text-align:center;/*top:50%;*/ !important;}

and delete line 13
temporary it works.

Kind regards,
Christine

[AlainR]

Thank you so much!
The photos are indeed centered. Unfortunately, with this code, I lose the ability to enlarge the photo according to the screen size (on a 4k or 5k screen, the photos look very small).
The behavior is very strange: with the CSS code above, I manage to 1. extend the photo according to screen sizes, 2. center the photo horizontally and vertically. Except for the first clicked photo. Indeed, the first clicked photo appears shifted to the right. If you navigate from a photo and return to the first clicked photo, it is always offset to the right. As soon as you browse at least 2 other photos before returning to the first clicked photo, it is no longer off.
Do you know why?

Thank you again.
Best regards.

[christine]

Hi,

It works with my code. But you reset it again.
I don't have any other ideas right now.

So maybe: There's an icon in the top right corner:
Zoom in/out

Kind regards,
Christine

[AlainR]

It works with my code. But you reset it again.
I don't have any other ideas right now.

OK, I paste your code again but on very large screen (zoom out in your browser to see how it looks if you don't have a 4k screen - I don't have so I do as I described, but I was able to see how it looks at someone's computer). I cannot see the picture on the whole screen : http://www.thierry-images.ch/galeries-d ... id=1&pid=2

I don't quite understand why "!important" is after the semicolon and how works "margin: 0auto;"

[AlainR]

So maybe: There's an icon in the top right corner:
Zoom in/out

Yes, I see that. But I also see that this icon only appears if large picture is bigger than the screen.

[christine]

I don't quite understand why "!important" is after the semicolon and how works "margin: 0auto;"

I just copied the !important from your code. You can leave it out. I didn't check if this might already exist:

This rule will override ALL previous styling rules for that specific property on that element!
https://www.w3schools.com/css/css_important.asp

margin: 0 auto;
centers a block element horizontally within its parent container

Kind regards,
Christine