The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Can someone help me make this website responsive?, Responsive website
FigNeuton
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Themeaxe
post Jul 18 2016, 07:58 AM
Post #2


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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th April 2024 - 10:07 PM