Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Merge Element only shows one

Home Forums Support [Resolved] Merge Element only shows one

Home Forums Support Merge Element only shows one

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1966809
    Allan

    I am trying to make a mobile slider and desktop slider. However If I create to different elements only one shows..

    I have set up the following CSS rule

    @media
    only screen and (min-width: 600px) {
    .mobile
    {display:none!important}
    }
    }


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

    In fact if I comment these out it still only one shows

    #1966830
    Elvin
    Staff
    Customer Support

    Hi Allan,

    Let’s fix the CSS a bit.


    @media
    rules shouldn’t have overlapping min/max width values.

    Example:

    @media only screen and (min-width: 601px) {
    .mobile
    {display:none!important}
    }
    }
    
    @media only screen and (max-width: 600px) {
    .desktop
    {display:none!important}
    }
    }

    I just changed min-width to 601px so it doesn’t overlap with max-width: 600px;.

    If I understood it right, I believe you’re trying to make elements with selector .desktop hidden on screens 600px and smaller while elements with .mobile selector gets hidden on screens 601px or larger?

    A wise man once said:
    "Have you cleared your cache?"

    #1966933
    Allan

    so problem is firstly. I want these both to show. but they won’t
    https://christom.tinytake.com/msc/NTk1MzkyMV8xODEyNzEwNA

    Within the top element is the below
    https://christom.tinytake.com/msc/NTk1MzkyOF8xODEyNzExMg

    The bottom one is
    https://christom.tinytake.com/msc/NTk1MzkzMV8xODEyNzExNQ

    If I can get them both to show then I can apply the display:none css

    #1967014
    David
    Staff
    Customer Support

    Hi there,

    Only one Header Element can be used on a page.
    The simplest solution would be to use one header element and wrap your slider shortcodes in their own divs eg.

    <div class="hide-on-mobile"> Your desktop / tablet shortcode here </div>
    <div class-"hide-on-desktop hide-on-tablet"> Your mobile shortcode here </div>
    #1967605
    Allan

    Yeah that isn’t working

    [slide-anything id=’1370′]
    [slide-anything id=”2241″]

    I have not removed any CSS and not they should both be showing 2 sliders, but there is still only one?

    #1967627
    Ying
    Staff
    Customer Support

    Hi Allan,

    As David says, there should only be 1 header element per page.

    Can you confirm that you add both shortcode into the same header element, and the other header element has been deactivated?

    If yes, can you share the exact code you are using in the active header element?

    #1967636
    Allan

    It is in the same element

    codes below

    [slide-anything id=’1370′]
    [slide-anything id=”2241″]

    https://christom.tinytake.com/msc/NTk1NjYwMV8xODEzMTQwMg

    #1967643
    Leo
    Staff
    Customer Support

    Can you try using the same quotation for the ID?

    Any chance you can link us to the page in question?

    #1967798
    Allan

    Sorry page is hidden behind holding page.. Would have to give someone private access

    #1967849
    Leo
    Staff
    Customer Support

    Did you try fixing the quotation as I pointed out above?

    You can use the private info field here:
    https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    #1968853
    Allan

    This is solved. It was a problem with the slider plugin. I have done a work around. Thanks for your help πŸ™‚

    #1968855
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Merge Element only shows one’ is closed to new replies.