Android horizontal screen

Question

davy_yg 2 Posting Whiz

9 Years Ago

Hello,

Can anyone help me cek this code? I find it strange that when I open my website on an android web browser. The website appears differently. It does not fit the whole horizontal screen as I expect it.

http://responsivetest.net/#u=www.innovation.web.id/One|908|948|2

about.php

<!DOCTYPE html>
<html>
<head> 
<title>About</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1">  

   <link rel="stylesheet" type="text/css" href="css/style.css">
   <link rel="stylesheet" type="text/css" href="css/animate2.css">

   <link rel="stylesheet" media="all" href="css/main.css" />
   <script src="js/modernizr.custom.37797.js"></script> 

   <link rel="stylesheet" href="bootstrap-3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" href="bootstrap-3.3.5/css/custom.css">
   <script src="bootstrap-3.3.5/js/jquery.min.js"></script>
   <script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>

   <!-- Grab Google CDN's jQuery. fall back to local if necessary --> 
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
   <script>!window.jQuery && document.write('<script src="/js/jquery-1.6.1.min.js"><\/script>')</script>
   <script src="js/parallax.js"></script>

</head>



<body>


<?php include('nav.php');  ?>


<br><br><br><br>

<div class="row">

<div class="col-xs-12 col-sm-6">

   <div id="aboutimage"><br><img src="Images/About/person.jpg" alt="person"></div>

</div>

<div class="col-xs-12 col-sm-6">

<div id="about">

   <br><br>
<div id="bounce">

    <p><b>ABOUT</b></p>
    <br>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>


</div>

</div>

</div>

<br><br><br>



<br><br><br>
<!-- <img src="Images/About/benchmarks.jpg"> -->
<br><br><br><br><br><br><br><br>

<br>

<div id="nextrow">

<div class="row">

<div class="col-xs-12 col-sm-6">

   <div id="paragraph1">
    <p><b>WHO WE ARE</b></p>

   <br>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>

   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>

   </div>


</div>


<br>

<div class="col-xs-12 col-sm-6">

   <div id="paragraph2">

   <p><b>WHAT WE DO</b></p>

   <br>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>

   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>

   </div>   

</div>

</div>

</div>   

</div>



<div id="row">
<div class="col-xs-12 col-sm-12">    

<div style="margin-top: 600px; position: relative;"> 
<div id="wrapper">


            <header id="branding">
                <h1></h1>
            </header>

            <nav id="primary">
                <ul>             
                </ul>
            </nav>


            <div id="content">

                <article id="manned-flight">
                </article>

                <article id="frameless-parachute">               
                </article>

                <article id="english-channel">                   
                </article>

            </div> 

            <!-- Parallax foreground -->

            <div id="parallax-bg3">

                <div class="row">

                <!-- <div style="z-index: 2;"> -->
                <div class="col-sm-3"><img id="bg2-1" src="circle/circle1.png" alt="cloud"/></div>
                <!-- </div> -->

                <!-- <div style="z-index: 2;"> -->
                <div class="col-sm-3"><img id="bg2-2" src="circle/circle2.png" alt="cloud"/></div>
                <!-- </div> -->

                <!-- <div style="z-index: 2;"> -->
                <div class="col-sm-3"><img id="bg2-3" src="circle/circle3.png" alt="cloud"/></div>
                <!-- </div> -->

                <!-- <div style="z-index: 2;"> -->
                <div class="col-sm-3">
                <img id="bg2-4" src="circle/circle4.png" alt="cloud"/></div>
                <!-- </div> --> 

                </div>


                <div style="margin: 300px 0 0 -300px; height: 100px; width: 1000px; background-color: #989898; position: absolute;">
                <div style="margin: 320px 0 0 10px; height: 100px; width: 1000px; background-color: #989898; position: absolute;"> 

                <!--
                <img id="bg2-5" src="circle/Borderwhite.jpg" alt="cloud"/>
                <img id="bg2-6" src="circle/Borderwhite.jpg" alt="cloud"/>
                -->     
            </div>
            </div>


            <!-- Parallax  background clouds --> 
            <div id="parallax-bg1">

                <!--
                <img id="bg1-1" src="circle/laptop.png" alt="cloud"/> --> 

                <div style="margin: 800px 0 0 180px; height: 200px; width: 1100px; background-color: #cdcbc5;">  
                </div>
            </div>



</div>   

</div>
</div>

</div>  


<br>

<div class="row">
<div class="col-xs-12">

<div style="margin-top: 300px;"></div>
<div id="testimonial"><br>

   <div id="bounceInRight">

   <div style="text-align: center">
   <div id="text-align=center"><b>TESTIMONIAL</b><br><br>
   Lorem ipsum dolor sit amet, euismod consectetuer adipiscing<br> elit, sed diam nonummy nibh euismod tincidunt<br> ut laoreet dolore magna aliquam erat volutpat.<br><br>


   <img src="Images/About/left.jpg" alt="leftarrow">
   <img src="Images/About/testperson.jpg" alt="person">
   <img src="Images/About/right.jpg" alt="rightarrow">

   <br>
   Lorem ipsum dolor sit</div>

   </div>
   </div>

</div>

</div>
</div>


<?php include('footer.php'); ?>


</body>

</html>

android-development web-design

2 Contributors
6 Replies
202 Views
2 Days Discussion Span
Latest Post 9 Years Ago Latest Post by davy_yg

diafol

9 Years Ago

br br br again?

diafol

9 Years Ago

Oh brother. I discussed the matter of repeat breaks with you on numerous occasions and I've reasoned with you about using multiple instances of the same classed elements, stating do NOT do this. For any screen width that doesn't quite work, you can look at your grid column widths or you could if unable to rectify, create an additional breakpoint between xs and sm and maybe caĺl it ms (more small) or whatever you want.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

davy_yg 2 Posting Whiz · Answer 1 · 2015-09-01T05:08:44+00:00

Any clue how to fix the screen size in android screen?

Also, I try to replace <br> with:

about.php

   <style>

    #space {
        height: 100px;
    }   

    </style>

    <div id="space"></div>

Okay, if I define #space with each vertical space if I want to create a new space is it posible to use #space repeatedly?

Thanks in advance.

davy_yg 2 Posting Whiz · Answer 2 · 2015-09-02T07:03:01+00:00

What do you mean by creating additional breakpoint between xs and sm and maybe ca? Like how?

If I am not allowed to use the same classed elements repeatedly do I have to create many classes for each vertical space?

diafol · Answer 3 · 2015-09-02T09:02:12+00:00

ca?l = "call" - sorry my fault - typo.

Your vertical spaces should be standardized IMO. Just like your grid If you have main sections (divs), you could apply a custom margin-top (as well as other properties) to them, possibly using the rem scale instead of static pixels.

For fluid-fixed / responsive widths, bootstrap gives you 3 main breakpoints (4 sizes) : xs, sm, md and lg. You can investigate how these are set up in the raw css files or the SASS (or LESS) files. If you think you need another size (breakpoint) between xs and sm, you can add this into the css files or apply new rules in the SASS files - whichever you're using. You'd need to come up with a new prefix - I suggested 'ms' - but it could be anything you want.

However, it may be that you simply need to change the number of column units for certain elements at different 'sizes', which would be a much simpler solution. Breakpoints can only provide a rough approximation at certain screen sizes - so you need to experiment from the smallest screen size (around 320px and up beyond the md/lg breakpoint) - you can usually do this be resizing the browser window.

davy_yg 2 Posting Whiz · Answer 4 · 2015-09-02T11:31:21+00:00

about.php

<div style="margin: 600px 0 0 -1200px; z-index: -99;">
            <img id="bg1-1" src="circle/laptop.png" alt="cloud"/> 
</div>

Hello,

I would like to place the laptop on the backscreen. Even the z-index cannot move my laptop to the backscreen. and the margin cannot moves my laptop to the left.

Any clue how to change the style so that you can shift to the picture to the left?