Click here to Skip to main content
12,997,441 members (59,733 online)
Rate this:
Please Sign up or sign in to vote.
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

please open in mobile browser cuz in web browser it's work fine thanks in advance
Posted 29-Sep-12 0:23am
Updated 29-Sep-12 0:38am
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:


<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

'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

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Try putting this to the head of the site

<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"/>

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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170622.1 | Last Updated 29 Sep 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100