mobile width display issue

Question

0.00/5 (No votes)

See more:

i have a problem to implement the width in mobile.

i put some text in a div and this div width is 100% but is not full of width in mobile but in web it's work fine.
the link is www.goldenfiles.info/123.htm

please open in mobile browser cuz in web browser it's work fine thanks in advance

Posted 29-Sep-12 0:23am

jozeaf

Updated 29-Sep-12 0:38am

Chris Maunder772.8K

v2

Add a Solution

Comments

enhzflep 29-Sep-12 6:36am

Nope, doesn't work like that for me here. Using Chrome on Win7 and default browser on Android 2.3

The display is good in mobile-browser. There is a 1cm gap between the right-side of the box and the end of the text in the desktop browser.

It seems to me that perhaps you've applied a width that is dependant on the font used.

jozeaf 29-Sep-12 6:42am

actully i set the width to 100% put not working in mobile still some white area in right side i don't know how to fix it ?

enhzflep 29-Sep-12 6:54am

I think you an I are looking at different versions.. When I visit, there are two instances of the word 'width' in the source:

1.
.contect_hold{
width:1044px;
margin-left:auto;
margin-right:auto;
}

2.
<div class="wrap-listing" style="width:1044px">

Just to be clear..

Is the problem a gap in the white-box after the text? (As shown by the * below)
-----------------
|text text text*|
|text text text*|
-----------------

jozeaf 29-Sep-12 7:27am

no the problem is still a gap in the right area i don't know from where it come ..

enhzflep 29-Sep-12 8:07am

Can you specify 'the right area' using different words? I still don't understand where you are referring to.

This is what I see:
1. a 200x200 grey image tiled for the background
2. a white box 1044 pixels wide
3. Inside the white box is the text 'text ' - 33 times on each line
4. Each line has 26 pixels of empty space at the right edge

Notes:
'text' = 26 pixels
'text ' = 31 pixels

33 * 'text ' = 33 * 31 = 1023 pixels
1044 - 1023 = 21pixels (5 pixels less than figure in (4) since each ' ' is 5 pixels)

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

HackensackNJ · Accepted Answer · 2012-09-29T00:36:00

Try putting this to the head of the site

XML

<meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta content='True' name='HandheldFriendly' />

        <meta name="format-detection" content="telephone=no"/>
        <meta name="format-detection" content="address=no"/>