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.
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 am working on a Flask / Vue.js web app that I want to have work well with both laptop and mobile browsers. The layout I've chosen is to have a series of mobile-screen-shaped areas that are oriented in a left-to-right fashion when viewed on a laptop browser. Currently when viewed on mobile those mobile-screen-sized areas get shifted into a top-to-bottom orientation, and the user can scroll the screen up and down to go through them all.
What I'd like to do is to have the mobile CSS instead simulate a mobile app by having those cards(?) oriented left-to-right (like the laptop view), and have a swipe shift each one into view or out of view, but always snapping to a single card at a time, rather than displaying 1/4th of the first card and 3/4ths of the second card (for example).
Current laptop browser view:
Desired mobile behavior:
I'm currently developing a website and am using media queries to adjust the layout.
However, I have noticed that I need to go into Mozilla's 'Responsive Design View' to get an accurate representation of how the layout would resize typically on mobile devices.
Resizing the browser window does not always have the same effect. What is the difference between these two?
Thanks
Mozilla Responsive Design view adapt to different screen sizes to provide a presentation that is suitable for different kinds of devices, such as mobile phones or tablets. Responsive Design Mode makes it easy to see how your website or web app will look on different screen sizes.
Resizing the browser can have the same effect but is less convenient and affects the tabs as well.
Therefore the Responsive Design View is a convenience that you should take advantage off instead of resizing the browser itself.
Respnsonsive design view of mozilla serves the same purpose of just resizing the browser itself.
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'm just starting out in web design/CSS so my current knowledge is limited.
With that in mind (this may be very easy for pros to fix), does anyone know why the Facebook iframe on this website won't stay within the sidebar on mobile devices?
http://www.northeastimage.co.uk
It looks great on desktop browsers but on the iPhone for example sits out of the sidebar over the margin sticking to the far right of the screen.
i would go for a user-agent to look trough your css and html, its a cross browser look also support phones and tablets it lets you "tell" the browser that your a phone tough your on your desktop
easy to debug while using it, i pref user agent for chrome get it here
Get strings to view from more viewports than the standard amount that are embedded in the program