If you go to the chrome's inspector, there is a "fit" button right at the top which is very handy in responsive design. It tries to fit the viewport in chrome with any screen resolution you set.
Does firefox have a feature like this? And how can I use it?
No, we currently don't have this feature in Firefox's Responsive Design mode. It seems nice to have on a small screen or for a large device! I've filed a bug to add it.
We'll be refreshing Responsive Design later this year, so I hope we'll be able to include this feature then.
Yes, Firefox does have a responsive design mode:
Just click the responsive design mode button in Firefox F12 tools. If you don't see it, click the gear for options, then check the "Responsive Design Mode" checkbox.
Related
Just discovered this code and implementation of lightbox2 and added the needed code to some of my webpages.
Looks very good o desktop and also on tablet but I don't like the lightbox in mobile view.
The pictures that are shown on mobile are smaller than the 'normal' responsive view that I get when not using lightbox2.
So my question is in the title: How can I disable the lightbox on mobile?
Regards Arno
Unfortunately this is not possible at this time. The Lightbox script on load will attach event handlers to the target images.
To get around this, you can use different markup on mobile and show hide the content with CSS media queries.
I'm using angular-materialize for a demo project and so far it's been pretty easy to use. However, when doing a browser compatibility test pass I found that the datepicker component doesn't work when using IE and Edge browsers. On IE it scrolls the page down when the overlay appears and it doesn't even work on Edge browser. You can see the bugs on the angular-materialize demo page Open this link in IE or Edge.
Please refrain from answering this with a question like "Why not use Angular-Material". Although the UI is similar, there are some parts of materializecss that I prefer over Google's Angular-Material. So far, this is the only issue I've found.
I have a site which uses a different menu for mobile devices than on the Desktop version using media queries. If I resize a desktop browser window to a mobile width and click the mobile navigation dropdown button and then resize the window back to desktop size, the mobile menu remains visible instead of changing back to display:none. Unfortunately this site is still in staging so I cannot show you a live example, but I was hoping someone could point me in the right direction of getting that DIV to become hidden again once the window is resized back to full screen.
Also, I realize that the chances of this scenario playing out in the real world are slim, but the client would like for it to be addressed anyway.
Thanks!
I figured out that it was javascript that was showing the DIV in the first place, not a media query, so I just added display:none to the div for the Desktop media query and the issue has gone away. Thanks!
I have a proplem with my Menu toolbar, When I hover menu, it leaves a black background until refresh page. It is reproducible only in Chrome.
Image Error Description
I had the same issue with a flash video on my extjs 4 application.
What fixed it was setting hideMode to 'display' on the menu.
The problem is with Chrome 27.x. A workaround for that: disable Chrome's hardware acceleration when available.
Go to Chrome's settings -> Show advanced settings... -> uncheck the "Use hardware acceleration when available" and restart browser.
Worked for me...
We've noticed lately that the grids in our website as well the ones on the demo page for the grid show the vertical scroll bar until the page finishes loading and then disappears. It appears to be adding 'overflow: hidden' to the table which has the effect of removing the scroll bar. When I remove this css (inside Chrome debugger) the scroll bar re-appears. I have confirmed this behavior on multiple users' systems.
Anyone know of a fix for this? I have a feeling this is something Telerik will have to fix.
This bug is happening because of a setting located in the Chrome debugger settings called ‘Emulate touch events’. When the Telerik grid detects a touch enabled browser it adds the overflow:hidden to the grid. In my case, a majority of the laptops at my work are touch screen enabled and so the 'bug' manifests on those machines.