• Registered: 2012-12-18
  • Posts: 15

Topic: css styles for mobile?

Hi,

Is there a way to style the caption for the IPhone only?
I can style it for the desktop but for the mobile the default caption css is showing up. The styles I applied for the desktop are not working on the IPhone.

I have this css added to my stylesheet:

.jb-caption .jb-caption-title {
    cursor: default;
    color:#898986;
    font-size: 11px !important;
}
.jb-cap-frame .jb-caption {
    text-shadow: none !important;
    padding: 0px !important;
    margin-top: 15px;
    max-height: 52px !important;
}
.jb-caption p {
    cursor: default;
    color: #898986;
    font-size: 11px !important;
    line-height: 14px !important;
    margin-bottom: 0 !important;
    margin-left: 0;
    margin-top:0 !important;
    margin-right: 72px;
}

Works fine on desktop but NOT on mobile when I tab into the splashscreen to go to the large screen mode.

And if it is not possible to style the caption on the IPhone, maybe it is possible to select another configuration option for the mobile?

I have set for the desktop:
captionPosition: "BELOW_IMAGE"

But would like to set for the mobile:
captionPosition: "OVERLAY_IMAGE"

Thanks in advance,
Mirjam

  • Registered: 2012-04-24
  • Posts: 5,924

Re: css styles for mobile?

Is there a way to style the caption for the IPhone only?

As far as I am aware, it is not possible to style captions differently in Large Screen Mode and in Small Screen Mode as both screen modes use the same CSS classes for titles and captions.

I can style it for the desktop but for the mobile the default caption css is showing up. The styles I applied for the desktop are not working on the IPhone.

If you style your captions using the CSS classes in the code you posted, the styling should be the same in both Large Screen Mode and Small Screen Mode. If it differs on your iPhone, then try clearing your browser's cache before reloading your gallery to ensure that your browser is not hanging onto and using older versions of your gallery files.

And if it is not possible to style the caption on the IPhone, maybe it is possible to select another configuration option for the mobile?

This is also not possible. Each gallery uses only a single instance of each configuration option and its value is used in both Large Screen Mode and Small Screen Mode.

  • Registered: 2012-12-18
  • Posts: 15

Re: css styles for mobile?

Hi Steven,

I cleared the IPhone browser chache and yes I usd the CSS code above in my style.css Wordpress stylesheet.
But it uses the default CSS for the large screen mode on the mobile.

Screenshot IPhone Large Screen Mode

Any idea what is wrong?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: css styles for mobile?

Try including the CSS in the gallery's own 'jbcore/classic/theme.css' file (rather than the WordPress 'style.css' file) and double-check that you iPhone browser's cache has been completely cleared.
I tried your CSS in a test gallery and viewed it on an iPod Touch and the CSS was clearly being used in the gallery (in Small Screen Mode in Mobile Safari).
If you continue to experience difficulties, please post the URL to your gallery so that I can take a look.