Photo Gallery Forums

Hi, 
I have a question....well a few of them, but I decided to break them into multiple posts so it is easier to navigate, or in case somebody else is looking for the same question. 

I just re-did my portfolio (Pulver Foton) and decided to use columns/ or justified settings for it, but as I was experimenting with what looks best, I started to experiment with the width of the gallery. 
What I found out is that in "wide" or "default" settings, where the gallery goes up to the sides of the screen, it feels too wide, especially on bigger screens.  Meanwhile, when I use the "narrow" setting, it already feels clumped too much in the middle.  Is there any way to get something between? Where I would have clear spice on both sides, but without it being too clumped into the middle.  Best regards, 
Otakar

In your screenshot, you don't seem to have tried all settings. Also, I can't possibly know exactly what screen dimensions you are viewing from. WIDE means the gallery goes from edge-to-edge, regardless of screen size. DEFAULT means the width is limited to 1140 px, but I can't see that from any of your screenshots. Below is a link with width set to DEFAULT:
https://demo.photo.gallery/examples/gallery/grid/

Then there is narrow, narrower and narrowest, but these are normally too narrow for typical gallery layouts. They are suitable for some like vertical split (narrow) and vertical (narrower).

The DEFAULT layout definitely does not go to the sides of screen, unless you are on a small screen, but in the screenshots it looks like a large screen.

What I found out is that in "wide" or "default" settings, where the gallery goes up to the sides of the screen, it feels too wide, especially on bigger screens.

This is subjective of course, and one of the reasons there are 5 different width settings. Many users with large screens would enjoy a gallery taking advantage of all the available space, just like most photo apps. Others perhaps not.

OH.... so that sounds like a problem already because...: 

Screenshots were taken on my larger screen (and settings were added to the screenshots in the post), which has a resolution of 2560x1440. On "default", it appears the same as on my second screen, which has a resolution of 1920. 
 If it should be limited to 1440, it means there should be black space on both monitors, only with a different size, and there is none. 

I did not try more settings, since narrow is already too narow, which ment I needed somethin bigger, not smaller and thus I tried only first three. 

 

Osek64 wrote:If it should be limited to 1440, it means there should be black space on both monitors, only with a different size, and there is none. 

If you are having problems with the DEFAULT layout, please include a link or send me a PM.

As noted, the DEFAULT layout will limit the width to 1140 px, as you can see in the link below:
https://demo.photo.gallery/examples/gallery/grid/

So, just to be sure I checked on multiple webbrowsers (google, Mozzila)  and on all of them the sites looks  the same. 
on the  default setting the gallery goes from side to side no matter the size and setting of the screen. 

www.Pulver Foton.cz

Osek64 wrote: https://pulverfoton.cz/

This is not "default" though, it's "wide" gallery layout. Also checked in your settings for the index page, it's set to {"width":"wide"}. Go to your INDEX page > settings > gallery > width, and you will see it's set to "wide".

It is not...it is set to "default", but it displays like "wide"... which is the problem I am having. 
I checked many times, and these are my settings for the Index page...unless there are any other settings that could override "gallery width" settings. 

Osek64 wrote: It is not...it is set to "default", but it displays like "wide"... which is the problem I am having. 

Can you please check in main Settings > Page > Gallery > Default Gallery Width?



Your page gallery width is definitely being assigned to "wide", I can see that from the classes being applied. If this is also set to "default", please could you send me panel login in PM so I can check?

there it is... soo.. Ithink I'll PM you my panel login ? 

Osek64 wrote: soo.. I think I'll PM you my panel login ? 

Please do!

Hi. Thanks for the login. After some research, I found out it was caused by main Settings > Page > Default Layout Width set to "wide". This can definitely be confusing with multiple references to "default", and I even struggled to locate the issue myself, but the idea is for this setting to assign the "default" width for all page modules (including gallery), which will then be inherited upon the "default" value. It should probably remain on "default" however, and then you should adjust other options if necessary.

I have now reverted setting to "default", and your index page gallery now displays within a limited "default" width.

This was the panel setting:

oh, I get it.
Thanks a lot, wouldn't think about it at all. :sweat_smile: you're amazing. 



Going back to my original question. 
Is it possible to change that setting through CSS, or something like that? 
I am talking more about changing it for visual effect. 
Let's say I would want to tell it to always be 80% of the screen width. 
Or maybe to tell it to be  stuck at 1600px (counting on most monitors being at least 1920)

something similar to this (custom made) page that belongs to a friend of mine.  where the black surrounds the galery and is giving it nice visual "trim" 
 

Osek64 wrote:something similar to this (custom made) page that belongs to a friend of mine.  where the black surrounds the galery and is giving it nice visual "trim" 
 stepan.jpg

What is the link to that page? I found the website, but hard to find the gallery in the screenshot. I can't see from a screenshot if it's limited by fixed width, percentage or margin. Or how it scales on smaller and larger screens.

Osek64 wrote: Is it possible to change that setting through CSS, or something like that? 

Yes it should be possible, although we need a clear concept, and you need to take into consideration all screen sizes including mobile devices. For anything from tablet and down for example, you certainly don't want any wasted space, and the gallery should take full width.

Osek64 wrote:Or maybe to tell it to be  stuck at 1600px (counting on most monitors being at least 1920)

I'm not sure that is accurate. I'm using Mac laptop, 2880 x 1864 but effectively it's 1440 pixels. Even 4K screens are normally CSS dimensions 1920, so that would be the very maximum. Most users will be on mobile, tablets, and then probably more on laptop than large screens.

So yes you could do something like this, but then you would set "max-width: 1600px", in which case it would be full width for all screens below 1600 px (and we are speaking CSS resolution, not actual pixel-resolution). This will only affect a minority of users who sit on desktops with large screens.

Osek64 wrote:Let's say I would want to tell it to always be 80% of the screen width.

Also possible, but you would only set that value for screens above a certain value. On tablet size screens and down, you should want to use the full width of small screens. Perhaps even on typical laptop screens.

From my understanding, you are looking for a WIDER layout than the DEFAULT layout, most specifically on large screens? I would consider then overriding the "WIDE" layout, perhaps changing it to 80%, but only for screens that are larger than a certain width (perhaps >=1280).

What is the link to that page? I found the website, but hard to find the gallery in the screenshot. I can't see from a screenshot if it's limited by fixed width, percentage or margin. Or how it scales on smaller and larger screens.

this is the link :  https://blackart.cz/
It should be his home page.

From my understanding, you are looking for a WIDER layout than the DEFAULT layout, most specifically on large screens? I would consider then overriding the "WIDE" layout, perhaps changing it to 80%, but only for screens that are larger than a certain width (perhaps >=1280).

yep, that's excatly what I am looking for. 

Osek64 wrote:yep, that's excatly what I am looking for. 

I think you could try something as simple as this in Settings > Custom > Custom CSS:
The above would limit the layout to 80% width on screens from 1280 px and up (which seems reasonable). You could adjust both values of course. Keep in mind, this would now apply to ALL layouts which are assigned to "wide" (which is not default).

Osek64 wrote:this is the link :  https://blackart.cz/
It should be his home page.

That website uses the same technique, but width set to 95%. If setting a higher value like 95%, you could perhaps use it on smaller screens also, but I would keep it side-to-side on mobile-tablet screens.