Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 21, 2018 at 5:47 pm #959885
    chcarrelogins

    Hi,

    I would like to hide the images’ title in a masonry gallery when displayed on a phone or in a small window.
    I tried to add this code in the qiuck CSS :

    @media only screen and (max-width: 1000px) {
.av-inner-masonry-content {
    display: none !important;
}

    It works perfectly well when I display a small window on my computer : the caption (title and/or excerpt) isn’t displayed and I can see the images without overlay.
    But it doesn’t work when I use my phone : in that case, the overlay and the title are always displayed, which isn’t very convinient.

    What can I do to make it disappear on phones ?

    (you can take a look at my website, the link is in the “private content” part).

    Thank you very much in advance for any help !

    Best regards,
    Christelle

    • This topic was modified 6 years, 11 months ago by chcarrelogins.
    May 23, 2018 at 3:16 pm #960852
    Ismael

    Hey chcarrelogins,

    Thank you for using Enfold.

    That css code should have hidden the masonry content. Please try to add the closing curly brace like so.

    @media only screen and (max-width: 1024px) {
.av-inner-masonry-content {
    display: none !important;
}
}

    What is your mobile device?

    Best regards,
    Ismael

    May 24, 2018 at 8:34 pm #961831
    chcarrelogins

    Hi,

    Thank you very much Ismael for your answer.
    I’m sorry my “copy paste” was incorrect, in my CSS the curly brace was not missing.

    I don’t know why it didn’t work (even with a cleared cache), it now does on different phones. But the display is very different depending on the browser, it works perfectly well with google chrome but the gallery is almost hidden (you can only see a very small stripe of the pictures, as if they were out of the screen, so that the page seems to be blank) with the native “Internet” app of a Samsung Mega 2.

    I would like the general display of a gallery to be the same with all the browsers, is that possible ?

    Thank you very much for your help !

    Kinf regards,
    Christelle

    May 28, 2018 at 6:11 am #962934
    Ismael

    Hi,

    Thanks for the update. The max width of the Samsung Mega 2 device is 1280px so this css code should work.

    @media only screen and (max-width: 1280) {
.av-inner-masonry-content {
    display: none !important;
}
}

    Don’t forget to remove the browser cache prior to checking the page.

    Best regards,
    Ismael

    June 2, 2018 at 4:03 pm #965888
    chcarrelogins

    Hi Ismael,

    Thank you very much for your answer. I’m sorry I didn’t reply eralier, I couldn’t test the modification before today…
    The new width seems to improve the display but it still depends on the browser you’re using :
    – with google chrome, it’s perfect (see private content)
    – with “Internet” (this is the name of the native browser on a Samsung Mega 2), the pictures are not displayed at the correct position, so they are almost “out” of the screen… (see private content)

    Is there anything I’m missing in the css ?

    Once again, thanks a lot !

    Best regards,
    Christelle

    June 5, 2018 at 7:41 pm #967410
    Victoria

    Hi Christelle,

    Please try the following code, you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .container {
        width: 85vw;
        max-width: 85vw;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.