Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #266221

    Hi All,

    Is there a away of reordering how the homepage looks like on a mobile device?

    For example, I would like to move the blue button above my news feed on my mobile website.

    http://www.major.com.au

    Carl

    #266497

    Hey Carl!

    You’d need to duplicate those buttons in a Color Sections (with an specific ID, like mobilebuttons) on top of the news feed, then add some CSS:

    /* Hide them by default */
    #mobilebuttons{
    display: none;
    }
    /* Show them only on mobile and hide the existing ones */
    @media only screen and (max-width: 767px) {
    .avia-builder-el-28 .avia-button-wrap, .avia-builder-el-28 .av-special-heading {
    display: none;
    }
    #mobilebuttons{
    display: block;
    }
    }

    Best regards,
    Josue

    #266534

    Hi Josue,

    I have tried removing the existing button from the page using the avia-builder-el-34 class. Is this the correct way to go about this?

    @media only screen and (max-width: 767px) {
    .home a.av-special-heading.av-special-heading-h3.avia-builder-el-34.el_before_av_button.avia-builder-el-first { display: none; }
    }

    Thanks Josue,

    Carl

    • This reply was modified 10 years, 6 months ago by Animationink.
    #266536

    Tested in Firefox and it worked, try flushing your cache.

    Best regards,
    Josue

    #266539

    Hi Josue,

    I made a type in the code. I was editing my post when you where reply. Can you place refer to my edited question above.

    Cheers

    Carl

    #266543

    Hi Carl!

    It’s element 33, this works with the current setup:

    .avia-builder-el-33 .avia-button-wrap, .avia-builder-el-33 .av-special-heading {
    display: none;
    }
    

    Put it inside the media query.

    Best regards,
    Josue

    #267815

    Hi Josue,

    I’m still having issue hiding el -33 and -28 on mobile devices. This is what I currently have. Can you see anything wrong with this?

    @media only screen and (max-width: 767px) {
    .avia-builder-el-33 .avia-button-wrap, .avia-builder-el-33 .av-special-heading { display: none; }
    .avia-builder-el-28 .avia-button-wrap, .avia-builder-el-28 .av-special-heading { display: none; }
    }

    Cheers

    Carl

    #267965

    Hi!

    Please try adding !important rule as following

    @media only screen and (max-width: 767px) {
    .avia-builder-el-33 .avia-button-wrap, .avia-builder-el-33 .av-special-heading { display: none !important; }
    .avia-builder-el-28 .avia-button-wrap, .avia-builder-el-28 .av-special-heading { display: none !important; }
    }

    Best regards,
    Yigit

    #268270
    This reply has been marked as private.
    #268412

    Hey!

    Thank you for the update.

    Please try to use this:

    @media only screen and (max-width: 987px) {
    .home .avia-builder-el-33 { display: none !important; }
    .home .avia-builder-el-28 { display: none !important; }
    }

    Regards,
    Ismael

    #268419

    Still not working. I have flushed the cache etc. Still doesn’t work. :(

    #268601

    Hi!

    Please flush settings of cache plugin if you are using any and disable CSS minifying feature and check if that helps.

    Regards,
    Yigit

    #268951

    I have flushed the Cache,
     photo Cache_zpsbe87d307.jpeg

    How do I disable the cdd minifying feature?

    Cheers

    Carl

    #269425

    Hey!

    Do you want to remove the special heading with the text “Information” and the buttons below? I think you’re using the wrong selector, please use this:

    @media only screen and (max-width: 987px) {
    .home div.flex_column.av_one_third.avia-builder-el-35, .home div.av-special-heading.av-special-heading-h3.avia-builder-el-36 {
    display: none;
    }
    }

    Best regards,
    Ismael

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