I'm using html5 template with responsive layout and it works just fine (in all major browsers).
I'm using wide, 728px ad (google adsense) in the header, and I would like to hide it, when viewport width is less than 728px. So I modified the css file - added
#media screen and (max-width: 728px) {
.responsiveBanner {
display:none;
}
}
to the end of file. Everything works perfect in firefox and chrome. But IE10 doesn't hide the banner, when changing the window width.
modified code:
#media screen and (max-width: 728px) {
.responsiveBanner {
display:none;
}
body {
background:yellow;
}
}
also doesn't hide the banner in IE, however, the background change is applied...
Do you have ayn idea, why IE doesn't hide the banner?
Thanks
IE has a few well known bugs, one of which is the one you've encountered.
try visibility:hidden;
Related
I'm not sure whether this is possible, but using webkit I made a custom scrollbar that doesn't show up on mobile, so there is a gap on the right side of the screen where it should be (instead, the default chrome one appears). It shows up perfectly fine on desktop.
Is there anyway of:
a) making this scrollbar show up on chrome mobile browser.
b) hiding the custom scrollbar on mobile only, so the gap doesn't appear, but also allowing the custom scrollbar to show on desktop simultaneously.
::-webkit-scrollbar-thumb {
width:5px;
background-color:black;
}
::-webkit-scrollbar {
width:5px;
background-color:white;
}
::-webkit-scrollbar-track {
border-radius: 5px;
background-color: white;
}
If you whant only css solution, you can use media queries like this:
#media only screen and (max-device-width: 736px) {
::-webkit-scrollbar-thumb,
::-webkit-scrollbar,
::-webkit-scrollbar-track {
//default styles
}
}
But if you want to detect touch screen, you need to use some js, my favorite lib for this task is modernizr.
i'm using a bit of CSS to hide a div off-screen (and then jquery to animate it in) using this :
body {
overflow: hidden;
}
.hide {
position: absolute !important;
left:100vw !important;
}
On desktop, the div is being properly hidden, and no scrolbar appear, but on mobile, it is possible to scroll to the right and see this div.
Browsers not having the issue : Chrope/Edge/Firefox (All latest version as of today) on Win10
Browsers having the issue : Safari iOS (ios 9.x), Dolphin for android (latest) and firefox mobile (also latest)
See code here : https://jsfiddle.net/nfpwccvj/4/
Is there a way to solve this ?
Thanks.
You forgot to close the body }? Or it's just this example with this mistake?
First of all left:100vw is not Cross-Browser supported, best practice for full width is width:100%. If you want to hide something on mobile, you need to use media query.
.hide {
display:block;
}
#media (max-width:480px) {
.hide {
display:none;
}
}
I'm using an plugin to add social sharing buttons on my site wondertacular.com. They looks great on wide screens but in small screens they look messed up. So I added following css to override default css and make those two big horizontal sharing buttons responsive.
#media (max-width: 600px) {
.essb_displayed_both li {
display: block;
white-space: nowrap;
margin-bottom: 20px !important;
}
}
It works well when I resize desktop browsers (chrome and ff) to small width window but when I open this page in mobile browsers (chrome, FF, Opera) I didn't see any changes. It seems my css does not apply in mobile browsers. Please refer following screenshots -
Buttons are broken in mobile view
http://itsfromindia.net/mobile.png
While they looks good on desktop browsers when resized to small window.
http://itsfromindia.net/desktop.jpg
Please tell me whats going wrong.
You need to add a meta tag in the <head> that tells mobile browsers not to scale your site.
Add this in the <head> of your document and it should work as you're expecting:
<meta name="viewport" content="width=device-width">
More information here
Did you try adding browser specific CSS, like:
-webkit- (safari/chrome)
-o- (opera)
-ms- (IE)
-moz- (firefox)
It helps make your CSS cross-browser compatible and can help on your mobile browsers.
#media (max-width: 600px) {
.essb_displayed_both li {
display: block;
white-space: nowrap;
-webkit-margin-bottom: 20px;
-o-margin-bottom: 20px;
-ms-margin-bottom: 20px;
-moz-margin-bottom: 20px;
}
}
Not sure if that's the solution but it can't hurt!
I've created a page with tables of data that I want to be big enough to view comfortably on the screen but when it goes to print I want it to shrink down to fit on the page but when I change the size of the table, td's and fonts it wont work, the code works in chrome but not the other two browsers.
#media print{
.table6{
page-break-inside: avoid;
min-width: 500px;
max-width: 900px;
}
.table6 td{
font-size: 59.35%;
}
.th7{
max-width: 100px!important;
}
.th8{
max-width: 28px!important;
font-size: 58%;
}
}
The CSS works the print css works but only on certain elements and using certain attributes like display: none to hide navigation links etc.
According to http://caniuse.com/#feat=css-mediaqueries, CSS3 media queries are supported as of IE9 and Firefox 23.0
whatever you need to check compatability for, i highly suggest:
http://caniuse.com/css-mediaqueries
hope that helps
Solved the issue, when changing the width inside of #media print{} it can't override the values which exist in the regular css which is suitable for the screen, even when !important is called on it so I put the css for my table inside #media screen{} and it worked.
So if anyone has this issue with changing widths heights or size in general when printing in other browsers make sure your css is split up into #media print{} and #media screen{} otherwise it wont work in IE or Firefox.
(EDIT)
In firefox also if you want something to appear on the screen one way and print another you MUST have your styles for on the screen in #media screen{} if you leave it in the normal css print styles will never override the regular css. For example I had this inside the normal css but it was ignored in firefox when printing
.table6{
float: left;
}
So I had to put it like this
#media screen{
.table6{
float: left;
}
}
hi i'm creating an enewsletter and am trying to resize it for when its viewd on a mobile i have it working on iphone but android i'm unsure as to how to resize because of the massive screen variants. heres what ive got so far.
so in my i have too added things that overide the style if the screen width is a certain size.
#media only screen and (max-device-width: 320px) {
.hide { display: none !important; }
#main_content, #inner_content, .mobwidth { width: 300px !important; }
#content_rows, .mobwidthtext {width:300px !important;}
.banner {height:94px !important;}
.top {height:67px !important;}
.footer {height:109px !important;}
}
#media only screen and (max-device-width: 400px) {
.hide { display: none !important; }
#main_content, #inner_content, .mobwidth { width: 400px !important; }
#content_rows, .mobwidthtext {width:380px !important;}
.banner {height:117px !important;}
.top {height:83px !important;}
.footer {height:136px !important;}
}
Most email clients ignore CSS declarations that are not inline. Embedded stylesheets are ignored as well. Media queries will not work because they would override those made by web-based email clients, such as Gmail (i.e. what you want to do will not work).
Email HTML standards are pretty brain-dead. Keep in mind that things like MS Outlook don't even use browser technology to view emails - they use the MS Word engine.
Here's a good guide as to what CSS features can be used in emails:
http://www.campaignmonitor.com/css/
I disagree with the above answer. Using media queries for mobile will most definitely work but for android set your max screen size to 480. make sure to keep !important on all styles set by the query and ensure you have a general layout in your inline styles. this will result in browser stripping the css in head and just using the inline. Then the mobiles (majority of which do not strip head) using your media queries, I would recommend a large amount of testing before a send. But the only issue you have atm is just finding the correct maxwidths as you have to take into account the portrait and landscape widths as well. While also considering that zoom can also set off meia Queries with some devices