Home/ Questions/Q 7056813
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:54:42+00:00

I need to adapt my template to mobile versions, without creating different page files

  • 0

I need to adapt my template to mobile versions, without creating different page files for each case, or subsites. I think the easiest way to do that is to change the css files to “rearrange” some elements.

So this is what I´ve done so far:

  • I´m working with php.

  • I´ve made use of @media queries, adding inside the <head> this: <link rel="stylesheet" type="text/css" media="only screen and (max-width: 700px)" href="/css/smartphones.css" />, so it will call the smartphones.css file each time the users access the site with a small device.

  • Everything goes kinda smoothly, up until now, when I decided to adapt the dropdown menu.
    I´ve got a dropdown menu in pure css, that gets activated on mouse over. I use :hover to get the menu to actually drop down.

I want to replace that big dropdown menu with many items (horizontally and vertically), to a single button, that onclick will dropdown, and show just a couple of things.

In order to do that I need to adapt my php page file to hidden the entire dropdown menu and show the “mini-onclick” dropdown menu instead. And here is what I don´t know how to do it.

I need some -javascript I guess- inside my body tag (as the menu appears inside the body) to say something like:

IF the screen is less than 700px, show this XXXX code. ELSE keep going with the rest of the page.

I´m planning to hide the normal dropdown menu using css inside the smartphones.css file, but don´t know how to show the special dropdown menu instead.

Any help will be greatly appreciated! THANKS!

Rosamunda

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use the User-Agent HTTP header in PHP to determine if smartphone-relevant code should be generated instead of normal code.

    You could also get screen properties via the screen object, and if it’s a smartphone, attach the dropdown state to the onclick event and if not to the onmouseover event.

    That’s pretty simple. You just change your CSS from someclass:hover to someclass.hoverstate and when the dropdown needs to be triggered, you add the hoverstate class to the target element.

    • 0