Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
ulfklose
Experienced
Topic Author
Posts: 48
Joined: 10 Dec 2019, 09:10

Logo is very big on smartphones (iPhone X) when selecting "Use as Intro" for the slideshow

27 Dec 2019, 09:00

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.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Logo is very big on smartphones (iPhone X) when selecting "Use as Intro" for the slideshow

27 Dec 2019, 09:56

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:
Code
@media screen and (max-width: 1024px) {
  .logo {
    display: none;
  }
}
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:
Code
@media screen and (max-width: 1024px) {
  .logo > img {
    max-width: 120px;
  }
}
You could also add "opacity: .5", but I personally think this will look unprofessional.
 
User avatar
ulfklose
Experienced
Topic Author
Posts: 48
Joined: 10 Dec 2019, 09:10

Re: Logo is very big on smartphones (iPhone X) when selecting "Use as Intro" for the slideshow

27 Dec 2019, 10:54

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.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Logo is very big on smartphones (iPhone X) when selecting "Use as Intro" for the slideshow

27 Dec 2019, 19:48

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:
Code
@media screen and (max-width: 1024px) {
  .logo-wrapper {
    text-align: left;
  }
  .logo > img {
    max-width: 120px;
    margin: 0 0 0 20px;
  }
}
 
User avatar
ulfklose
Experienced
Topic Author
Posts: 48
Joined: 10 Dec 2019, 09:10

Re: Logo is very big on smartphones (iPhone X) when selecting "Use as Intro" for the slideshow

30 Dec 2019, 09:09

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