B4X.com pc-browser

rabbitBUSH

Well-Known Member
Licensed User
LucaMs said:
Thanks to my faulty mouse
Click to expand...
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
LucaMs said:
A test I did, a button that allowed me to load the site "in a window" (responsive design), in the full page.
Click to expand...
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
aeric said:
I don't understand. How do you "add a button"?
Click to expand...
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>')
 
You must log in or register to reply here.
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…