I have just realized that the popups (that are not popups) in my main pages are not mobile friendly and I am at a loss how to go about it without upsetting the full page set-up.
take http://pintotours.net/Americas/DomRepublic/StoDomingo.php and press the first “Look inside” button for the Hotel Nicolas in a small device. The pop-up does not fit into the screen.
I thought I had dealt with this because if you open the popup directly from the address bar it works fine, e.g. http://pintotours.net/Americas/DomRepublic/NicolasStoDom.html
This is probably due to fixed width element in
<p>
<a class="popup" data-dimensions="600,600" href="NicolasStoDomMap.html">Map</a>
<span class="fromeuro">From $165</span>
<a class="popup look-inside" data-dimensions="700,650" href="NicolasStoDom.html">Look inside</a>
</p>
I wonder if the solution is to change the width to percentages in the queries only.
Of course, if possible the answer would be for small devices (through the queries) to call for the full page instead of the pop-up. Is that possible? … which, coming to think of it, is the same as I wondered above…
A LITTLE LATER
My problem there is that the data-dimensions come from a js script and there I have no idea how to change it in the media queries…
Could i put something like this in the media queries? But how should it look?
if (document.documentElement.clientWidth < 400) {
// something to disable the script
}