I'm creating a small website with Bootstrap. All is ok on Windows, Andoid or Mac.
On iPhone (iOS) the text in input are not visible, as if the color was white or text is without opacity.
I try to disabled webkit-appearance or fix color with webkit-text-fill-color but I get the same result.
The shortcut url is available here : http://www.app.solutionssuretesecurite.com/
I think you can do this with css. But the point to remember is to mark it as "!important". For example the code below is a css code that works only for IOS. So you can overwrite the bootstrap css codes.
#supports (-webkit-touch-callout: none) {
/* CSS specific to iOS devices */
.your-class {
opacity:1 !important;
}
}
#supports not (-webkit-touch-callout: none) {
/* CSS for other than iOS devices */
.your-class {
opacity:1 !important;
}
}
So you have a custom style definition for a problem that only happens with IOS devices.
Related
the site is https://mizore.site
on safari, the font-size is too big
img
on other img
It's only happend on ios safari, It display correctly on ipad safari, ios's other browsers.
I have no Mac, so I use inspect.dev to debug it, found the p font-size is 24px
inspect.dev debug img
Hope anyone can help me!
I think you need this in the CSS
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
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 am using the following html code to hide the registration buttons on www.eventbrite.com:
**
<style>
#ticketInfo {
display: none !important;
}
#TicketReg {display: none !important;
}
#see_whos_going .panel_head2 {
margin-top: -27px;
}
#OrderReg {display:none !important;}
</style>
This works fine on desktop, but does not seem to work on mobile devices e.g. iPhone. I am a coding novice, so any sugestions would be much appreciated!
Any ideas?
The mobile optimized view of the Eventbrite event pages don't render the HTML/CSS that are added to the custom header by the customer/event organizer (unlike the desktop version where you can essentially add your own CSS to overwrite any style element).
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;