I'm building an Angular/Bootstrap web app, and I'm having some curious behaviour from tablets.
I have a set of 9 pills/tabs in the content, each with col-lg-1 col-md-1 col-sm-2 col-xs-3 set in their class. So basically, they remain in a single line when on most desktop-sized screens, 2 lines on most tablet screens, and a 3x3 grid on most phone screens.
This is behaving normally when testing with Chrome, IE, and Firefox on my desktop (Windows 7), as well as on my HTC One.
However, when testing on any iOS device, Safari on my desktop, or even a Lenovo android tablet, every tab is listing vertically, no matter what screen size.
Does anyone have any ideas as to why this is occurring?
Whoops; figured it out. I was using display:inline-flex;
I guess I should really read up more on browser compatibilities...
Related
I'm experiencing a weird issue with the mobile responsive layout of a website.
The address is https://melec.vercel.app/
On desktop using dev tools > responsive, it works correctly, also on any android device you get the correct mobile experience but in iOS devices (tested on 2 iphones) the website renders incorrectly, it seems to have the double of the actual available screen width.
For reference I'm using tailwindcss, tailwindui and nextjs.
In this image you can see the scroll bar for horizontal movement.
Here you can see how I can freely move horizontally, this doesn't happen on dev tools or android devices.
Also when I press the mobile burger the whole layout shrinks a bit.
it is because the top part "flex-shrink-0 flex items-center".
I entered a "max-width: 100%;".
I have an issue with this little project:
https://weather-thanos.netlify.app/
https://github.com/thanosoncode/weather-react
When I inspect project for mobile sizes in desktop I can see margins and flexbox gap that disappears when in mobile.
I have media queries of course and even with much less view size than my actual phone is, it looks great in inspect.
Any ideas why that might happen?
https://github.com/thanosoncode/weather-react/blob/main/Screenshot_20211117_133044_com.huawei.browser.jpg
https://github.com/thanosoncode/weather-react/blob/main/local.jpg
I am new with semantic-UI and i love with the framework. They have vast of helpful documentation though, and more so confusing thing.
How does the Responsive visibility work?
There are the mobile only tablet only small monitor onlylarge monitor only for the container... and some of the code, I found that there was computer only, device only ? What are the difference? thank you.
Updated to reflect current docs and version 2.4.2
Responsive Visibility works by hiding a certain element (usually a ui container, but can also be e.g. grid rows) on specific screen sizes. For example, <div class="ui container mobile only"> would only be shown when the screen is less than 768px wide.
The documentation for Grid has a Device Visibility section which demonstrates several possible visibility modifiers:
Mobile (mobile only)
Tablet (tablet only)
Tablet and Mobile (tablet mobile only)
Computer (computer only)
Large screen (large screen only)
Widescreen (widescreen only)
All Sizes (no modifier)
The documentation doesn't explicitly mention what the device breakpoints are. Like most things, they can be configured via SASS variables when building Semantic UI and are defined inside site.variables. The default breakpoints are:
mobile only will only display below 768px
tablet only will only display between 768px - 991px
computer only will always display 992px and above
large screen only will only display between 1200px - 1919px
widescreen only will only display 1920px and above
As seen in the documentation for Grid, it's possible to combine these as well - e.g. tablet mobile only and mobile computer only are perfectly valid.
This can't display below 768px:
<div class="ui container mobile only">
The correct expression is below:
<div class="ui container mobile only grid">
I have a few questions about Bootstrap:
1) Implemented our application using bootstrap keeping in view the laptop and Desktop Display.
However now need to be viewed in all touch devices.
2) I've heard Bootstrap supports Responsive CSS supports in all devices(Touch and Non-Touch), however it is not supporting, sometime the layouts appears wierd and doesn't look good.
3) For ex: attaching a sample screen how it appears in normal view and Touch Device (Iphone 5), observed in Chrome Mobile & Tablet emulator.
Is there any good way, so that it looks feasible and compatible in both Touch and Non-Touch Devices.
Yes, if you use bootstrap classes correctly, there will be no broken view on any size screen. To test it, you can use FireFox CTRL + SHIFT + M (don't know combination on chrome, but there is that tool too)
I'm trying to adapt my website for mobiles and by now I'm quite disoriented.
I've got 2 test pages, t3.html and t4.html.
The first one (t3) without header and footer seems to fit ok to screen width in real iPhone and HTC, but not on my Opera Mobile Emulator for Samsung Galaxy or HTC nor on my iPhone (¿3?) emulator.
The second one (t4) with header and footer (which is what I really want to have) makes a big wide for header and footer and keeps a narrow form and tiny fonts for the main content, this happens in real iPhone, HTC and in my Opera Mobile Emulator, not in my Iphone (¿3?) emulator.
The thing is, if I didn't forget any, there aren't any width properties set (except for the form inputs and labels, which are near 200px width) so all divs should span to device's screen width, or that's what I think.
The examples are:
http://s380890671.mialojamiento.es/mobile/t3.html
http://s380890671.mialojamiento.es/mobile/t4.html
My goal is that everthing fits the mobile screen width. Can you help me or point me to a good and up-to-date mobile designing article? The ones I found are a few years old.
Thank you
Smashing Magazine has a great resource on many aspects of mobile web development.
The overview features hand-picked and organized selections on the most useful and popular of Smashing Magazine’s articles related to design and development for mobile devices:
http://www.smashingmagazine.com/guidelines-for-mobile-web-development