Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
4.00/5 (2 votes)
See more:
In some mobile my css display properly but in some mobile the font size become bigger , Is there any way to fix this issue in css.
Posted
Comments
Sergey Alexandrovich Kryukov 1-Jun-11 17:56pm    
Please, example of the style and its use.
--SA
[no name] 26-Apr-14 6:09am    
Are you working for mobile?, which devices are you focusing, I mean OS wise.<br>
<br>
Can you provide the demo link for it. jsfiddle is best to show your query.
[no name] 26-Apr-14 7:04am    
You can use Liquid layout style on mobile as well. It will help you in better way. You have to define your style in "%" or "em".

1 solution

You can use css media screen query for your application. Then you will be able to change the implementation of same css class for different screen size.

Example:

HTML:
XML
<div class="style1">
    Hi, this is a test.
    </div>


CSS:
.style1
{
    border: 4px solid green;
    width:100%
}
@media screen and (max-width: 680px) {

	.style1
	{
	    border: 4px solid gray;
	}
}
@media screen and (max-width: 400px) {

	.style1
	{
	    border: 4px solid blue;
	}
}


Here you see 1st css class is a general one (outside of media screen blocks). And other 2 classes are under different media size. you see I have mentioned "max-width" for each media screen block. That means if screen size is <=400px then it will use the css class from 1st media screen block, but if screen size is > 400px and <=680px then it will use the css class from 2nd media screen block.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900