I am in-the-making of a nice login page, mobile first design, using Bootstrap 4.
Used this snippet, and was very happy about it!
However, I found out it isn't mobile responsive. only when I disable the touch simulation on Firefox developer tools, it becomes normal size.
Thanks for your help :)
Related
To begin with, I just started my first job as a junior front-end developer and got a task to fix bugs in the safari browser. (Chrome works well).
Our web app is developed using TypeScript, React (with Material UI framework) and Webpack.
Unfortunately, I spent hours surfing the internet and trying to find a solution for these bugs, but I couldn’t. I feel these bugs come from Material UI, but I might be wrong. I hope someone can help me with that and thank you in advance!
So the main problems I encountered in Safari were kind of CSS bugs.
Take a look:
Chrome_View / Chrome_View_Wrapped
Safari_View / Safari_View_Wrapped (Bugs are marked)
As you can see the in Chrome everything looks okay, while in Safari some of the things get corrupted.
ToolBar items get wrapped even there is free space. You can take a look at html and CSS. For example, if I comment (margin: -16px;) last item gets to its place.
Blue drawer background is not displayed until you wrap it out. You can take a look at html and CSS. For example, if I comment (overflow-x: hidden;) it gets fixed.
Wrap button on click should transform its direction by 180 degrees.
Footer and Drawer do not display images.
If anyone is familiar with this kind of issues please share your experience.
P.s. It would be great to avoid putting everywhere prefixes manually.
So I have a website with a menu-bar at the top with a sub menu that appears when you hover.
Under the menu, I have a large video playing embedded with the HTML5 <video> tag. However, on safari on ipad, i can not click the links that are hovering above the video, despite me having given them an appropriate z-index.
Can anyone help me out here? :(
edit: here's a jsfiddle: http://jsfiddle.net/7t6c00vn/
The issue seems only to happen on ipad.
The video takes precedence over any other material. Check Putting Video on Canvas on developer.apple.com.
So far as I can see the only solution seems to be to hide the video. Check
A Solution for Overlaid Elements on Video
I would also love to know if there is any other / better solution to this because I'm also in the process of building something using HTML5 and video that needs interaction.
It turns out that it's a sort-of-bug that was fixed with an update for the system. I don't think this problem has a definite answer yet, but I will choose FrankHe's answer as it actually provides some real suggestions and material for the problem.
But yea, things seem to work after the iOS update, so to any end users experiencing overlay problems with Video elements, update your systems! :)
Unfortunately, this also means I no longer have an un-updated device to test on.
I am using prestashop 1.6 with a custom theme. I have done some little changes here and there on the theme mostly just color and font on the css file. The mobile menu works perfectly on all android that I've tested but for some reasons, it does not work properly on some Apple devices. On an ipad 2 IOS 7.1.2, the menu background shows but the content does not. On an iphone 4 IOS 5.0.1, some of the content show, some don't. But then, it work great on an iphone 4 IOS 7.1.2.
I have no idea how to fix such problem as I have no clue what is going on. Has any one experience this problem or know the reason. Please help me out.
Here is the link to the site: www.halivu.com (it's not fully done, I have not finished with the content :D).
Thank you.
try to emulate the devices in Google Chrome.
All menu div tags are empty. Check your mobile settings in prestashop backend.
I am using twitter bootstrap to design the site. I have taken time to make the site responsive. The problem is when I resize the browser, the site becomes responsive but sometimes when resized and then again maximize the display is still in resize mode. Have attached the screenshots for better understanding.
Does anyone else experience this strange behaviour of bootstrap?
P.S All the screenshots are taken in browser maximize mode.
Looks like the browser isn't rendering properly on viewport change. I used to have the same problem once but wasn't able to figure out the reason. However, I used to hit a refresh (F5) on each resize to force responsify it.
I am developing a Blackberry and Android app using PhoneGap and Jquery mobile together. I don't have any problems with the android version but with Blackberry I'm getting a strange behavior that I don't want to get...
When I scroll/swipe up or down the page moves to that direction as if it were a scroll-able page but IT IS NOT and this creates an "elastic bouncing effect" making appear gray edges up and down of the page ...
I suppose this issue has to do with some CSS bug problem but I haven't been able to figure it out...
Here you have some pictures that help to understand better my problem...
Image 1
Image 2
I hope you can help me... Sorry for my bad English btw...