Quick fix: forum handviewer on mobile

[smerriman]

My smartphone has a 412x892 resolution. Due to some margins and padding, this means standard 400x300 handviewer iframes inside forum posts don't fit on the screen; South's bidding is always offscreen and inaccessible.

 

There is some inline CSS on the forum pages:

 

/* CSS: bbo_handviewer*/
.hv_frame {
   border: 0;
   float: left;
   padding-right: 0.2em; /* Separate diagram from text */
   padding-top: 0.4em; /* Separate one diagram from another */
}

Any chance you can add:

.hv_frame iframe {max-width:100%;}

Then on my screen it'll scale down to fit (it'll add whitespace underneath since it has a fixed height rather than scaling responsively, but at least it'll be readable).

[pescetom]

I have the same problem and always have to (enable auto-rotate and) rotate to see the full bidding. This would be a useful fix.

[smerriman]

Ooops, my mistake - I see you actually implemented the code already (thanks, super quick :)) but I had a typo - it's just:

 

.hv_frame {max-width:100%;}

since that's the iframe itself.

[pescetom]

Ooops, my mistake - I see you actually implemented the code already (thanks, super quick :)) but I had a typo - it's just:

 

.hv_frame {max-width:100%;}

since that's the iframe itself.

I hope that works better, because I still lack S bidding on my phone.

[Gerardo]

.hv_frame {
border: 0;
float: left;
padding-right: 0.2em; /* Separate diagram from text */
padding-top: 0.4em; /* Separate one diagram from another */
max-width:100%;
}

[smerriman]

Hm, looks like it's only being output on desktop. I guess the forum must be using a different theme for mobile and so CSS has to be added to a different place to get it to show up there.

[Gerardo]

Please recheck.

[smerriman]

Still not seeing any relevant CSS output to mobile user-agents.

 

But it looks like mobile-specific CSS is in https://www.bridgebase.com/forums/public/style_css/css_2/ipb_styles.css, so editing that file should work.

[Gerardo]

There is only one source for .hv_frame, currently named: https://www.bridgebase.com/forums/public/style_css/css_15/bbo_handviewer.css (name might change in the future).

 

If you are seeing .hv_frame, it is defined here, there is no separate definition for mobile. It might be using a different version of this file though.

 

I just ensured all sources for this file are sync'ed with the max-width content added.

 

If you don't see it in your device, try reloading this file.

 

If still having issues, yell.

[smerriman]

It looks like what's happening is that on desktop, it's embedding all the stylesheets stored in the css_15 folder, while on mobile, it ignores all of these and embeds all the stylesheets from the css_2 folder instead.

 

So copying bbo_handviewer.css into the css_2 folder instead should work (but the float + padding aren't needed in the copy as they need to be in separate columns anyway).

 

My original message about seeing hv_iframe was me looking at the source on desktop; I didn't realise at that point it was different on mobile (where no hv_iframe is showing at all).

[Gerardo]

I see. I need to look at this closer.

[barmar]

This might have something to do with the different forum "skins" for mobile and desktop.