CODEWITHSUNDEEP
htmlcss
yesganesh
yesganesh

Reputation: 35

The content is not responsive on mobile devices

Header and footer of my web pages are responsive when viewed on mobile devices, but the content is not. The files used are content.php, index.php and content.css. The normal desktop website displays properly. The code files are below.

The url is http://responsive.kkits.in/index.php

content.php 

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>

    </head>
    <body>
            <div id="content_area">
                <?php echo $content; ?>
            </div>

    </body>
</html>

index.php

<?php
include 'header-basic-light.php';
$title = "Home";
$content = '<img src="images/coffee1.png" class="imgLeft" />
<h3>Title 1</h3>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lectus urna,
    viverra in luctus quis, ullamcorper quis lorem. Vestibulum vulputate pellentesque
    velit, et placerat dolor pulvinar in. Class aptent taciti sociosqu ad litora torquent
    per conubia nostra, per inceptos himenaeos. Sed sit amet velit at purus elementum
    dapibus. Nulla dapibus auctor vulputate. Sed cursus nisi at mauris mollis semper.
    Vestibulum consectetur cursus dui sit amet pretium.
</p>
<img src="images/coffee2.png" class="imgRight"/>
<h3>Title 2</h3>

<p>
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Donec porttitor placerat nunc a consectetur. Ut fermentum eleifend molestie.
    Donec fermentum risus sit amet ante cursus cursus. In hac habitasse platea dictumst.
    Praesent semper ante ut felis molestie aliquet. Nam quis dui a magna molestie blandit
    id et justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
    per inceptos himenaeos. Sed felis mauris, mattis a vulputate a, gravida nec metus.
    Vivamus elit augue, ullamcorper eget scelerisque vitae, tincidunt eget lorem. Curabitur
    id nibh libero, sed pulvinar nisi. Curabitur ultrices, neque in dignissim viverra,
    justo nisl dignissim magna, a tempor eros turpis in diam. Suspendisse potenti. Sed
    tincidunt est ac elit bibendum nec varius ante vestibulum.
</p>

<img src="images/coffee3.png" class="imgLeft" />
<h3>Title 3</h3>
<p>
    In hac habitasse platea dictumst. In purus leo, consequat nec porta a, varius sed
    dui. Nulla placerat mollis tincidunt. Praesent at elit mi, a posuere quam. Suspendisse
    vel leo eu orci lacinia vestibulum. Fusce vel sem fermentum lectus tempus ultrices.
    Morbi arcu sem, rhoncus sit amet rutrum eget, interdum sit amet leo. Ut mattis lorem
    vitae dolor tincidunt mattis a lacinia velit. Cras sed nibh at urna imperdiet laoreet
    quis a risus.
</p>';

include 'content.php';
include 'footer-distributed-with-contact-form.php';
?>

content.css

body
{
    font-family: lucida grande ,tahoma,verdana,arial,sans-serif;
    background-color: #e9e9e9;
}

body p
{
    font-size: 0.8em; /*0.8 previous */
    line-height: 1.28;
}

/*#wrapper
{
    width: 1080px;
    background-color: white;
    margin: 0 auto;
    padding: 10px;
    border: 5px solid #dedede;
}*/

#content_area
{
    float: center; /* old left */
    text-align: justify;  
    font-size: 2.2em; /* new line */
    width: 1080px; /*new line added*/ 
/*    width: 750px;  previous  */

   margin: 20px 0 20px 0;      
    margin: 0 auto; /* New line added */
    padding: 10px;
}

.imgLeft
{
    float: left;
    width: 240px;
    height: 150px;
    margin: 0px 10px 10px 0;
    padding: 10px;
}

.imgRight
{
    float: right;
    width: 200px;
    height: 250px;
    margin: 0px 0 10px 10px;
    padding: 10px;
}

Upvotes: 0

Views: 127

Answers (2)

Jean-Luc Aubert
Jean-Luc Aubert

Reputation: 620

You can also use media queries to make your container adaptative :

@media screen and (min-width: 1180px) {
    /* Code your specific rules for this definition */
}
@media screen... {
    /* Other stuff for other definition */
}

Upvotes: 0

toffler
toffler

Reputation: 1233

Your content_area is set to a fixed width (1080px) if you just want to make it responsive, give it a max-width of 1080px and a width of 100%.

#content_area {
    float: center;
    text-align: justify;
    font-size: 2.2em;
    max-width: 1080px;
    width: 100%;
    margin: 20px 0 20px 0;
    margin: 0 auto;
    padding: 10px;
}

It's still not beautiful, but responsive ;-)

Upvotes: 1

Related Questions