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%;".
Related
I am developing a H5 Canvas game using PIXI js.
I am struggling in implementing the ios Safari swipe up to full screen message.
Added a new div with window.width + 1000 px.
It does remove the safari address bars but i am not sure when to remove the div. i.e. i am not able to identify if i am in full mode or not.
Also, what should i do to get back the div enabled if someone accidentally or forcefully comes out of full screen mode?
I am open to use any opensource lib as well but wasn't able to find one except screenfull.js which doesn't supports safari mobile
App maker sample projects are working perfectly in mobiles, forms and tables are adjusted perfectly to the mobile view. But whatever we developed in app maker the designs are not adjusted to mobile layouts they are still in the desktop view. Is there any option to configure the application to work in mobile.
Our application is not working correctly in safari is that any browser compatibility issue from app maker or it is the issue from our side.
You need to use the Flow and Layout sections along with Panels to make sure your widgets group/resize/align correctly when resizing the screen. You can test this easily in chrome by pressing F12 and toggling the device toolbar (Ctrl-Shift-M or the 2 mobile devices icon at the top of the sidebar).
Read up on CSS Flexbox to understand how the Flow section works. With a combination of Fill Parent and Fit to Content in layout, using horizontal/vertical Panels, and grouping your widgets in Panels, along with using the Flexbox features, you should be able to get your screen to accommodate desktop and varying sized mobiles. It definitely takes some time to get the right combination though.
The site in question.
I created a slider/header using Slider Revolution. I want the slider to display differently on mobile devices than on non-mobile devices (a video on non-mobile and a picture on mobile). This works perfectly until the user turns their phone sideways. This causes the slider to revert to the non-mobile version.
The simplest solution I could come up with was to make the mobile version of the slider display on tablets as well. However, I imagine this would result in the same issue if the tablet was turned sideways. Also, the client wants the desktop version to be displayed on tablets.
Please let me know if you have any solutions. Thank you!
Have you tried adjusting the cutoff points for the responsive transition? It may be that your phone in landscape mode is wider than the cutoff for tablets.
I don't know if this will work or if when the phone is in landscape it sends new resolution data to the server, but it seems worth a try.
I'm trying to make a site that will be responsive on mobile devices but not on desktop computers.
I created a media query with the following breaking points: 320px, 321-480px, 481-680px, 681-778px, 779-1280px. The problem is that these apply to resized browsers on desktop computers too and display the mobile version. I want it to ignore these breaking points and display the desktop version of my site regardless of window size.
Is this possible? Thank you very much for an answer!
It doesn't make a lot of since to make a responsive site that is only responsive for mobile. Maybe use a server side script for device detection and make two separate sites for mobile and desktop.
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)