Long URL link text not goes in next line in iPhone and breaking out of container

Long URL link text not goes in next line in iPhone and breaking out of container

Today, when i am working with the responsive design and doing testing with iPhone and other smartphone, I found one issue which is related with the long URL text, where there is a URL whose length is more than certain characters and its break the container (div) and goes out of the screen, because of this I am not able to read the full url in my iPhone screen and other smartphone screen. As i knew that word-wrap is not working and long url is not goes to next line because there is not any space in between the url link. So basically auto word-wrap is working with the text but not working with the url link and long urls breaking out of container in my case, if you have same issue then I have a solution for that, its simple css trick, you need to apply one css class with the below code in that class.

 
.LongLinks{
    -ms-word-break: break-all;
     word-break: break-all;
     word-break: break-word;
     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     hyphens: auto;
}

This is working fine with all the latest browsers and all the smartphones including iphone series, Samsung galaxy series, Motorola android phones etc…

SOLVED Google fonts not working on iphone or old browsers

SOLVED Google fonts not working on iphone or old browsers

Google fonts not working in IE7, IE8, IE9.
Google fonts not working on iphone with old os
Google fonts not display on iphone and old browsers
Google fonts loading issue in old browsers

Google web fonts provide the solution to display the fonts on your web-site without install that fonts at end user’s machine, before few years if we need to apply some fonts on the web-site then that font should be installed in the user’s machine otherwise its not display but now google fonts provide the solution for that and its very simple.

you just need to load google fonts using below lines and just change the font-family in query string, then you easily apply that fonts in your web-page.

 
<link href='http://fonts.googleapis.com/css?family=McLaren' rel='stylesheet' type='text/css'>

Recently, i am working on that and doing testing on the iphone then i knew that this font is not working, Its working perfect in my iphone which is iphone 5 but when i checked in my friend’s iphone then its not working. he is using iphone 4 with OS 4.2.2. Later on i checked in the IE7, IE8 and some other old browser then its not working in those browser as well. I am more frustrating when i see that its working in some apple products and some windows products because its working fine with my Macs as well.

After some research i solved the issue and when you know it that you surprise that its a silly things. Its solve in some apple products and browsers using the !important keyword as shown below.

 
.h1{font-family:'McLaren', cursive !important;}

if you are not able to resolve it using this then go to the http://www.fontsaddict.com/ and download fonts and upload it in your css folder and add below code in your css and then its works in all machines.

 
@font-face {
  font-family: 'McLaren';
  font-style: normal;
  font-weight: 400;
  src: url(McLaren-Regular.ttf);
}

introduction of the css used in the html

what is css?

CSS stands for Cascading Style Sheet.

css is more useful in html, when you make a web-page then you need to define the web-page and layout of the page. webpage layout is more important in the html. when we use html then we give the property in the html tags and also define it in the <style></style> tags. some time we need to apply same css on the multiple web-pages because any web-designer or programmer define the themes in web-site.

How to define CSS?

<style>

body
{
background-color:#fff;
margin: 5px;
}
h1
{
color:red;
text-align:left;
font-size:20px;
}
p
{
font-family:”Arial”;
font-size:12px;
font-color:#fcv;
}

</style>

you can save the above style class in one file and then include that file in the web-page. when you do not define .(dot) in the style sheet then its apply on the html tags, and if you define dot(.) then you need to write class name in the html tags, example of the class in the html tags.

<style>

.patel
{
.font-family:”Arial”;
color:#cfcfcf;
}

</style>

<span class=”patel”></span>

i think there is easy to use css after reading the article.

apply fonts even fonts not installed on user computer

How to apply fonts even fonts not installed on user computer?

 

when web-designer working with html then he can use only those fonts which are already installed on user computer, if web designer use any different font which is installed in his/her computer but no installed in user computer then user are not able to see that fonts. this is one of the major issue for web designer and web developer.

But now we have solution of this, we can use css3 and use whatever font which we need to use. only requirement to use css3 is that you need the font file which is you want to apply on your web page.

css3 supports Mozilla Firefox, Google Chrome, Safari, and Opera

to use css3 you need 2 file formats of fonts, font type .ttf (True Type Fonts) and .otf (OpenType Fonts).

.ttf fonts support in Mozilla Firefox, Google Chrome, Safari, and Opera browser but its not support in internet explorer, IE 9 support css3 but we need .otf font type. all other internet explorer not supports css3.

Syntax to use CSS3 is as below

 
<style type="text/css">
 
@font-face
{
font-family: freelancer;
src: url('fontname.ttf'),
url('fontname.eot');  // This is used for internet explorer
}
 
div
{
font-family:freelancer;
}
 
</style>

 

I think now you can enjoy the fonts without limitation and cufon fonts.

apply css on all button input type

if you want to apply the css class on all the button based on type of button then its very easy using the css.
common css for all input buttons, where input type=”submit” or input type=”reset” or input type=”button”. below is the example of css for button where you can set your css property in class.

use below code to apply css for all buttons whose button type is submit.

input[type=”submit”] {
background: url(“images/submit.png”) no-repeat scroll left top transparent;
border: medium none;
color: #FFFFFF;
font-size: 13px;
font-weight: bold;
padding: 7px 12px 10px 7px;
text-transform: uppercase;
}

use below code to apply css for all buttons whose button type is button.

input[type=”button”] {
background: url(“images/submit.png”) no-repeat scroll left top transparent;
border: medium none;
color: #FFFFFF;
font-size: 13px;
font-weight: bold;
padding: 7px 12px 10px 7px;
text-transform: uppercase;
}

use below code to apply css for all buttons whose button type is reset.

input[type=”reset”] {
background: url(“images/submit.png”) no-repeat scroll left top transparent;
border: medium none;
color: #FFFFFF;
font-size: 13px;
font-weight: bold;
padding: 7px 12px 10px 7px;
text-transform: uppercase;
}

use below code to apply css for all buttons where button type is button,reset or submit.

input[type=”submit”], input[type=”button”], input[type=”reset”] {
background: url(“images/submit.png”) no-repeat scroll left top transparent;
border: medium none;
color: #FFFFFF;
font-size: 13px;
font-weight: bold;
padding: 7px 12px 10px 7px;
text-transform: uppercase;
}