I have read in a few other posts that creating a tappable link for a phone number can be done with tel: in an anchor tag
I would like to implement this in a responsive website.. something like this:
Call Us! <span>(555) 555-5555</span>
(the span tag I plan to use to hide the phone# with CSS)
The idea is that on a desktop you will only see "Call Us! (555) 555-5555", but not be an actual link
But when we scale down to mobile, you will then see a stylized link that just says "Call Us!" that you can click.
I'm sure there is a way to accomplish this with JavaScript or JQuery... but is there anyway to accomplish this with CSS Media Queries?
Note: Visual styling is no problem.. just looking for a reasonable solution for the "switching" concept.
Thanks in advance!
There really isn't anything wrong with leaving the link on desktop computers. This would for example allow you to click the link to call via Skype or other VOIP program you might have installed.
If you still want to change the link, just create two of them. One that is shown for desktops, the other for mobiles.
You could create 2 links, one to show on desktop and one for mobile
OR
Use css to style the anchor with phone number in them to default cursor so it does not look like a link even when you hover. To complement this, you need to use js to disable the click action.
This is all assuming you can detect what device you are on reliably.
I think your best bet would be to add an ID to your anchor tag and through your media query you can hide it on the desktop version there no need for the span.
Then for your non anchor text hide that when you are scaled down through another ID in a media query.
TEL: 123-456-789
#media screen and (min-width: 600px) {
.tel-link {
color: #000 !important;
text-decoration: none !important;
}
}
This will display the phone number in plain black for the browsers over 600px wide ( so it doesn't look like a link ) even though it still has a link. I think it's ok because you can make a call from PC nowadays.
Related
I would like to know what is the best way for making table data responsive in email ?
I use Ink by Zurb for making my responsive email and I would like to insert it a table data (like shopping card table). But I would like it responsive. My idea is to set 2 tables, one for desktop and another for mobile and hide either one or other depending on the size of the screen.
I have found many solutions for hiding something in email. But no one work in every webmail.
Do you have any idea ?
Thanks.
Based on your codepen you have a couple choices.
The first one is a simple solution, similar to what you already have on there. The second is a lot more difficult and complex - but will remove the need to have 2 separate data tables.
1.) Do a mobile table and a desktop table. Have the Mobile table display by default and use percentages with Max-Width to contain for gmail client. Then have media queries at your desktop break point (e.g. usually around 600px) that change it to display:none !important, etc. to hide the table on desktop. You then by default hide the desktop version. In gmail, using display:none doesnt work, in order to get it to work you need to use display:none !important, which makes inlining it pretty much useless. See a list below taken from here on css to use to hide in gmail. You then have the media query also change the desktop table to display, effectively replacing it. This does mean that on gmail web client, that the mobile table will display.
display: none;
font-size: 0;
max-height: 0;
line-height: 0;
padding: 0; (optional)
mso-hide: all; /* hide elements in Outlook 2007-2013 */ (optional)
2.) Your second option is to build a bunch of block tables that act as each row and the tds will stack on mobile with hidden tds for headers that display on desktop or mobile, etc. This can get very complex and very tenuous as a tiny change can break the whole thing. It would likely give you much better display across all clients, but in my opinion the first option is a much more efficient and sustainable.
I would suggest you take a look at this neat article:
display table explanation
Else you can try to use the display: flex property
My bootstrap labels and badges disappear off the webpage when the page loads for the first time, using my samsung galaxy s3 they only reappear after when I refresh the browser window. Why is this happening and how can I simply force them to appear the first time the page loads please. My labels and badges are not empty, so the display none function has nothing to do with it.
An example of the code as it is that does not display the first time the page loads is:
<span class="badge badge-important">info</span>
also tried to remove below with no luck
.label:empty,
.badge:empty { display: none; }
The normal boostrap.css is attached to my page and its the only style sheet that has the label selector in it.
Has anyone come across this weird sort of thing?
Thanks
Okay, had this problem on a Samsung Galaxy Note tablet, an LG Optimus phone, and an LG Nexus phone. When I removed the below code from the bootstrap CSS file completely, the problem went away.
Remove:
.label:empty,
.badge:empty { display: none; }
Looks like the Samsung/LG browser ignores the :empty and just makes the .label and .badge display:none whether it's empty or not.
I know that the original questioner said that he tried this and it didn't work (cache issue maybe???), but it did work for me, so I thought I'd at least post the answer since this was the #1 google result when I ran into the problem.
I have the same problem.
When i try this in my web browser all works fine.
<div>
some text <span class='badge'>1</span>
</div>
But, when i try it in my android browser, the badge not show. I solve this problem with.
<div>
<span> some text <span class='badge'>1</span> </span>
</div>
I need to print report page that has couple of background images on it. But only these images are not printable. These images are logos actually for graph and hence very important in report.
I have another option that I can crop them and include in page as tag but this is last option. Hence before that I would like to know if there is any way to forcefully print these images? Can anybody help me out?
By default, a browser will ignore background css rules when printing a page, and you can't overcome this using css.
The user will need to change their browser settings.
Therefore, any image which you need to print should be rendered as an inline image rather than a css background. You can use css to display the inline image only for print though. Something like this.
HTML
<div class"graph-image graph-7">
<img src="graph-7.jpg" alt="Graph Description" />
</div>
CSS
.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;}
.graph-image img{display: none;}
#media print{
.graph-image img{display:inline;}
}
Using this code, or similar code, means the image is used once in html and once in css.
The html version is hidden using css, and for print it displays as normal. This is a hack, but it will do what you want it to do. It will print the image.
Having said that, what you're doing is terribly bad practice. Nothing which conveys meaningful information to the user should be conveyed using css alone. Not only is it semantically incorrect, but it makes the graph less useful to users. An inline image is much better, and if you can, that's what you should use.
it is working in google chrome when you add !important attribute to background image make sure you add attribute first and try again, you can do it like tha
.class-name {
background: url('your-image.png') !important;
}
also you can use these useful printing roll and put it at the end of css file
#media print {
* {
-webkit-print-color-adjust: exact !important; /*Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
}
I have this title on my page:
<h2 style='color:#33bbff;'>Los Angeles, <span style='font-size:10px;color:black;'>Unites States</span></h2>
As you see I want the country to be a different color and size from the city. Now, I've done similar things probably a hundred times, but for some reason the span styles aren't applied here - the country looks just like the city. What am I doing wrong?
I tried writing the styles like h2 span { ... } instead of doing them inline, didn't help.
Your code appears to be fine (see here).
Perhaps you've cached the old version. In your test browser, hit CTRL+F5 to force a reload of all files.
Otherwise, try checking if you've made use of the !important; to force a style and ignore other styles.
Debug it by using a Developer Tool Bar e.g. FireBug, and trace the styling applied, maybe something else is overriding the style. ( http://jsfiddle.net/unVNN/ )
There is no mistake, simply delete cash in your browser, CTRL+F5
When using responsive design, is there a way to still allow a user to view the full site?
E.g. They are viewing on an iPhone, but want to see the full site. They click a "Full Site" link, and it shows them the 1024px version.
If you're using media queries, only apply rules beneath a body element having the class 'responsive'.
#media screen and (max-width: 320px) {
body.responsive {
color: blue;
}
}
If the user doesn't want to view the responsive layout, simply remove the 'responsive' class from the body element, nullifying all rules. You could persist the users preference by cookie or some other method as well.
Demo: http://jsbin.com/obaquq/edit#javascript,html
Reducing the window to no more than 500px will turn the text white, and the background blue. This is conditional on the body having the 'responsive' class. Clicking the first paragraph will toggle this class, and thus toggle the effects of the media query itself.
I've been wondering about this. I had success using jQuery to modify the viewport tag, seems to work fairly well from what I can tell so far. Doesn't require multiple stylesheets or a lot of extra CSS.
http://creativeandcode.com/responsive-view-full-site/
Haven't tried this, but thought about this issue myself. I imagine you could use a stylesheet switcher that deactivates the core responsive stylesheet, leaving the user with the full version
Switching stylesheets certainly isn't a new concept. Here is an article for ALA circa 2001 addressing switching stylesheets: http://www.alistapart.com/articles/alternate/