more than one ID in responsive

blindtexth
(@blindtexth)

5 years ago
Hi,

I managed to get the scroll to ID on mobile and desktop (previous support) by using two different ID for the form on each page.
Idea: Every page has a contact form, which is linked in the menu on top via #kontakt on desktop and #contact on mobile devices to each responsive form (IDs: kontakt and contact).

Now I have the problem, that on a tablet held vertical it uses the mobile menu with #contact and scrolls down. If you hold the tablet horizontally it uses the regular menu #kontakt but does not show the desktop form but the mobile one.

Question:
Is it possible to use more than one ID? Separated by comma or else?
like: »contact, kontakt«

Regards, Carsten
- This topic was modified 5 years ago by blindtexth. Reason: typos
The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author malihu
(@malihu)

5 years ago

Hi,

It’s not possible to use 2 ids on the same link (not sure if this is what you mean).

You need to change your CSS so the mobile menu matches the mobile contact form (i.e. both appear on the same viewport size). I don’t know how you create these but it usually happens via CSS.

Thread Starter blindtexth
(@blindtexth)

5 years ago

It looks like I have two menus and three responsive situations.

– the tablet »vertical« uses the mobile menu (#contact)
– the tablet »horizontal« uses the desktop menu (#kontakt) but the form is still from the mobile version (ID-contact) … that’ why it does not find it.

I was more thinking if I can use two IDs for the form (ID-kontakt, ID-contact) but only one for each menu (#contact or #kontakt).

We could use the mobile layout for the tablet horizontal but that’s not what the client wants.

hm …

Plugin Author malihu
(@malihu)

5 years ago

Can you remove the eso-hide-tablet class from the desktop form row element in your page builder/editor?

And add the eso-hide-tablet class to your mobile form row element?

Thread Starter blindtexth
(@blindtexth)

5 years ago

ok, done that … but now I have two contact forms on the tablet horizontal page.

Of course now it works for the one form.

Plugin Author malihu
(@malihu)

5 years ago

You have 2 #contact elements. You should have only one with the classes eso-hide-desktop and eso-hide-tablet. Can you remove the 2nd one that appears only on tablet?

Thread Starter blindtexth
(@blindtexth)

5 years ago

That is the problem … we have three situations but only two menues.

The thing is: on narrow devices the form has a smaller picture above and on wider devices the picture bigger next to it. But I got an idea … removing the picture from the form and have it separate …

I’ll give that a try.

Thread Starter blindtexth
(@blindtexth)

5 years ago

It did not work just with the picture alone …

When I remove the 2nd one that appears only on tablet … and the other two »desktop« and »mobile« are in use, it works. Only, the desktop version is too narrow on the horizontal tablet.

Plugin Author malihu
(@malihu)

5 years ago

It doesn’t seem narrow to me. Which tablet/resolution are you testing?
Plugin Author malihu
(@malihu)

5 years ago
You might be able to make the form and image like on mobile using something like the following CSS:
```
@media only screen and (max-width: 1024px){
    #pg-22-15 > .panel-row-style-for-22-15{
        flex-direction: column;
    }

    #pgc-22-15-1{
        width: auto;
        padding: 0% 20% 0% 20%;
    }

    #pgc-22-15-2{
        width: auto;
        padding: 0px 24px 0px 24px;
    }
}
```
You can change the 1024px in the media query to anything you like (e.g. 834px).

Does this do what you need?

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘more than one ID in responsive’ is closed to new replies.