Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 19, 2016 at 5:35 pm #586186
    frontlight

    Hi – I have an image (a logo) in the main top section that I would like to disappear on mobile. Could you please help me figure how to do that?

    February 19, 2016 at 6:00 pm #586203
    DigitalEssence

    Hi,

    try using:

    @media only screen and (max-width: XXXpx) {
    .inner-container .logo {display:none!important;}
    }

    Where XXX is the pixel size where you no longer want the logo to display.

    February 19, 2016 at 6:07 pm #586207
    frontlight

    Thanks for the quick reply – but I’m actually talking about the logo in the color section with the background image, not the header. I’d like to leave everything the same with the header menu, but remove the image from the color section on mobile.

    February 19, 2016 at 6:10 pm #586208
    DigitalEssence

    Do you have a link to the site I can look at?

    And do you use the Web Developer plugin for Firefox or Chrome? Use that, switch to view source to find the name of the element and then you can play around with the live CSS edit to test your selector.

    February 19, 2016 at 6:11 pm #586209
    frontlight

    yes – my link is in the private content below. And I’m only referring to the homepage, not any of the subpages. Thanks!

    February 19, 2016 at 6:13 pm #586210
    DigitalEssence

    Ah, I can’t see the private content as I’m not Enfold staff. So you will need to paste it in the normal reply.

    February 19, 2016 at 6:17 pm #586211
    Yigit

    Hey!

    Please refer to this post – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    Cheers!
    Yigit

    February 19, 2016 at 10:34 pm #586343
    frontlight

    Hi Yigit, I enabled the custom css via functions.php, and I applied a custom css tag to the image I’m trying to hide (desktop-only). Then I added the following code to the Quick CSS:

    @media only screen and (max-width: 990px) {
    .desktop-only { display: none !important; }}

    However, it’s still not hiding the image on mobile. Any idea why?

    February 22, 2016 at 8:00 am #586917
    Rikard

    Hi,

    There are no elements on your front page with the class desktop-only, where did you add the class? Please post admin login details in private so that we can have a closer look.

    Thanks,
    Rikard

    February 25, 2016 at 7:33 pm #589398
    spidercreations

    Instead of creating a new thread, I want to note I’m having the same issue when trying to hide a simple image element.

    As an example, I’m using show-mobile and hide-mobile for my CSS class. On the page, I have the slider set up to HIDE below a specified width, and a text box set to SHOW on mobile. (The text box replaces the slider.)

    So the CSS is working. If I try this with a simple image element, it’s not working.

    I went and swapped the image element with a text element and inserted the image in the text element, set the Custom CSS to hide-mobile or show-mobile as needed, and it worked correctly.

    Rikard – My suggestion would be to do a test just like I did, using a simple image element and see if the CSS is not applied to those simple image elements.

    February 28, 2016 at 2:28 pm #590418
    Vinay

    Hi!

    To show images only in mobile or desktop

    1.
    Add the below css in Enfold > General Styling > Quick CSS

    /*Show only in mobile or desktop*/

@media only screen and (min-width: 769px) {
.only-mo { display: none !important; }}

@media only screen and (max-width: 768px) {
.only-desktop { display: none !important; }}

    2.
    Enable css custom class support in your theme functions.php

    http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    3.
    Add the class name only-mo to show only on mobile or only-desktop to show only on desktop

    As yigit mentioned earlier please refer to this article for more details http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    Best regards,
    Vinay Kashyap

    February 28, 2016 at 4:40 pm #590444
    spidercreations

    OK, my code started working when I added the !important to the CSS. For some reason, I had not been using that before.

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Make an image disappear on mobile’ is closed to new replies.