Photo Gallery Forums

Posted: **23 Jun 2015, 11:40**

Hy,

I would like to reduce the size of my logo if the gallery is seen from a mobile for example with smaller width.
I tried to add some custom CSS but it is not working, i wonder why ?

i added this

@media only screen and (max-device-width:480px) {
  body[class*='topbar'].topbar-float .nav>div>.logo {
    width: 160px;
  }
}

Normally, i was thinking it should do the trick resizing my logo from 320px to 160 if the screen is small, but it does not. I also tried something simpler like :

@media (max-device-width:480px) {
  body[class*='topbar'].topbar-float .nav>div>.logo {
    width: 160px;
  }
}

But still nothing.

Here is my logo config in the panel:

 logo: style-icon m pad1 w320

It seems that the w320 property from the panel config is applied after this CSS.

Could you help me ?

Thanks in advance.

Posted: **24 Jun 2015, 07:28**

Sorry, but do you have a link to your gallery? It is much easier for me to provide help if I can diagnose in real-time ...

Posted: **24 Jun 2015, 09:26**

You can check it here: www.insightspirit.com, of course check it on a real mobile phone !

Posted: **24 Jun 2015, 16:58**

I am not 100% sure, but please can you try max-width instead of max-device-width?
http://stackoverflow.com/questions/6747 ... mobile-web

Also, add ; after each declaration. For example:

body[class*='topbar'].topbar-float .menu {
  bottom:0;top:auto;
  transform:translateY(0)
};

I think changing to max-width will fix it, but let me know after you changed it.

Posted: **25 Jun 2015, 02:27**

Nice try

, but i already tried those configurations u mentionned, nothing works.

@media (max-width:480px) {
  body[class*='topbar'].topbar-float .nav>div>.logo {
    max-width: 160px;
  };
};

nor

@media (max-device-width:480px) {
  body[class*='topbar'].topbar-float .nav>div>.logo {
    max-width: 160px;
  };
};

nor

@media (max-device-width:480px) {
  body[class*='topbar'].topbar-float .nav>div>.logo {
    width: 160px;
  };
};

nor

@media (max-width:480px) {
  body[class*='topbar'].topbar-float .nav>div>.logo {
    width: 160px;
  };
};

I added the ";" after the declaration which by the way should not be required, but it changed nothing.

Posted: **25 Jun 2015, 02:44**

But it has to be a CSS interpreation problem as i mentioned before, because no matter what i write nothing happens, so the custom CSS seems not to be interpreted last, at least in some cases ?

For example:

body[class*='topbar'].topbar-float .nav>div>.logo {
  border: 5px solid red;
}

or even

.nav>div>a {
  border: 5px solid red;
}

or even

.nav .logo {
 border: 5px solid red;
}

or even targetting directly the image

img[src*="logo"] {
 border: 5px solid red;
}

Nothing happens so, i don't know how X3 is designed but it seems the CSS is not read at the proper time.

Thanks for your help.

Posted: **25 Jun 2015, 05:59**

I'm not quite sure what's happening on your side, but here is works perfectly:

@media (max-width:480px) {
  body[class*='topbar'].topbar-float .nav>div>.logo {
    border: 5px solid red;
  };
};

Indeed it seems there is something else going on in your case. It does not matter when the CSS is declared, as you can add html content to the DOM after it is declared, and it will always inherit any CSS. CSS can also be out-ranked by other CSS, but in your case this does not seem to be the case ... It doesn't seem to be applying at all. If you can offer login to your admin panel, I will take a look.

Posted: **25 Jun 2015, 13:24**

Ok but how do you create multiple users for panel ? I tried to add multiple "USERNAME" in the config.php but it seems u can only define one

Posted: **25 Jun 2015, 18:38**

Eightkill wrote:Ok but how do you create multiple users for panel ? I tried to add multiple "USERNAME" in the config.php but it seems u can only define one

Unless you use the DB-version (which is basically for multi-user admin), then there is only one user. You would have to give me your username/pass to the panel, and change it again after we looked into the issue.

Posted: **26 Jun 2015, 02:47**

I reversed the problem to find a solution.

In fact it seems that the CSS at least with the @media is not taken into account on "chrome" and "boatbrowser" mobile explorers at least.
To get to this conclusion i just reversed the problem and fixed the logo to a "w160" property instead of a "w320" and modified my custom CSS, to do an action if the size of the screen matches a larger screen (instead of matching a small screen for mobile)

I did:

 logo: style-icon m pad1 w160

Instead of:

 logo: style-icon m pad1 w320

For my logo settings

And I did:

@media screen and (min-width: 100px) {
  body[class*='topbar'].topbar-float .nav>div>.logo {
    min-width: 320px;
    /*border: 5px solid red;*/
  }
}

For my custom CSS, instead of :

@media screen and (max-width: 480px) {
  body[class*='topbar'].topbar-float .nav>div>.logo {
    max-width: 320px;
    /*border: 5px solid red;*/
  }
}

So i don't get why the @media seems to work and override the properties (w160 set on the X3 settings) on a "computer browser" and not to work on those explorers i mentionned on mobile ?

Posted: **26 Jun 2015, 06:41**

Before anything else, I would like to note that you don't need to use such a complex selector class as we are using in the default X3:

body[class*='topbar'].topbar-float .nav>div>.logo

The reason we have it like this for some styles, is because of the various layouts X3 offers, we only want some styles to affects some layouts. In your case, once you have selected a layout, you could just use something like:

.nav>div>.logo

It is possible you may need to add a !important tag after the style declaration, just to make sure it outranks any defaults. The complex selector would be the only reason why a declaration would fail in some browser, although I never heard or experienced that before.

The adapted code you have, suggests that you want all devices over 100px width (which are actually ALL devices), to have a logo of width of minimum 320px or more ... That would only work if for some reason the declaration did not work in some browser. Also, the logo should have a "max-width" not a "min-width", because it will always try to expand. Your logic however is on track, and you are employing a technique called "mobile first responsive design", where the default CSS is for small devices, and media queries are instead added for modification on large devices.

Therefore, I don't understand why you have (min-width: 100px). You should add w160 (as you have done), or the class you find best suited for mobile, and then add a media query for large devices, for example from iPad and up. I would do something like this:

@media screen and (min-width: 760px) {
  .nav>div>.logo {
    max-width: 320px !important;
  }
}

For the above, the w160 class would set the logo to have max-width: 160px by default, but on large screens (ipad up), the logo will be able to stretch to max-width: 320px.

Photo Gallery Forums

Responsive design for Logo on mobile

Responsive design for Logo on mobile

Re: Responsive design for Logo on mobile

Re: Responsive design for Logo on mobile

Re: Responsive design for Logo on mobile

Re: Responsive design for Logo on mobile

Re: Responsive design for Logo on mobile

Re: Responsive design for Logo on mobile

Re: Responsive design for Logo on mobile

Re: Responsive design for Logo on mobile

Re: Responsive design for Logo on mobile

Re: Responsive design for Logo on mobile