Can someone help me make this website responsive?, Responsive website |
Can someone help me make this website responsive?, Responsive website |
FigNeuton |
May 18 2016, 01:36 PM
Post
#1
|
Group: Members Posts: 1 Joined: 18-May 16 Member No.: 24,261 |
This is all of the HTML code I have for this website. I can't figure out how to make it responsive can someone help me/do it for me?
<!doctype html> <html> <head> <!-- <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="Ghall.css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Responsive</title> <!-- <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> --> <link href="css/bootstrap-3.3.4.css" rel="stylesheet" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-12"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">Web Design & Scripting</a></div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="defaultNavbar1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">CodeSchool</a></li> <li><a href="#">Fonts/Tables</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">Frameworks</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="carousel"> <div id="carousel1" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel1" data-slide-to="0" class="active"></li> <li data-target="#carousel1" data-slide-to="1"></li> <li data-target="#carousel1" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"><img src="images/Carousel_Placeholder.png" alt="First slide image" class="center-block"> <div class="carousel-caption"> <h3>First slide Heading</h3> <p>First slide Caption</p> <button type="button" class="btn btn-primary">Learn More</button> </div> </div> <div class="item"><img src="images/Carousel_Placeholder.png" alt="Second slide image" class="center-block"> <div class="carousel-caption"> <h3>Second slide Heading</h3> <p>Second slide Caption</p>s <button type="button" class="btn btn-primary">Learn More</button> </div> </div> <div class="item"><img src="images/Carousel_Placeholder.png" alt="Third slide image" class="center-block"> <div class="carousel-caption"> <h3>Third slide Heading</h3> <p>Third slide Caption</p> <button type="button" class="btn btn-primary">Learn More</button> </div> </div> </div> </div> <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div> </div> </div> <div class="row"> <div class="col-xs-4"> <h3 class="Heading1">Heading</h3> <p class="Info1">Ut dignissim nibh non sem dictum pellentesque. Curabitur hendrerit faucibus vehicula. Sed porta vehicula arcu nec auctor. Etiam luctus neque sed quam rutrum mollis. Sed aliquam, risus sit amet malesuada euismod, nibh diam volutpat enim, sed pellentesque quam nulla rhoncus mi. </p> <button type="button" class="btn btn-default">View Details</button> </div> <div class="col-xs-4"> <h3 class="Heading2">Heading</h3> <p class="Info2">Ut dignissim nibh non sem dictum pellentesque. Curabitur hendrerit faucibus vehicula. Sed porta vehicula arcu nec auctor. Etiam luctus neque sed quam rutrum mollis. Sed aliquam, risus sit amet malesuada euismod, nibh diam volutpat enim, sed pellentesque quam nulla rhoncus mi. </p> <button type="button" class="btn btn-default">View Details</button> </div> <div class="col-xs-4"> <h3 class="Heading3">Heading</h3> <p class="Info3">Ut dignissim nibh non sem dictum pellentesque. Curabitur hendrerit faucibus vehicula. Sed porta vehicula arcu nec auctor. Etiam luctus neque sed quam rutrum mollis. Sed aliquam, risus sit amet malesuada euismod, nibh diam volutpat enim, sed pellentesque quam nulla rhoncus mi. </p> <button type="button" class="btn btn-default">View Details</button> </div> </div> </div> <div class="row2"> <div class="container"> <div class="row"> <div class="col-xs-7"> <h3>First featurette heading.<span class="span1"> It'll blow your mind.</span></h3> <p>Ut dignissim nibh non sem dictum pellentesque. Curabitur hendrerit faucibus vehicula. Sed porta vehicula arcu nec auctor. Etiam luctus neque sed quam rutrum mollis. Sed aliquam, risus sit amet malesuada euismod, nibh diam volutpat enim, sed pellentesque quam nulla rhoncus mi. </p> </div> <div class="col-xs-5"> <img src="imageq.jpg" alt="Brittish chef" class="img-responsive"> </div> </div> </div> </div> <div class="row3"> <div class="container"> <div class="row"> <div class="col-xs-5"> <img src="imageq.jpg" alt="Brittish chef" class="img-responsive"> </div> <div class="col-xs-7"> <h3>Oh yeah, it's that good.<span class="span1"> See for yourself.</span></h3> <p>Ut dignissim nibh non sem dictum pellentesque. Curabitur hendrerit faucibus vehicula. Sed porta vehicula arcu nec auctor. Etiam luctus neque sed quam rutrum mollis. Sed aliquam, risus sit amet malesuada euismod, nibh diam volutpat enim, sed pellentesque quam nulla rhoncus mi. </p> </div> </div> </div> </div> <div class="row4"> <div class="container"> <div class="row"> <div class="col-xs-7"> <h3>And lastly, this one.<span class="span1"> Checkmate.</span></h3> <p>Ut dignissim nibh non sem dictum pellentesque. Curabitur hendrerit faucibus vehicula. Sed porta vehicula arcu nec auctor. Etiam luctus neque sed quam rutrum mollis. Sed aliquam, risus sit amet malesuada euismod, nibh diam volutpat enim, sed pellentesque quam nulla rhoncus mi. </p> </div> <div class="col-xs-5"> <img src="imageq.jpg" alt="Brittish chef" class="img-responsive"> </div> </div> </div> </div> <div class="row5"> <div class="container"> <div class="row"> <div class="col-xs-6"> <p>© 2033 Company, Inc. -Privacy -Terms</p> </div> <div class="Top"> <div class="col-xs-6"> <a href="#">Back to top</a> </div> </div> </div> </div> </div> <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script> <!-- <script src="js/bootstrap.js" type="text/javascript"></script> --> <script src="js/bootstrap-3.3.4.js" type="text/javascript"></script> </body> </html> |
Christian J |
May 18 2016, 02:19 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
Responsiveness is mostly about CSS, but we can't view the external CSS files in the code example above.
|
Terminator |
May 20 2016, 10:19 AM
Post
#3
|
Advanced Member Group: Members Posts: 218 Joined: 19-March 15 Member No.: 22,398 |
Yes you will want to post your CSS on here. With responsive I use max-width for the body vs just width, also width: 100% for textarea, and dont forget about media queries:
CODE @media screen and (max-width: 400px) and (min-width: 320px) |
Frederiek |
May 21 2016, 08:16 AM
Post
#4
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
Have a look at Media Queries, Elastic Design and Liquid Layouts at http://www.d.umn.edu/itss/training/online/webdesign/css.html .
|
Themeaxe |
Jul 18 2016, 07:58 AM
Post
#5
|
Newbie Group: Members Posts: 10 Joined: 18-July 16 Member No.: 24,423 |
Can you provide this code into a .html file? Though from this file navigation code seem wrong. You should check your navigation code.
|
Lo-Fi Version | Time is now: 29th March 2024 - 07:26 PM |