#114694 Vertical centering of the titles of a gallery module

Landing Forums Jupiter WordPress Theme Vertical centering of the titles of a gallery module

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • Tom Kellersohn

    Hello artbees,

    on a customer site we use the Gallery module in combination with a title.

    Unfortunately we noticed that the titles are placed differently in different browsers. While in the Chrome browser everything seems to work and the title is centered, in Firefox and Safari we have the problem that the title sticks to the top edge of the image.

    For this reason, I can’t make any manual adjustments here either. If I set the element to “margin-top: 20%”, it may look fine/centered in Firefox and Safari. But since the display in the Chrome browser already looked decent before, the title then slides 20% further down anyway, which is why it is no longer centered.

    So we need a solution that the title is centered in all browsers without me having to manually adjust every single element. Could you maybe help me with this?

    I have created access data to the website for you. You can find them below. Please let me know if you need additional FTP data.

    Thanks a lot & best regards,
    Manuel

    Amir Rather Support Team

    Hey There

    I checked on Latest Safari and Firefox both on my Windows 10 and macOS devices but the Titles were centered correctly.

    Could you please mention the Device/Browser version/OS of the device you see the issue on?

    Waiting for the response šŸ™‚

    Tom Kellersohn

    Hello Amir,

    thank you very much for your answer. I am using the following browsers/operating systems with the following versions:

    • Firefox
      Version 87.0 (64-Bit)
    • Safari
      Version 14.0.3 (16610.4.3.1.7)
    • macOS
      Big Sur with verison 11.2.3

    The “problem” is that this incorrect display is partially not reproducible. Sometimes it is displayed correctly, but when I click on a few other pages, the title is displayed incorrectly again.

    Maybe you try this also once?

    Regaards,
    ManušŸ™‚

    Amir Rather Support Team

    Hi There

    Strangely, I checked on the same Browser OS and Device but couldn’t replicate the issue even after reloading multiple times https://take.ms/nUicz

    Regards

    Tom Kellersohn

    That is very strange. Even if you can’t reproduce the problem, do you have a possible solution for us?

    Tom Kellersohn

    You can also try to reproduce the problem on other pages. The error does not only exist on https://www.bellmer.com/separation-technology/.

    These hover boxes are on almost all pages.

    Mohsin Al-Rabieai Support Team

    Hi Tom,

    My apologies for the delay. I switched the jQuery Migrate Helper version to Legacy 1.12.4-wp in the plugin settings, no I can not replicate the issue anymore. However, I need your confirmation too. By default, you shouldn’t need the jQuery Migrate Helper plugin anymore except for the Header Builder in the admin area, but you are using lots of plugins that may probably need it. Please clear your cache on every browser and try multiple times to see if you can replicate the issue anymore or not. Thanks.

    Bests

    Tom Kellersohn

    Hello Mohsin,

    thank you very much for your answer!

    At first everything looked fine, but I still have the error on the page https://www.bellmer.com/about-us/, but only on this page (see attachment).

    Kind regards!

    Mohsin Al-Rabieai Support Team

    Hi Tom,

    Is that possible for you temporarily remove the JS snippets you added as custom code and then check again in private browsing?

    The margin from the top will be calculated with JS and I can see some JS errors on the console that might be related.

    Bests

    Tom Kellersohn

    Hello Mohsin,

    Thank you for your answer.

    Unfortunately, it doesn’t seem to be due to the JS snippet. However, for whatever reason, the display now looks OK. Have you adjusted anything?

    Only on the page https://www.bellmer.com/about-us/ the display does not yet fit. I have already checked whether a separate CSS code was entered on this page – this was not the case.

    Could you please look at this again? It really only affects this one page, the rest is fine now.

    Thank you very much & best regards!

    Mohsin Al-Rabieai Support Team

    Hi Tom,

    Would you please check it now? I deactivated the autoplay on the youtube video and it appears to resolve the issue. In case you found it happening again, kindly try removing the youtube video and check again. Since it sometimes happens and sometimes not, I can’t make sure if this autoplay option is the problem. Thanks in advance.

    Bests

    Tom Kellersohn

    Hello Mohsin,

    Thank you very much for your answer.

    It seems to work now on the English page “About us”. So I deactivated the “Autoplay” option for all other language variants as well and now everything looks clean.

    Kind regards & many thanks!

    Mohsin Al-Rabieai Support Team

    Glad to hear that it worked šŸ™‚

    Alexander Hutsol Support Team

    Hello,

    You are welcome.

    Feel free to create a new topic if you have any other questions.

     

    Regards.

    Tom Kellersohn

    Hello all,

    unfortunately I have to open this ticket again. The titles are unfortunately not vertically centred again.

    For example, it is about the following page:
    https://www.bellmer.com/separation-technology/ (Firefox)

    As soon as I hover over an image with the mouse, the text sticks to the top of the image instead of being displayed centred. Many more pages were affected at the customer’s, but I cannot reproduce this.

    Is there no way to ALWAYS display the text vertically and horizontally centred? Somehow with a “flexbox” with “justify-content:centre;”, or something? I wouldn’t like to start working with “margin-top” now, because it seems like a botched job to me.

    I would be very grateful for any timely feedback. The access data to the backend (see above in this ticket) are still valid.

    Many thanks & best regards,
    Manuel

    Nodari Support Team

    Hi Manuell

    From what I see texts are vertically centered in the box, however, there are some extra margin bottoms added that make it out of position, this CSS will disable those margins:

    .mk-text-block, 
    .mk-text-block h6 {
        margin-bottom: auto !important;
    }

    I will attach an image of the result you will get

    Let me know if you still need assistance

    Regards

    Tom Kellersohn

    Hi Nodari,

    Thank you for your answer – but that’s not what I’m looking for. It’s about the text that appears as soon as you hover over the image with the mouse (see attached screenshot).

    This text is centred horizontally, but not vertically. Do you have a solution for this?

    Thank you very much & best regards,
    Manuel

    Alexander Hutsol Support Team

    Hello,

    Please use the following CSS code in Theme Options > Advanced > Custom CSS to align the mentioned text vertically:

    .mk-gallery-item .gallery-desc {
    height: 100%;
    display: table !important;
    }
    .mk-gallery-item .gallery-desc .gallery-title {
    display: table-cell !important;
    vertical-align: middle;
    }

     

    Regards.

    Tom Kellersohn

    Thank you Alexander, works perfect!

    Alexander Hutsol Support Team

    Hello,

    You are welcome šŸ™‚

     

    Regards.

Viewing 20 posts - 1 through 20 (of 20 total)
You must be logged in to reply to this topic.
Login