Bootstrap Image

Question

davy_yg 2 Posting Whiz

8 Years Ago

Hello,

Please cek this website: http://www.innovation.web.id/One/about.php

Cek the grey bar (<img id="bg2-6" src="circle/Borderwhite.jpg" alt="cloud"/>)

I wonder why the grey bar and its images do not adjust well in android? What should I change to make it looks good in android?

about.php

<div id="row">
<div class="col-sm-12 col-xs-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>

                <article id="about">                 
                </article>
            </div> 

            <!-- Parallax foreground -->
            <div id="parallax-bg3">
                <img id="bg2-1" src="circle/circle1.png" alt="cloud"/>
                <img id="bg2-2" src="circle/circle2.png" alt="cloud"/>
                <img id="bg2-3" src="circle/circle3.png" alt="cloud"/>
                <img id="bg2-4" src="circle/circle4.png" alt="cloud"/>   
                <img id="bg2-5" src="circle/Borderwhite.jpg" alt="cloud"/>
                <img id="bg2-6" src="circle/Borderwhite.jpg" alt="cloud"/>               
            </div>



            <!-- Parallax  background clouds -->
            <div id="parallax-bg1">
                <img id="bg1-1" src="circle/laptop.png" alt="cloud"/>                
            </div>

</div>
</div>   

</div>
</div>

android bootstrap web-design

2 Contributors
3 Replies
246 Views
2 Weeks Discussion Span
Latest Post 8 Years Ago Latest Post by davy_yg

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.

janetriever · Answer 1 · 2015-08-12T05:37:56+00:00

You should use CSS to make a grey background instead of using an image

davy_yg 2 Posting Whiz · Answer 2 · 2015-08-14T07:19:07+00:00

http://www.innovation.web.id/One/about.php

about.php

<div id="row">
<div class="col-sm-12 col-xs-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>

                <article id="about">                 
                </article>
            </div> 

            <!-- Parallax foreground -->

            <div id="parallax-bg3">
                <div style="z-index: 2;"><img id="bg2-1" src="circle/circle1.png" alt="cloud"/></div>
                <div style="z-index: 2;"><img id="bg2-2" src="circle/circle2.png" alt="cloud"/></div>
                <div style="z-index: 2;"><img id="bg2-3" src="circle/circle3.png" alt="cloud"/></div>
                <div style="z-index: 2;"><img id="bg2-4" src="circle/circle4.png" alt="cloud"/></div>
                <div style="margin: 300px 0 0 -300px; height: 100px; width: 900px; background-color: #989898; position: absolute;"></div>
                <div style="margin: 320px 0 0 10px; height: 100px; width: 900px; background-color: #989898; position: absolute;"></div> 
                <!--
                <img id="bg2-5" src="circle/Borderwhite.jpg" alt="cloud"/>
                <img id="bg2-6" src="circle/Borderwhite.jpg" alt="cloud"/>
                -->     
            </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>

Hallo, how to place the circle pictures upfront?

davy_yg 2 Posting Whiz · Answer 3 · 2015-08-27T18:15:12+00:00

Hello,

I would like to place bootstrap in the circle and make the circle able to organize the 4 in a row horizontal into vertical whenever the screen size change with cell phone screen.

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>

Is that possible?