Problem at small screen widths (hopefully last!)


I changed some buttons in the middle column of this page

and now have a test page that should have no problems, but has

When I look at the first one in a small mobile, there is no lateral movement, but in the test one there is quite a lot and you can see the effect in the picture below. The main content seems to be wider than the header and navbars, or thre is an offset. But they are the same in both stylesheets

What is causing this? I thought it might be the names of the hotels (in red ) and reduced the size from 80% to 70% but did not solve the problem. The main cntent seems to wider than the header and navbars above, or there is an offset. But they are the same in both stylesheets

It might have to do with some new/amended code, that gives a fixed width, but the total is still well below the width of the screen (I think…) 250+45+10=305px +20 px from #box4 margin-right =325px…

#content #box4 .popup, #content #box4 .look-inside {
    margin:5px 0 20px 45px;
    border:1px solid brown;
     background-position:0 -28px;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;

#content #box4 .popup:hover  {
    background-position: -28px 0;

The phone’s resolution is Resolution 480 x 800 pixels (~233 ppi pixel density)

Hi there qim,

as you are aware, due to mild “Luddite”
tendencies, I can only test code on a p.c. :hammer:

Using the Firefox Responsive View" option
does not show the effect achieved by your
mobile device. :sunglasses:



I think I cracked it by adding the adequate queries at low screen width.

I still have a problem or two but will give this thread as



This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.