Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • December 2, 2015 at 8:40 pm #546086
    slui

    Hi,

    I’ve come across an interesting issue where the CSS to hide an element is recognized in full desktop mode. However, in mobile or responsive mode the hidden element shows up.

    I’m at a loss as to how to explain this.

    Please see the attached screenshot…showing the site full desktop mode and responsive mode.

    http://www.tiikoni.com/tis/view/?id=9b5f68b

    • This topic was modified 8 years, 12 months ago by slui.
    December 2, 2015 at 8:46 pm #546092
    Elliott

    Hi slui!

    Your screenshot is not displaying for me, which button is it?

    Is it the “kids bowl free” button? I see it on mobile but not on desktop. What is the CSS your using?

    Regards,
    Elliott

    December 2, 2015 at 8:49 pm #546094
    slui

    Great…I’m glad you are seeing it too…
    Here is the code that is being used:
    .btn_hide {
    display: none !important;
    }

    Yes. It is the kids bowl free button.

    • This reply was modified 8 years, 12 months ago by slui.
    December 2, 2015 at 8:51 pm #546097
    Elliott

    Hey!

    You have some CSS in your child theme that is overwriting the display: none.

    #locations_top .avia-button-wrap {
    display: block !important;
    margin: 10px 0 !important;
}

    Regards,
    Elliott

    December 2, 2015 at 8:52 pm #546099
    slui

    Why doesn’t it work in responsive mode? It works nicely in desktop mode.

    December 2, 2015 at 9:01 pm #546109
    slui

    I’ve found the code you are speaking of…

    So in full desktop mode you get this:

    #locations_top .avia-button-wrap {
    margin: 0 10px;
    }

    .btn_hide {
    display: none !important;
    }

    However, the moment you go down to a mobile screen this code overrides the CSS element that has been assigned to it in the AVIA builder.

    @media only screen and (max-width: 767px)
    #locations_top .avia-button-wrap {
    display: block !important;
    margin: 10px 0 !important;
    }

    And btn_hide css code has been struck through.

    Why is this the case? I thought all assigned CSS in the builder is supposed to override any existing CSS code.

    • This reply was modified 8 years, 12 months ago by slui.
    December 2, 2015 at 10:01 pm #546132
    Basilis

    Hi!

    It is getting over-writted but on mobile, the CSS is different.
    You will have to over-writte for the mobile also, with a media query, like the example.

    Can you do that please?

    Regards,
    Basilis

    December 2, 2015 at 11:18 pm #546168
    slui

    Hi,

    Is there a way to prevent it from getting overwritten? It seems to me that whatever I put in the assigned CSS in the element should be the overriding CSS and not what is in the core CSS.

    Although I do appreciate your solution, there has to be a more elegant way to get this resolved? Is this the standard for themes? You also have to keep in mind that I’m targeting ONE specific button. I’m afraid your solution will affect all buttons when the width is less than 767px.

    December 3, 2015 at 8:14 pm #546620
    slui

    Any thoughts to this?

    December 3, 2015 at 10:11 pm #546693
    Elliott

    Hi!

    Can you take a screenshot and highlight what your trying to do so we can get a better idea? I’m not sure if your trying to hide it on mobile or display on mobile.

    It would probably be best to remove the !important overrides from your CSS code and use the media queries like so.

    @media screen and (max-width: 767px) {
#locations_top .avia-button-wrap {
margin: 0 10px;
}
}
@media screen and (min-width: 767px) {
#locations_top .avia-button-wrap {
margin: 10 0px;
}
}

    Make sure that you get the brackets right. Your missing them in the CSS code you posted here, https://kriesi.at/support/topic/possible-bug-with-recognizing-or-not-including-css-in-responsive-mode/#post-546109.

    Cheers!
    Elliott

    December 4, 2015 at 5:53 am #546809
    slui

    Hi Elliott,

    I’m trying to keep the “Kids Bowl Free Program” button hidden. See first post for image. So that button (pinkish) that shows up in the mobile should remain hidden until a specified time. At which point, I remove the CSS tag and it shows up on the desktop.

    However, when I add the CSS tag back in, it disappears on the desktop but remains on the mobile site.

    Please keep in mind that I only want to affect ONE button. Does your code affect all 3 buttons?

    December 4, 2015 at 7:16 pm #547223
    Elliott

    Hey!

    Ok it’s getting a little confusing, let’s simplify this.

    The button your wanting to hide you have added a class of “btn_hide” to it correct?

    1. Remove all of your CSS.

    2. If you want to hide it on mobiles then use this.

    @media screen and (max-width: 767px) {
.btn_hide { display: none !important; }
}

    3. If you want to hide it on desktop then use this.

    @media screen and (min-width: 767px) {
.btn_hide { display: none !important; }
}

    Regards,
    Elliott

    December 12, 2015 at 5:53 am #551388
    slui

    Hi Elliott,

    I’ve done as you have asked and I’m still seeing the button in mobile mode. This means your code works with desktop mode but it doesn’t with the mobile mode.

    Any other ideas on how to get this to work?

    December 12, 2015 at 6:05 am #551389
    slui

    I figured out the solution….

    /* Hide button in mobile mode */
@media only screen and (max-width: 767px) {
#locations_top .btn_hide a { display: none !important; }
}

/* Hide button in desktop mode */
@media only screen and (min-width: 767px) {
#locations_top .btn_hide a { display: none !important; }
}
  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Possible Bug with Recognizing or Not Including CSS in Responsive Mode’ is closed to new replies.