[Resolved] Merge Element only shows one

[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

[Elvin]

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?

[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

[David]

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>

[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?

[Ying]

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?

[Allan]

It is in the same element

codes below

[slide-anything id=’1370′]

[slide-anything id=”2241″]

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

[Leo]

Can you try using the same quotation for the ID?

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

[Allan]

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

[Leo]

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

[Allan]

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

[Leo]

No problem 🙂

[Author]

Posts