B4X.com pc-browser

rabbitBUSH

Well-Known Member
Licensed User
Thanks to my faulty mouse
And that faulty mouse seems to be able to do things the rest of us cannot conventionally do.......
 

mangojack

Expert
Licensed User
Longtime User
Minimizing my browser window (Opera) to 1/3 width of screen causes the B4X webpage to display Mobile version.
The also happens with Edge browser.
 

aeric

Expert
Licensed User
Longtime User
This is call responsive design in web development or Media Queries in CSS.
The screen contents adapt to your device screen size.
The normal desktop screen width when reduce the size 1st stage into tablet mode and then further to mobile mode.

Usually I encounter the content not display correctly when the windows width is in between tablet to mobile.
 

aeric

Expert
Licensed User
Longtime User
A test I did, a button that allowed me to load the site "in a window" (responsive design), in the full page.
I don't understand. How do you "add a button"?
If you want, you need to edit the css in Developer mode by Inspecting the source.

In desktop mode where the screen width is big, we can see all the menu such as Home, Products... Members, a searchbox, avatar+username, envelop and bell button. The "What's New" button (lightning icon) with badge is hidden. It is only visible in mobile mode.
In mobile mode, menu like Home, Products... are hidden in the hamburger menu so there are more space left to show more buttons on the top right menu.
I also not clear why the forum app wants to hide just 1 button in desktop mode.
 

LucaMs

Expert
Licensed User
Longtime User
I don't understand. How do you "add a button"?
I wrote it like this for brevity.
It's the bookmarks bar.
I don't remember how I did it (it's been a few years).




Full "URL":

javascript:document.write('<!DOCTYPE html><html><head><meta charset="utf-8"><title>Responsive Design Testing</title><style>body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }.wrapper { width: 6000px; }.frame { float: left; }h2 { margin: 0 0 5px 0; }iframe { margin: 0 20px 20px 0; border: 1px solid #666; }</style></head><body><div class="wrapper"><div class="frame"><h2>270<span> x 480</span> <small>(mio)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="270" height="480"></iframe></div></div></body></html>')
 
Cookies are required to use this site. You must accept them to continue using the site. Learn more…