Highlighted

How can I convert my website to be a responsive site

Participant ,
Feb 24, 2018

Copy link to clipboard

Copied

I would like to make my site responsive or at least make any new pages responsive as I doubt I'll be able to make the changes to the entire site as it seems to me (at this stage of my knowledge anyway) to be too large a task (it has 1,491 files) so I will content myself with just future pages that I add being responsive.  It's only a hobby site .So I have begun by creating a fresh page from the Bootstrap responsive template in DWCC18.

I then remove elements from that template page that I don't need (buttons, menu etc) and then inserted my text and images from the old non-responsive copy.  You can see the non-responsive page http://ancestry.higgsy.co.uk/binning_harry_ernest_monty.php and my attempt to replicate it as responsive here http://v36.ancestry.higgsy.co.uk/binning_harry_ernest_monty.php,

I have many questions but I'll start with the header image - how can I centralise it?  I have my own CSS file so I know how to over-ride the Bootstrap css by adding my rules into it.  Of course it may be that this whole approach is not practical.  If that's the case I'd welcome suggestions on the best way to build these responsive pages.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

If you're going to use Bootstrap, use it for everything.  It's much more than a layout.   In this example, I used Bootstrap for layout and the responsive navbar with dropdowns across the top.  In smaller devices, it collapses to a hamburger menu.

Desktop:

Mobile:

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Layout</title>

<meta name="description" content="A site for recording the family tree of the higgs family from Holborn London UK"/>

<meta name="keywords" content="ancestry, binning, higgs, peterson, rockliffe, frederick higgs, rosina higgs, elizabeth higgs, richard higgs, robert higgs, harry higgs, david higgs, family, ancestry, holborn, london, family tree, amber"/>

<meta name="author" content="David Charles Higgs">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

body { padding-top: 58px; font-size:1.75rem; background-color: lightcyan}

.center-block { float: none }

header img {width:100%}

figcaption {font-style: italic; font-weight: 600;}

/**vertically aligned in medium, large displays**/

@media only screen and (min-width: 768px) {

.sameheight {

   display: table;

   table-layout: fixed

  }

.equal {

   display: table-cell;

   vertical-align: middle;

   float: none;

  }

}

</style>

</head>

<body>

<!--begin responsive navbar-->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

<div class="container-fluid">

<div class="navbar-header"> <a class="navbar-brand" href="index.php"> Higg's Family History </a>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-right">

<li class="active"><a href="#">This Page</a></li>

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">submenu 1-1</a></li>

<li><a href="#">submenu 1-2</a></li>

<li><a href="#">submenu 1-3</a></li>

</ul>

</li>

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">submenu 2-1</a></li>

<li><a href="#">submenu 2-2</a></li>

<li><a href="#">submenu 2-3</a></li>

</ul>

</li>

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">submenu 3-1</a></li>

<li><a href="#">submenu 3-2</a></li>

<li><a href="#">submenu 3-3</a></li>

</ul>

</li>

<li><a href="#">MENU 4</a> </li>

<li><a href="#">MENU 5</a> </li>

<li><a href="#">MENU 6</a></li>

</ul>

</div>

</div>

<!--end top nav-->

</nav>

<!--begin header-->

<header class="container-fluid">

<div class="row">

<img src="http://ancestry.higgsy.co.uk/archive/multiphoto_logo2.jpg" alt="banner image showing some nice pictures"/>

<h1 class="text-center">Harry Ernest &quot;Monty&quot; Binning 1911 - 1990a</h1>

</div>

</header>

<!--begin content-->

<article class="container">

<div class="row sameheight">

<div class="col-md-6 equal">

<figure class="text-center">

<img class="img-thumbnail"  src="http://ancestry.higgsy.co.uk/archive/389_maud_Binning_with_baby_Monty_h600.JPG" alt="...">

<figcaption>Figure Caption goes here...</figcaption>

</figure>

</div>

<div class="col-md-6 equal">

<p> Harry was the son of Ernest Binning.  After his father’s death he ran the picture frame business. In this picture we see Harry in the arms of his mother Maud. Harry was born in the Holborn district in 1911 and married Betty McGrath in the same district in 1932. They had children Bryan in 1933 and Peter in 1937, both born in the Holborn district. A third child, Stephen was a "blue baby" and died shortly after birth. Harry Binning started running the business before the Second World War and continued working in the shop until his death in 1990</p>

</div>

</div>

<div class="row sameheight">

<div class="col-md-6 equal">

<figure class="text-center"><img class="img-thumbnail"  src="http://ancestry.higgsy.co.uk/archive/750_Finsbury_Rangers_Dave_third_from_lef_900w.jpg" alt="image description">

<figcaption>Archive: 750 - [Courtesy of David E Rockliffe]</figcaption>

</figure>

</div>

<div class="col-md-6 equal">

<p> These fine fellows are The Finsbury Rangers football club and we can see many of our wider family members here. First on the left is David (Pop) Rockliffe; Next to him is Ted Rockliffe; Third from the left is David E Rockliffe; Fifth from the left is Albert White; Eighth from the left is Peter Binning; Twelth from the left is John Peterson and finally at the far right is Harry 'Monty' Binning</p>

</div>

</div>

</article>

<hr>

<!--begin footer-->

<footer class="container-fluid">

<div class="row sameheight">

<div class="col-sm-4 equal text-center">

Footer Left side Lorem ipsum dolor sit amet.

</div>

<div class="col-sm-4 equal text-center">

Footer Middle Consectetur adipisicing elit.

</div>

<div class="col-sm-4 equal text-center">

Footer Right side Non odit modi hic fugit corrupti sit, necessitatibus molestias ad consequuntur.

</div>

</div>

</footer>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Views

317

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How can I convert my website to be a responsive site

Participant ,
Feb 24, 2018

Copy link to clipboard

Copied

I would like to make my site responsive or at least make any new pages responsive as I doubt I'll be able to make the changes to the entire site as it seems to me (at this stage of my knowledge anyway) to be too large a task (it has 1,491 files) so I will content myself with just future pages that I add being responsive.  It's only a hobby site .So I have begun by creating a fresh page from the Bootstrap responsive template in DWCC18.

I then remove elements from that template page that I don't need (buttons, menu etc) and then inserted my text and images from the old non-responsive copy.  You can see the non-responsive page http://ancestry.higgsy.co.uk/binning_harry_ernest_monty.php and my attempt to replicate it as responsive here http://v36.ancestry.higgsy.co.uk/binning_harry_ernest_monty.php,

I have many questions but I'll start with the header image - how can I centralise it?  I have my own CSS file so I know how to over-ride the Bootstrap css by adding my rules into it.  Of course it may be that this whole approach is not practical.  If that's the case I'd welcome suggestions on the best way to build these responsive pages.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

If you're going to use Bootstrap, use it for everything.  It's much more than a layout.   In this example, I used Bootstrap for layout and the responsive navbar with dropdowns across the top.  In smaller devices, it collapses to a hamburger menu.

Desktop:

Mobile:

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Layout</title>

<meta name="description" content="A site for recording the family tree of the higgs family from Holborn London UK"/>

<meta name="keywords" content="ancestry, binning, higgs, peterson, rockliffe, frederick higgs, rosina higgs, elizabeth higgs, richard higgs, robert higgs, harry higgs, david higgs, family, ancestry, holborn, london, family tree, amber"/>

<meta name="author" content="David Charles Higgs">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

body { padding-top: 58px; font-size:1.75rem; background-color: lightcyan}

.center-block { float: none }

header img {width:100%}

figcaption {font-style: italic; font-weight: 600;}

/**vertically aligned in medium, large displays**/

@media only screen and (min-width: 768px) {

.sameheight {

   display: table;

   table-layout: fixed

  }

.equal {

   display: table-cell;

   vertical-align: middle;

   float: none;

  }

}

</style>

</head>

<body>

<!--begin responsive navbar-->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

<div class="container-fluid">

<div class="navbar-header"> <a class="navbar-brand" href="index.php"> Higg's Family History </a>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-right">

<li class="active"><a href="#">This Page</a></li>

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">submenu 1-1</a></li>

<li><a href="#">submenu 1-2</a></li>

<li><a href="#">submenu 1-3</a></li>

</ul>

</li>

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">submenu 2-1</a></li>

<li><a href="#">submenu 2-2</a></li>

<li><a href="#">submenu 2-3</a></li>

</ul>

</li>

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">submenu 3-1</a></li>

<li><a href="#">submenu 3-2</a></li>

<li><a href="#">submenu 3-3</a></li>

</ul>

</li>

<li><a href="#">MENU 4</a> </li>

<li><a href="#">MENU 5</a> </li>

<li><a href="#">MENU 6</a></li>

</ul>

</div>

</div>

<!--end top nav-->

</nav>

<!--begin header-->

<header class="container-fluid">

<div class="row">

<img src="http://ancestry.higgsy.co.uk/archive/multiphoto_logo2.jpg" alt="banner image showing some nice pictures"/>

<h1 class="text-center">Harry Ernest &quot;Monty&quot; Binning 1911 - 1990a</h1>

</div>

</header>

<!--begin content-->

<article class="container">

<div class="row sameheight">

<div class="col-md-6 equal">

<figure class="text-center">

<img class="img-thumbnail"  src="http://ancestry.higgsy.co.uk/archive/389_maud_Binning_with_baby_Monty_h600.JPG" alt="...">

<figcaption>Figure Caption goes here...</figcaption>

</figure>

</div>

<div class="col-md-6 equal">

<p> Harry was the son of Ernest Binning.  After his father’s death he ran the picture frame business. In this picture we see Harry in the arms of his mother Maud. Harry was born in the Holborn district in 1911 and married Betty McGrath in the same district in 1932. They had children Bryan in 1933 and Peter in 1937, both born in the Holborn district. A third child, Stephen was a "blue baby" and died shortly after birth. Harry Binning started running the business before the Second World War and continued working in the shop until his death in 1990</p>

</div>

</div>

<div class="row sameheight">

<div class="col-md-6 equal">

<figure class="text-center"><img class="img-thumbnail"  src="http://ancestry.higgsy.co.uk/archive/750_Finsbury_Rangers_Dave_third_from_lef_900w.jpg" alt="image description">

<figcaption>Archive: 750 - [Courtesy of David E Rockliffe]</figcaption>

</figure>

</div>

<div class="col-md-6 equal">

<p> These fine fellows are The Finsbury Rangers football club and we can see many of our wider family members here. First on the left is David (Pop) Rockliffe; Next to him is Ted Rockliffe; Third from the left is David E Rockliffe; Fifth from the left is Albert White; Eighth from the left is Peter Binning; Twelth from the left is John Peterson and finally at the far right is Harry 'Monty' Binning</p>

</div>

</div>

</article>

<hr>

<!--begin footer-->

<footer class="container-fluid">

<div class="row sameheight">

<div class="col-sm-4 equal text-center">

Footer Left side Lorem ipsum dolor sit amet.

</div>

<div class="col-sm-4 equal text-center">

Footer Middle Consectetur adipisicing elit.

</div>

<div class="col-sm-4 equal text-center">

Footer Right side Non odit modi hic fugit corrupti sit, necessitatibus molestias ad consequuntur.

</div>

</div>

</footer>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Views

318

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 24, 2018 0
Adobe Community Professional ,
Feb 24, 2018

Copy link to clipboard

Copied

If you're going to use Bootstrap, use it for everything.  It's much more than a layout.   In this example, I used Bootstrap for layout and the responsive navbar with dropdowns across the top.  In smaller devices, it collapses to a hamburger menu.

Desktop:

Mobile:

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Layout</title>

<meta name="description" content="A site for recording the family tree of the higgs family from Holborn London UK"/>

<meta name="keywords" content="ancestry, binning, higgs, peterson, rockliffe, frederick higgs, rosina higgs, elizabeth higgs, richard higgs, robert higgs, harry higgs, david higgs, family, ancestry, holborn, london, family tree, amber"/>

<meta name="author" content="David Charles Higgs">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

body { padding-top: 58px; font-size:1.75rem; background-color: lightcyan}

.center-block { float: none }

header img {width:100%}

figcaption {font-style: italic; font-weight: 600;}

/**vertically aligned in medium, large displays**/

@media only screen and (min-width: 768px) {

.sameheight {

   display: table;

   table-layout: fixed

  }

.equal {

   display: table-cell;

   vertical-align: middle;

   float: none;

  }

}

</style>

</head>

<body>

<!--begin responsive navbar-->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

<div class="container-fluid">

<div class="navbar-header"> <a class="navbar-brand" href="index.php"> Higg's Family History </a>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-right">

<li class="active"><a href="#">This Page</a></li>

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">submenu 1-1</a></li>

<li><a href="#">submenu 1-2</a></li>

<li><a href="#">submenu 1-3</a></li>

</ul>

</li>

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">submenu 2-1</a></li>

<li><a href="#">submenu 2-2</a></li>

<li><a href="#">submenu 2-3</a></li>

</ul>

</li>

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">submenu 3-1</a></li>

<li><a href="#">submenu 3-2</a></li>

<li><a href="#">submenu 3-3</a></li>

</ul>

</li>

<li><a href="#">MENU 4</a> </li>

<li><a href="#">MENU 5</a> </li>

<li><a href="#">MENU 6</a></li>

</ul>

</div>

</div>

<!--end top nav-->

</nav>

<!--begin header-->

<header class="container-fluid">

<div class="row">

<img src="http://ancestry.higgsy.co.uk/archive/multiphoto_logo2.jpg" alt="banner image showing some nice pictures"/>

<h1 class="text-center">Harry Ernest &quot;Monty&quot; Binning 1911 - 1990a</h1>

</div>

</header>

<!--begin content-->

<article class="container">

<div class="row sameheight">

<div class="col-md-6 equal">

<figure class="text-center">

<img class="img-thumbnail"  src="http://ancestry.higgsy.co.uk/archive/389_maud_Binning_with_baby_Monty_h600.JPG" alt="...">

<figcaption>Figure Caption goes here...</figcaption>

</figure>

</div>

<div class="col-md-6 equal">

<p> Harry was the son of Ernest Binning.  After his father’s death he ran the picture frame business. In this picture we see Harry in the arms of his mother Maud. Harry was born in the Holborn district in 1911 and married Betty McGrath in the same district in 1932. They had children Bryan in 1933 and Peter in 1937, both born in the Holborn district. A third child, Stephen was a "blue baby" and died shortly after birth. Harry Binning started running the business before the Second World War and continued working in the shop until his death in 1990</p>

</div>

</div>

<div class="row sameheight">

<div class="col-md-6 equal">

<figure class="text-center"><img class="img-thumbnail"  src="http://ancestry.higgsy.co.uk/archive/750_Finsbury_Rangers_Dave_third_from_lef_900w.jpg" alt="image description">

<figcaption>Archive: 750 - [Courtesy of David E Rockliffe]</figcaption>

</figure>

</div>

<div class="col-md-6 equal">

<p> These fine fellows are The Finsbury Rangers football club and we can see many of our wider family members here. First on the left is David (Pop) Rockliffe; Next to him is Ted Rockliffe; Third from the left is David E Rockliffe; Fifth from the left is Albert White; Eighth from the left is Peter Binning; Twelth from the left is John Peterson and finally at the far right is Harry 'Monty' Binning</p>

</div>

</div>

</article>

<hr>

<!--begin footer-->

<footer class="container-fluid">

<div class="row sameheight">

<div class="col-sm-4 equal text-center">

Footer Left side Lorem ipsum dolor sit amet.

</div>

<div class="col-sm-4 equal text-center">

Footer Middle Consectetur adipisicing elit.

</div>

<div class="col-sm-4 equal text-center">

Footer Right side Non odit modi hic fugit corrupti sit, necessitatibus molestias ad consequuntur.

</div>

</div>

</footer>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 24, 2018 1
higgsyd LATEST
Participant ,
Feb 25, 2018

Copy link to clipboard

Copied

Nancy, thanks so much for the above code!  It looks good and now I'll have to go and try and understand how it all works.  Please be prepared for further questions on this! thanks again

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 25, 2018 0