X3Photo Gallery Forums

I join that request.

The website on the smartphone (Nokia Lumia 920) does not really look good.
Logo is too big and the menu button as well. (see attached screen). Logo gets covered by menu button.

Is there a chance to implement a function to resize the menu depending of the available space?

This would be a great improvement.

Thanks,

Stefan

MikeR wrote:1/I would like to choose the square and menu position (left or right) ? So it will be coherent with the desktop version (sidebar or sidebar right)

You mean you want the SLIDEMENU to appear on the LEFT? The slidemenu is ALWAYS on the right, because it is an indisputable fact that the vast majority hold the smartphone with their right hand, and therefore can access the menu with their thumb. If you move the menu to the left on mobile, a user will normally need to move their hand OVER the screen to reach the button.

Sorry, this is not an option. The offcanvas mobile menu is ALWAYS on right. The SIDEBAR menu you can set to LEFT or RIGHT, but I don't see any reason this needs to be coherent with the mobile menu ...

MikeR wrote:2/Reduce the width of the menu (when open), on a smartphone it takes almost all the screen even if the menu titles are short

I don't see the benefit of having options like this. Even downloaded apps with modern sidebar navigations like X3, use a partial amount of the screen. It has not technical benefit of making it smaller ... When the visitor open the menu, they want to focus on the menu, and its really easy to close again.

MikeR wrote:3/On tablet, it would be great to show the desktop menu instead the mobile menu IF the space available is OK (or if I choose it in the panel). I've made a test with just a link in the menu (contact) so there's enough space to show the desktop menu but the mobile menu is displayed instead.

I don't generally disagree, but unfortunately dropdown menus are unpractical to use for touchscreen devices. Therefore it would open a big can of worms to allow a HOVER-sensitive menu to display tablets. It's clumsy at best.

dark-rebel wrote:I join that request.

Not quite sure how this is related to the topic posted above. Thing is, you have added an image, and possibly also custom CSS for the logo. X3 uses RESPONSIVE layout, but we can't guess how big you are adding your logo or how big you want it. Therefore, if you have added your logo at such a width that it's too big for some mobile devices, and if you want to resize the logo DOWN on small devices, you would have to add some custom CSS. We can't just magically do "hey the user added a logo which is too big on Nokia Lumia so lets scale it down".

Let me know if you want some help to add responsive CSS to enforce your logo to be even SMALLER on small devices.

dark-rebel wrote:The website on the smartphone (Nokia Lumia 920) does not really look good.

Except for the logo you have added, I don't know how you can claim it doesn't look good ...

dark-rebel wrote:Logo is too big and the menu button as well. (see attached screen). Logo gets covered by menu button.

The logo is added at your size, and there are tips in the logo custom CSS help on how you can change it. The menu button is BIG because its supposed to easily fit a human THUMB without the visitor having to worry about touching anything else than the button. This is based on best practice.

dark-rebel wrote:Is there a chance to implement a function to resize the menu depending of the available space?

When you say "resize the menu", do you mean resize the menu-button? No. Regardless if a user is on a large ipad or an iphone, their thumb is still the same size, and menu should be obvious, and that is what they are used to. They would read your logo, but they don't care much about the logo after they saw it once. You can resize the logo, by adding more padding, or adding some responsive CSS.

mjau-mjau wrote:

dark-rebel wrote:I join that request.

Not quite sure how this is related to the topic posted above. Thing is, you have added an image, and possibly also custom CSS for the logo. X3 uses RESPONSIVE layout, but we can't guess how big you are adding your logo or how big you want it. Therefore, if you have added your logo at such a width that it's too big for some mobile devices, and if you want to resize the logo DOWN on small devices, you would have to add some custom CSS. We can't just magically do "hey the user added a logo which is too big on Nokia Lumia so lets scale it down".

Let me know if you want some help to add responsive CSS to enforce your logo to be even SMALLER on small devices.

dark-rebel wrote:The website on the smartphone (Nokia Lumia 920) does not really look good.

Except for the logo you have added, I don't know how you can claim it doesn't look good ...

dark-rebel wrote:Logo is too big and the menu button as well. (see attached screen). Logo gets covered by menu button.

The logo is added at your size, and there are tips in the logo custom CSS help on how you can change it. The menu button is BIG because its supposed to easily fit a human THUMB without the visitor having to worry about touching anything else than the button. This is based on best practice.

dark-rebel wrote:Is there a chance to implement a function to resize the menu depending of the available space?

When you say "resize the menu", do you mean resize the menu-button? No. Regardless if a user is on a large ipad or an iphone, their thumb is still the same size, and menu should be obvious, and that is what they are used to. They would read your logo, but they don't care much about the logo after they saw it once. You can resize the logo, by adding more padding, or adding some responsive CSS.

Well i just uploaded the logo file in the manage -> custom -> logo section .

The CSS code is still the same:

.logo {
font-size: 2em; /* logo-size (only affects TEXT-logo) */
padding: 1em 0; /* Adjust space above- and below logo */
margin-top: 0em; /* Adjust margin above logo */
}
.logo > img {
width: 300px; /* logo-size (only affects IMAGE-logo) */
}



What do i need to adjust to make it appear adjusted on mobile devices? I guess the 300 px is wrong, isn't it?

dark-rebel wrote:What do i need to adjust to make it appear adjusted on mobile devices? I guess the 300 px is wrong, isn't it?

Do you have a link to your website so I can see the exact scenario for a precise answer? The optimal css style-code depends slightly on the size and aspect of the logo, and is therefore not something we can assume by default.