I'm using CSS3 Columns like
.Content {
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.List {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 0px;
-moz-column-gap: 0px;
column-gap: 0px;
display: block !important;
}
and my html looks like this.
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 List">
<div class="Content col-lg-12 col-md-12 col-sm-12 col-xs-12">
My content
</div>
</div>
I checked my iPad and iPhone diplay by Chrome development tool, and it works fine. However, real iPad and iPhone not showing anythings. How can I solve this?
Non fully supporting browsers that use the prefix -webkit- have some missing elements which cannot be used.
Webkit browsers do have equivalent support for the non-standard -webkit-column-break-* properties to accomplish the same result (but only the auto and always values). Firefox does not support break-*.
CanIUse - Columns
This pretty much states that webkit browsers (such as those on an iPhone or iPad) do not have even partial support for column-break and therefore you will need to find an alternative such as using JavaScript or having a fallback in CSS.
Columnizer is a good jQuery plugin which creates the same effect but using JavaScript.
Columnizer jQuery Plugin
After taking a long trip, I found a solution about this problem.
What I want to achieve was made my cards look like pinterest. And I used Lightweight Responsive Pinterest Layout with jQuery - Waterfall.
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 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 am creating an ordered list within a webview and I want to remove the indentation from the list, i.e. have the list aligned with the first paragraph. Here's HTML:
<body style="font-family: arial""font-size:18">
<p>First paragraph.</p>
<p>
<ol style="margin-left:0px">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
Notice that with the margin-left:0px, the webview still indents the list by about 17 points. If I say margin-left:-17px, I can make it work with a hack but would rather not as it seems more like I'm doing something wrong with the construction of my HTML.
Can anyone see any problems with it?
Updated HTML - Still doesn't work:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
ol {
padding-left: 0px;
}
</style>
</head>
<body>
<p>Paragraph.</p>
<p>
<ol>
<li>List item 1.</li>
<li>List item 2.</li>
<li>List item 3.</li>
</ol>
</p>
</body>
</html>
I'm using iOS 5.1 on iPhone 3GS
You can archive style like that with :
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Try This....
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
.flush-left {
padding-left: 25px;
}
</style>
</head>
<body>
<p>First paragraph.</p>
<p>
<ol class="flush-left">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
</html>
A couple of other pointers. Test your stuff out in test files in html on your desktop and load them into Safari and the iOS Simulator (Drag html file onto safari open in simulator).
But then you can use Regular Safari Debug tools to examine the html and css. or Firebug in Firefox.
Also, when in doubt www.w3schools.com ... :)
Perhaps I'm a bit late for your needs – I just came across this.
I only noticed this on my iPhone, and not my iPad, nor Safari on the Mac. I found that a bit strange that this issue would only be in the one version of Safari, and not all. I wasn't happening in Chrome either.
When looking in the Chrome developer tools, I noticed that the user agent stylesheet had added a number of -webkit prefixed styles, all to do with margin and padding:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
When I first saw that, I was wondering if that was the issue, but, it was late, and I had to take a sleep break. Today, I tackled it again, but forgot about these styles. I looked around, and came across #Remover's question. But, setting a specific pixel-based margin or padding didn't sit well with me.
At some point, I decided to narrow my browser window in Chrome, and low and behold the issue was there as well, only when I narrowed it to be close to the width of an iPhone. So, this isn't just an iOS issue. It's webkit.
I looked again at the styles in the dev tools, and saw again the -webkit styles, and the 40px on -webkit-padding-start. I played around with my css, and that was indeed the culprit.
I then added the following to my stylesheet:
ol {
-webkit-padding-start: 2em;
-ms-padding-start: 2em;
-moz-padding-start: 2em;
-o-padding-start: 2em;
padding-start: 2em;
}
I did some quick research, and it looks like only -webkit and -moz are using padding-start, but I added the rest, just in case they pick it up – though, now that Opera has switched to webkit, -o probably isn't needed.
In my case, I used 2em, as that worked with my style. Not sure if 2em will work across the board or not.
Edit
I should have also mentioned that it probably only shows up on small screens because it's set at 40px. In my design, my base font-size at full screen is 23px, and at 480px and below is 10px, which is quite a bit of a difference.
If you merely assign a padding of zero, the bullets go off the screen. I found that the following worked perfectly for my webview
ul,ol {padding-left: 20px;}
li {padding-left:2px;}
isn't it
<ul><li></li></ul>
not <ol> ?
also it looks the you might have a syntax error on your style for your body tag
:)
~ Dan
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.
Im currently working on a mobile version of a website, everything is great, works fine on an iPhone, Blackberry and Android.
I have one slight problem, not a big deal but still a little annoying. I have:
<h1> tags set to 18px and bold
<h2> tags set to 12px and bold
<p> tags set to 12px and normal
Now everything looks great on the iPhone when viewing in portrait, but when the device is rotated to landscape the <h1> titles go smaller (hard to tell but possibly smaller than the <h2> tags?!
Here is my css:
h1 {
color:#FFFFFF;
font-size:18px;
line-height:22px;
font-weight:bold;
margin-top:0px;
}
h2 {
font-size:12px;
color:#333333;
font-weight:bold;
margin-bottom:-5px;
}
p {
color:#333333;
font-size:12px;
line-height:18px;
font-weight:normal;
}
I believe you are looking for this in your CSS:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
A better solution can be using 100% instead of none, as stated by user612626 in an older thread:
Font size rendering inconsistencies on an iPhone
body {
-webkit-text-size-adjust: 100%;
}
this way desktop webkit browsers can adjust size and zoom proportionally too.
I think this is a better approach than filtering by screen size.
Hope it helps.
As stated in Neurofluxation's answer you can use the css rule -webkit-text-size-adjust but beware that this can prevent users from adjusting the font size on desktop Webkit as well (see this article for more details).
In light of this it's likely worth checking via CSS3 media queries (or user agent) to be safe.
E.g.,
#media only screen and (max-device-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
}