Exchange vh for px

Question

I’m having the following problem:

I have a page that has several slides in HTML even. All these slides have their size set by vh instead of pixel.

The problem is that when I access with mobile, the mobile being horizontal is fine, but when I put vertically it does not display the slide that I was, it makes the recalculation of the vh, due to change of orientation of the mobile, and goes to the next slide.

First I thought about disabling the mobile screen transition via javascript, but it seems to be Gambi.

It has as I see if the site is being accessed by mobile and run a function in javascript so that it replaces everything you have vh for pixel?

I don’t know if that’s the best option, if anyone has a suggestion I’m very grateful.

Answer 1

Swap VH for Pixels has yes, for Media Queries. It would be a way to apply styles when the user accesses the content of a different device. This is a basic example that you should seek to know more in depth.

@media only screen and (max-width: 480px) {
    body {
        width: 100px;
    }
}

This CSS says that when the user accesses your site from a browser that has screen smaller than 480px, the body will have 100px wide. With a little research and work you can adapt this to your need.

The big question is whether you have another preferable way to resolve your situation.