Blank space on the right side on phone

Question

I have a problem about the width between monitor screen and phone. However, it's working well on the PC but not working on phone as there are blank space on the right side. The following code are below.

HTML

<div id="home-about">
    <div class="middle-align">
        <h1> ABOUT ME </h1> 
        <p> TESTING TESTING TESTING TESTING TESTING </p>
    </div> 
</div>

CSS

#home-about {
    margin:0 auto;
    clear:both;
    height:880px;
    padding:150px 50px 50px 50px;
    background-color:#d24d57;
    text-align:left;
    line-height:25px;
}

.middle-align {
    width:1200px;
    margin:0 auto;
}

First of all, the colour of #home-about is #d24d57. The color is fully shown on monitor screen but not on the phone.

Here is JSFIDDLE. As you can see JSFIDDLE, Try to scroll right, there are no colour, only white colour. How to fill in #d23d57 as well. Any idea?

score 0 · Answer 1 · answered Sep 06 '14 at 04:43

0

Move width: 1200px to your #home-about:

#home-about {
    margin:0 auto;
    clear:both;
    padding:150px 50px 50px 50px;
    background-color:#d24d57;
    text-align:left;
    line-height:25px;
    width: 1200px;
}

jsFiddle Demo.

answered Sep 06 '14 at 04:43

dashtinejad

6,193
4
28
44

Hello, I just realised that it's working on PC but not working on mobile phone. However, can you check the site on your phone? It's www.anthonywebdeveloper.com. – Anthosiast Sep 06 '14 at 04:52
1

You should make it responsive, the first step is remove all `width: 1200px` and `min-width: 1200px` from your stylesheet. – dashtinejad Sep 06 '14 at 04:59
I have done the first step. What should I do next? However, I have problem with the footer. It shows blank space on the right side again. @Rox – Anthosiast Sep 06 '14 at 05:10

score 0 · Accepted Answer · edited May 23 '17 at 11:51

0

Refer this link for responsive design Responsive layout tutorial? Or you can use Bootstrap for Responsive html development Get-Bootstrap. Hope this help

These suggestions should be a comment but cannot do that cause not got these privilages

edited May 23 '17 at 11:51

Community

1
1

answered Sep 06 '14 at 10:54

Rohit

324
2
9

I know about bootstrap. I'm just having fun to design by myself. Thanks btw. – Anthosiast Sep 06 '14 at 11:30

Blank space on the right side on phone

2 Answers2