The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
Christian J
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Terminator
post 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)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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 .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Themeaxe
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:56 AM