I have this site here http://www.taranmarlowjewelry.com/?page_id=5 and in the top right corner I have an input button and it looks weird on an iphone and I don't know why. It makes into a circle/bubble like button.
Heres the HTML for the input button
<input type="submit" id="button" name="button" class="searchBtn" value="GO"/>
and here is the CSS
.searchBtn{
background-color:#ffa18a;
color:#FFF;
height:31px;
padding:0;
width:32px;
border:0;
cursor:pointer;
}
Any help would be gratefully appreciated!
I fixed my problem but adjusting my css like this...
.searchBtn{
background-color:#ffa18a;
color:#FFF;
height:31px;
padding:0;
width:32px;
border:0;
cursor:pointer;
-webkit-appearance: none;
}
By adding -webkit-appearance: none; the button now looks good an iphone, this also works for the iPad.
If you have a lot of different buttons that this is an issue with on your site, try:
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
That should reset all of your input buttons without causing problems with checkboxes and other inputs. Just leave the rest of your CSS as-is.
consider setting -moz-appearance and -ms-appearance to none as well...
If you have access to a mac you can turn on developer tools in Safari and put the browser into iPhone simulation mode and try to debug it that way.
Related
I'm working on a responsive email using Mailchimp and all images are scaling down fine except for an image which has to have max-width set to 160px. This comes up fine on desktop but on mobile displays smaller than 100% width.
I've set up the following:
#media only screen and (max-width: 480px) {
img[class=mcnImage] {
width:100% !important;
But it still comes up too small. Any ideas?
As my comments above state, there's possibly a couple of things that could be legitimately getting in the way here. However, this is pure speculation, but consider for a moment...
CSS
img[class=one] {
border: 5px solid blue;
}
HTML
<img src="http://dummyimage.com/50x50" class="one"/>
<img src="http://dummyimage.com/50x50" class="one "/>
<img src="http://dummyimage.com/50x50" class=" one"/>
<img src="http://dummyimage.com/50x50" class=" one "/>
<img src="http://dummyimage.com/50x50" class="one two"/>
Before seeing what happens on the fiddle, first see if you can figure out what should happen (if you're familiar with the [] attribute selector).
Think you got it? Check out the fiddle.
img[class=term] not only is unnecessary (class selecting with img.term works perfectly), but it only selects one of the images. [attr=term] matches on an exactly statement, no whitespaces or anything. I don't know if that' srelated, but it's worth noting. nonetheless.
agree with above comment that you should follow this standard way to refer the elements.. but for the solution of your problem, you can try adding max-width:auto to your code;
#media only screen and (max-width: 480px) {
img[class=mcnImage] {
width:100% !important;
max-width:auto;
}
}
I'm having a weird display issue when testing a site on an iPhone4 running iOS6.
For some reason, the iPhone ignores the display: inline; rule when I click on the parent link. I've been browsing the test site using Safari developer tools, and the toggle class names are working as intended.
I'm using this piece of javascript to toggle class names on the div:
$('.toggle').click(function() {
$(this).toggleClass('toggle');
$(this).toggleClass('toggle_open');
});
The mark up looks like this:
<div class="toggle">
<span>Parent</span>
<div>
<span>Child 1</span>
<span>Child 2</span>
<span>Child 3</span>
</div>
</div>
CSS:
div.toggle div { display: none; }
div.toggle, div.toggle_open { display: inline; }
If I change display: inline to inline-block it works. If I remove display: inline completely it works, but then causes display issues in the browser. I want to use display: inline; so the contents of my mark up display on 1 line or 2 if required.
I'm aware I could use modinizer to create a rule for 'touch' and 'no-touch', but this seems like over kill for something that is probably a bug created by my code :)
What have I done to upset mobile Safari?
I'm trying to style a select input on iOS. The first option or initial state should have smaller font-size but not the rest of the options.
I have the following html structure:
<select class="dropdown">
<option selected="" value="Navigation">Navigation</option>
<option value="some-link">Whatever</option>
<option value="some-link">Another option</option>
<option value="some-link">Why</option>
<option value="some-link">What</option>
</select>
My CSS for it looks like this:
select {
-webkit-appearance: none;
font-family: 'Custom-Font', sans-serif;
font-size:.5em
line-height:1.8em; // optical center
background-color: #ccc;
color: #333;
border: none;
padding: 6px 10px 4px 10px;
}
.dropdown {
background-image: url(img/assets.svg);
background-position: right 2px;
background-repeat: no-repeat;
width: 100%;
display:block;
margin-bottom:-1.5em;
option:not(:first-of-type) {
font-size:1.5em;
}
}
The <select> menu looks exactly like I want it to look. It says "Navigation" inside a light-gray box with a rather small font-size.
However when clicking/tapping the select on my iphone the native UI view of iOS shows all options also in a very small font-size.
How can I just make the selected option (or the box itself) use the custom formatting but not the options. I want my options to have a "normal" readable font-size.
Any ideas on that? I tried with option:not(:first-of-type) and increase the font-size but no effect!
Unfortunately, there isn't a way to do it. iOS Safari takes full control of styling select lists' internal contents. Here's a reference for verification: little link.
One way to achieve this this would be to simulate the dropdown/select menu using JavaScript.
It's not very preferable, but if you absolutely require to change the default styling, then I'm afraid it's the only way to go; here's a demo that should give you an idea on how to do the simulation: another little link.
Try this 100% worked for me
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
For what it's worth - I had a transparent <select> dropdown with a border radius when closed. On iOS (I'm not sure about android, I didn't test it) the default grey box for the <select> would appear inside of my custom border which was unappealing and unwanted.
To get rid of the inner grey box I used the following CSS:
-webkit-appearance: none;
And further more - pertaining to this OP's topic. Bootstrap offers a convenient solution with great documentation to enable custom dropdowns with Javascript. Check it out here.
I have a page with an image. When you hover over the image, a slightly transparent white div appears on top of it with a couple of action buttons and some info. When you move your mouse off the image, the info/button box disappears (display: none).
In that hidden/mouseover box is a facebook like button. It shows up perfectly fine in all other browsers, but As you might have guessed, it has strange behaviour in the notorious IE browsers.
In IE7 - IE8, the like button appears for just a second and then disappears. It still leaves a space in the design like when it would be there, it just isn't. Doesn't matter if I rollover first or not. Button appears for a second, then disappears.
In IE9 however, the button does appear and stays there. When I rollover a second time though, the iframe gets a white background, even though the first rollover got me a transparent background.
html code of hidden mouseover div:
<div id="hoverPopup">
<div class="fbLikeWrapper">
<div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false"></div>
</div>
<a href="javascript:reserveGift(#qry_kadoogle_detail.id_kadoogle_detail#, 1)">
<div class="btn_small_prefix"></div>
<div class="btn_gift_center">button1</div>
<div class="btn_small_suffix"></div>
</a>
<a href="##">
<div class="btn_small_prefix"></div>
<div class="btn_gift_center">button2</div>
<div class="btn_small_suffix"></div>
</a>
</div>
css code:
.fbLikeWrapper
{
/*width : 50px;
margin-left : auto;
margin-right: auto;*/
}
.fbLikeWrapper div
{
display : block;
line-height: normal;
}
screen captures:
IE9
IE7
Try this:
#hoverPopup .fb-like {
width: 47px;
}
.fbLikeWrapper
{
display : inline-block;
width : 51px;
text-align : center !important;
margin : 30px auto 10px;
box-sizing : border-box;
-moz-box-sizing : border-box;
-webkit-box-sizing : border-box;
overflow : hidden;
}
If this not helps, may the javascript causing the problem, not the css and you have to share more information (javascript, html, etc.)...
I found the answer through one of my colleagues who's had a similar problem.
When the page was loaded, the popup needed to be hidden, so I gave them a class that said display:none;. When I hover I toggle the class on and off. In every browser that works with a facebook like button, with IE it doesn't.
I don't exactly know why yet, but I did find out that if I use the jquery .hide() and .show() functions to toggle and initially set the hidden div and not use a class, it works like a charm.
Case closed. IE continues to suck.
When I view www.americaspoeticsoul.com on my iPhone, the menu overflows for some reason. See:
And it even looks worst on the other pages because of the title:
Anyone know why it's like this? And is there a way to fix it? Here's the CSS for the menu:
/*Menu*/
#menu {
margin-bottom:15px;
width:450px;
}
#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
float:left;
}
#menu ul li a {
display:block;
padding:10px;
margin:2px;
background-color:#D41C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#menu ul li a:hover {
display:block;
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#menu ul li a.current_link {
display:block;
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
Thanks,
Nathan
As an iPhone user and developer - I wouldn't use a site like yours on the phone unless I really had to - it would require all sorts of zooming in before I could read or click on that menu.
If you have content that you would like to present via a menu on an iPhone, I would recommend detecting small-screen mobile browsers and redirecting them to a mobile specific menu at the very least - jQuery Mobile is so easy to use to create a menu.
This is just a response about iPhone or similar size screens - I'm sure you'd want to fix this on an iPad if it looks the same.
You're not setting an explicit width on the menu items which leaves their width at the mercy of the browser and how large the font-size + margins and padding end up being. In the case of mobile browsers (Android too), your width is just too much for the 450px that you have. Try dropping the font size a point or something.
You're discovering one of the downsides of relying on text/fonts within your menu system. There is way too much variability (OS, browser, device, etc.) to expect the text to always behave properly or even use the font you intended.
I use a graphically created menu system which never changes no matter what and a simple text menu in the footer as a fallback.
You could try adding this to your CSS file:
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
This will stop Mobile Safari (and Windows Phone) from adjusting the size of your text in an attempt to make it more readable.
EDIT: If you only want to affect the text-size-adjust on mobile phones, you could use a media query:
#media screen and (max-device-width: 480px) {
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
}
If you're feeling ambitious, you should consider adjusting the layout on a more fundamental level for smaller screen sizes. Any CSS you put inside that media query will get applied to devices that have a screen size of 480px or less.
For example, the buttons may be a bit too small for fingers to reliably tap on them. A better alternative would be to linearize the layout so that there's only one column and each link button takes up the full width of the screen.