Member Avatar for davy_yg

Hello,

I am trying to create a horizontal stretch website:

I thought width: auto already scretch the width horizontal fully. but this is not the case. I wonder why?

about.php

<div id="testimonial"><br> <div id="bounceInRight"> <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> </center> <img src="Images/About/left.jpg"> <img src="Images/About/testperson.jpg"> <img src="Images/About/right.jpg"> <center>Lorem ipsum dolor sit</center> </div> </div> </center> <p>Hallo</p> <div class="step-down"> <p>Hallo</p> </div> <?php include('footer.php'); ?>

style.css

#testimonial { width: auto; background-color: red;}

#footer { padding: 30px; width: auto; background-color: black; color: white; height: 220px;}
  • 3 Contributors
  • 5 Replies
  • 148 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by gentlemedia
Member Avatar for pritaeas

Width auto uses the (inherited) width of the parent container. Use the DOM/debugger tools to find which parent has a specific width set.

Member Avatar for davy_yg

ok, I get that part done.

What about this one:

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

I wonder why the bootstrap only works in normal pc size, but when I try to view it in handphone (by using Google Chrome - Samsung Galaxy S4) The blog moves differently compare to the pc. It seems like the bootstrap does not works out correctly.

Member Avatar for gentlemedia

You're using bootstrap responsive, but you drop in divisions (divs) with fixed (pixel based) widths and heights (with inline styles, which is also a terrible thing to do).

One of the fundamental principals of Responsive Web Design is fluid (percentage based) widths.

Edited by gentlemedia
Member Avatar for davy_yg

Is this what you mean?

"One of the fundamental principals of Responsive Web Design is fluid (percentage based) widths."

blog_bootstrap.php

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

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

<link  href="css/bootstrap.min.css"  rel="stylesheet"> 
<link  href="css/bootstrap-responsive.css"  rel="stylesheet"> 

<body>

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


<br><br><br>
<center><h1><b>Our Blog</b></h1></center>


<br><br><br><center>

<div class="row">
<div class="span6">
<!-- 400px -->
<div style="padding: 10px; background: white;">
<div style="width:90%; height:90%; background:grey; z-index: -1; text-align: left; padding: 20px; "><br><img src="Images/Blog/blog1.jpg">

<br><br>
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. <div id="readlink"><a href="blog-article.php">Read More .. </a></div>

</div>
</div>
</div>


<div class="span6">

<div style="padding: 10px; background: white;">
<div style="width:90%; height:90%; background:grey; z-index: -1; text-align: left; padding: 20px;"><br><img src="Images/Blog/blog2.jpg">

<br><br>
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.  <div id="readlink"><a href="blog-article2.php">Read More .. </a></div> 

</div>
</div>
</div>

</div>
<br>

<div class="row">
<div class="span6">
<!-- width:400px; height: 430px; -->
<div style="padding: 10px; background: white;">
<div style="width:90%; height:90%; width:400px; height: 430px; background:grey; z-index: -1; text-align: left; padding: 20px;"><br><img src="Images/Blog/blog3.jpg">

<br><br>
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.  <div id="readlink"><a href="blog-article3.php">Read More .. </a></div>  

</div>
</div>
</div>

<br>

<div class="span6">

<div style="padding: 10px; background: white;">
<div style="width:90%; height:90%; width:400px; height: 430px; background:grey; z-index: -1; text-align: left; padding: 20px;"><br><img src="Images/Blog/blog4.jpg">

<br><br>
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. <div id="readlink"><a href="blog-article4.php">Read More .. </a></div> 

</div>
</div>
</div>
</div>

</center>

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

<center>

<div style="font-family: Arial;">
<h1><b>Please Subscribe our newsletter</b></h1><br>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,<br> sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<br><br>


<input type="text" name="email"><input id="submitbutton" type="submit" value="Email">
</center>

<br><br>
<center>
<img src="Images/Blog/twitter.jpg"><br>
<img src="Images/Blog/cusor.jpg">
</center>
<br><br><br><br>

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



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



</body>
</html>

The result remains the same. I cannot see the box moves fluidly in mobile phone view through google crome pc (Samsung Galaxy S4).

Member Avatar for gentlemedia

Diafol gave you already the advise to start learnng HTML & CSS, because you reaaly have to. There are too many things wrong in that HTML of yours. Learn to walk first, before you start running. If you don't understand the basics, you'll keep hitting wall after wall after wall!

http://learn.shayhowe.com/html-css/

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.