Photo Gallery Forums

Is there anything I can do to reduce the size or even better remove the logo for that media query set? Another way would to set an opacity for the logo. Would that be a valid option?

My site is www.ulfklose.wedding.

X3 can't anticipate the shape and form of your logo, but there are many ways you could style the logo on mobile devices using media query CSS. In the example below, the logo is hidden on "mobile" devices (all screens < 1024 px, which is the "breakpoint" where the mobile menu displays). Add to Settings > Custom > Custom CSS: You could also make the logo smaller on mobile devices, either based on a percentage of the screen width, or a set max pixel width. This would require some testing on your side. For example: You could also add "opacity: .5", but I personally think this will look unprofessional.

That looks much better, thank you.

What would be a good query to position the logo on the upper left of the viewport? I guess this would look better because it kind of acts as counterpart for the sandwich icon.

ulfklose wrote:What would be a good query to position the logo on the upper left of the viewport?

You could assign left-align to the element that contains the logo. Likely you would need to include some margins. For example:

That worked just fine for me, thank you very much.