Skip to main content
G
gregjb
Known Participant
April 1, 2020
Answered

Old code, need help

  • April 1, 2020
  • 2 replies
  • 1380 views

I built this site many years ago and have been asked to add a donate button. In looking at the code I see an issue which I've been unable to resolve. And out of practice I can barely remember where to start. The site is live so I don't want to damage what is already working and in place.

 

1 )My FB and IG icons float outside of the container when viewed on an iPad. 

 

2) When that is resolved I'd like to add the GoFundMe donate button to the left of these social icons.

 

I'd appreciate if someone can help me clean up the code and fix the issue as well as a little guidance as to how to code this to position the GFM button properly.

Many thanks. HTML and CSS attached.
http://basso56.com 

 

<div class="gridContainer clearfix">
<header class="fluid header">
            <section class="fluid logo">
                <a  href="index.html"><img alt="Basso56 Italian Cuisine" src="/images/logo.png"></a>
            </section>

    <section class="fluid address">
      <h3>234 West 56th Street • New York, NY 10019 • <a href=
                "tel:+12122652610">T. 212.265.2610</a> • F.
        212.265.2612<br></h3>
      <h4><a href="https://www.opentable.com/r/basso-56-reservations-new-york?restref=225301&lang=en">RESERVATIONS</a>

      </h4>
      </section>

            <section class="fluid MobileAddress">
                <h3>234 West 56th Street<br>New York, NY 10019<br><a href=
                "tel:+12122652610">
                T. 212.265.2610</a> • F. 212.265.2612<br></h3>

                <h4><a href="https://www.opentable.com/r/basso-56-reservations-new-york?restref=225301&lang=en">RESERVATIONS</a>

                </h4>
            </section>
</header>

<ul class="fluid fluidList MobileNav hide_desktop">
		
	
	<li class="fluid navItem"><a href="about.html">About</a>
   </li>
  
  	<li class="fluid navItem"><a href>Menu</a>
  		<ul class="fluid fluidList subNav">
           <li class="fluid subNavItem"><a href="lunch.html">lunch</a></li>
			<li class="fluid subNavItem"><a href="dinner.html">dinner</a></li>
		  <li class="fluid subNavItem"><a href="dolci.html">dolci</a></li>
       </ul>
   </li>
     	<li class="fluid navItem"><a href>Wine list</a>
  		<ul class="fluid fluidList subNav">
           <li class="fluid subNavItem"><a href="wine.html">wine list</a></li>
			<li class="fluid subNavItem"><a href="spirits.html">spirits</a></li>
		  <li class="fluid subNavItem"><a href="digestivi.html">digestivi</a></li>
       </ul>
   </li>
  	
    <li class="fluid navItem"><a href="reviews.html">Reviews</a>
  		<ul class="fluid fluidList subNav">
           <li class="fluid subNavItem"><a href="reviews.html">press/media</a></li>
       </ul>
   </li>
  
  <li class="fluid navItem"><a href="contact.html">Contact</a>
  		<ul class="fluid fluidList subNav">
			<li class="fluid subNavItem"><a href="reservations.html">reservations</a></li>
       			
		</ul>
  </li>
</ul> 

        <div class="fluid" id="navbar">
            <ul>
                <li>
                    <a href="about.html">about</a>
                </li>

                <li>
                    <a href>MENU</a>

                    <ul>
                        <li><a href="lunch.html">lunch</a></li>

                        <li><a href="dinner.html">dinner</a></li>

                        <li><a href="dolci.html">dolci</a></li>
                    </ul>
                </li>
                <li>
                    <a href>WINE LIST</a>

                    <ul>
                        <li><a href="wine.html">wine list</a></li>

                        <li><a href="spirits.html">spirits</a></li>

                        <li><a href="digestivi.html">digestivi</a></li>
                    </ul>
                </li>

                <li>
                    <a href="reviews.html">REVIEWS</a>

                    <ul>
                        <li><a href="reviews.html">press/media</a></li>
                    </ul>
                </li>

                <li>
                    <a href="contact.html">CONTACT/HOURS</a>

                    <ul>
                        <li><a href="reservations.html">reservations</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <section class="fluid Content"><!-- TemplateBeginEditable name="Content" -->

        <!-- TemplateEndEditable --></section>

        <footer class="fluid footer">
            <section class="fluid footerL">
                <img alt="" src="/images/quote2.png">
            </section>

            
            
                        <section class="fluid footerSocial zeroMargin_desktop">
                <a href="https://www.facebook.com/basso56NYC/"><img alt="facebook"  border="0" src="/images/facebook-basso56.png"></a><a href="https://www.instagram.com/basso56_nyc/"><img alt="instagram" border="0" src="/images/instagram-basso56.png"></a>
            </section>
            
            
            
            
        </footer>

        <footer class="fluid copyright zeroMargin_desktop">
            <section class="fluid copyrightL">
              <h5>Basso56 ©2020 All Rights Reserved.</h5>
            </section>

            <section class="fluid copyrightR zeroMargin_desktop">
                <h5>Site created by <a href=
                "http://www.clementinebranding.com/main/">clementine
                branding</a></h5>
            </section>
        </footer>
    </div>

 

  @charset "UTF-8";
  /* Simple fluid media
	 Note: Fluid media requires that you remove the media's height and width attributes from the HTML
	 http://www.alistapart.com/articles/fluid-images/ 
  */
  img, object, embed, video {
	  max-width: 100%;
  }
  
  /* IE 6 does not support max-width so default to width 100% */
  .ie6 img {
	  width:100%;
  }
  
  /*
	  Dreamweaver Fluid Grid Properties
	  ----------------------------------
	  dw-num-cols-mobile:		4;
	  dw-num-cols-tablet:		8;
	  dw-num-cols-desktop:	12;
	  dw-gutter-percentage:	25;
	  
	  Inspiration from "Responsive Web Design" by Ethan Marcotte 
	  http://www.alistapart.com/articles/responsive-web-design
	  
	  and Golden Grid System by Joni Korpi
	  http://goldengridsystem.com/
  */
  
  .fluid {
	  clear: both;
	  margin-left: 0;
	  width: 100%;
	  float: left;
	  display: block;
  }
  
  .fluidList {
	  list-style:none;
	  list-style-image:none;
	  margin:0;
	  padding:0;        
  }
  
  /* Mobile Layout: 480px and below. */

  .gridContainer {
	  margin-left: auto;
	  margin-right: auto;
	  width: 86.45%;
	  padding-left: 2.275%;
	  padding-right: 2.275%;
	  clear: none;
	  float: none;
	  background-image: url(/images/background_body.jpg);
  }
  
  p { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-style: normal;
	  font-weight: 400;
	  font-size: .9em;
	  line-height:1.25em;
  }
  h1 {
  }
  
  h2 {color: #676027;
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-style: italic;
	  font-weight: 400;
	  font-size: 1.1em;
	  margin: 0;
	  line-height: 1em;
	  vertical-align: bottom;
  }
  
  h3 {
	  color: #676027;
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-style: normal;
	  font-weight: 400;
	  text-transform: uppercase;
	  font-size: .7em;
	  letter-spacing: .1em;
	  margin: 0;
	  line-height: 2em;
	  vertical-align: bottom;
  }
  
  h4 {
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  color: #676027;
	  font-style: normal;
	  font-weight: 500;
	  line-height: 1em;
	  letter-spacing: .25em;
	  font-size: 12px;
  }
  
  h5 {
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  color: #676027;
	  font-style: normal;
	  font-weight: 400;
	  letter-spacing: .2em;
	  font-size: 8px;
  /* [disabled]text-align: left; */
	  text-transform: uppercase;
  }
  .menu h4{ 
	  line-height: 0em;
	  letter-spacing: .0em;
	  margin-top:1%;
	  margin-bottom:1%;
  }
  
  
  .Text {
	  width: 94%;
	  display: block;
	  margin-top: 2%;
	  margin-right: 2%;
	  margin-bottom: 2%;
	  margin-left: 2%;
  }
  
  a:link, a:visited {
	  text-decoration: none;
	  text-transform: none;
	  color: #676027;
  }
  
  a:hover{
	  color: #000;
  }
  
  
  .header {
	  width: 100%;
	  margin-top: 2em;
	  border-bottom: 2pt solid #ECAA9D;
	  border-spacing: 0 0;
	  margin-bottom: 2em;
  }
  
  .logo {
	  width: 100%;
	  margin: 0;
  }
  
  .logo img {
	  max-width: 90%;
	  display: block;
	  margin-top: 0;
	  margin-right: auto;
	  margin-left: auto;
	  margin-bottom: 2em;
	  padding-bottom: 10px;
  }
  .address {display:none;
		  width: 60%;
		  margin-left: 1.6949%;
		  clear: none;
		  text-align: right;
		  float: right;
	  }
  
  .MobileAddress h3 {
	  text-align: center;
	  font-size: .8em;
  }
  
  .MobileAddress h4 {
	  text-align: center;
  }
  
  /*vertical nav */
  
  #navbar {
	  display:none;
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-size:90%;
	  margin-left: auto;
	  margin-right: auto;
	  width:  675px;
	  float:none;
  }
  
  
  #navbar ul { list-style-type: none; margin: 0; padding: 0; }
  #navbar li { float: left; } 
  #navbar li li { clear: left; display: none; }
  #navbar li:hover li { display: block; }
  #navbar li:hover a {}
  #navbar li a { padding: 10px; display: block; text-decoration: none; }
  #navbar li a:hover {}
  #navbar li {
	  list-style: none;
	  float: left;
	  letter-spacing:1px}
  
  #navbar li a {
	  display: block;
	  padding: 0 1.75em 0 1.75em;
	  text-transform: uppercase;
	  text-decoration: none;
	  color: #676027;
	  }
  
  #navbar li a:hover {
	  color: #000; }
	  
  #navbar li ul {
	  display: none;  }
  
  #navbar li:hover ul, #navbar li.hover ul {
  position:absolute;
  display:block;
	  width: 100%;
	  margin: 0;
	  padding-left: 3px;
	  font-size:90%;
	  letter-spacing: 0px;
	  }
  
  #navbar li:hover li, #navbar li.hover li {
	  float: left; }
  
  #navbar li:hover li a, #navbar li.hover li a {
	  color: #676027;
	  text-transform: none;
  }
  
  #navbar li li a:hover {
	  color: #000;
  }
	  
  #navbar li li ul a {
	  display: none;  }
	  
  #navbar li li ul a:hover {
	  position: absolute;
	  display: block;
	  width: 100%;
	  margin: 0;
	  padding: 0;
  }
  /* horizontal nav
  
  #navbar {
	  display:none;
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-size:90%;
	  margin-left: auto;
	  margin-right: auto;
	  width:  550px;
	  float:none;
  }
  
  #navbar li {
	  list-style: none;
	  float: left;
	  letter-spacing:1px}
  
  #navbar li a {
	  display: block;
	  padding: 0 2em 0 2em;
	  text-transform: uppercase;
	  text-decoration: none;
	  color: #676027;
	  }
  
  #navbar li a:hover {
	  color: #000; }
	  
  #navbar li ul {
	  display: none;  }
  
  #navbar li:hover ul, #navbar li.hover ul {
  position:absolute;
  display:block;
	  width: 100%;
	  margin: 0;
	  padding: 0;
	  font-size:90%;
	  letter-spacing: 0px;
	  }
  
  #navbar li:hover li, #navbar li.hover li {
	  float: left; }
  
  #navbar li:hover li a, #navbar li.hover li a {
	  color: #676027;
	  text-transform: none;
  }
  
  #navbar li li a:hover {
	  color: #000;
  }
	  
  #navbar li li ul a {
	  display: none;  }
	  
  #navbar li li ul a:hover {
	  position: absolute;
	  display: block;
	  width: 100%;
	  margin: 0;
	  padding: 0;
  
	  }*/
  
  .menu{width: 94%;
		  margin-left: 2%;}
  .menu p{margin-top: 0;}
  .menu h2{
	  color: #676027;
	  font-weight: 400;
	  text-transform: uppercase;
	  font-size: 1.2em;
	  letter-spacing: .1em;
	  line-height: 2em;
	  font-style:normal;
  }
  
  .menu h3{
	  color: #676027;
	  font-weight: 400;
	  text-transform: uppercase;
	  font-size: 1em;
	  letter-spacing: .1em;
	  line-height: 2em;
	  text-align:left;
	  padding-top:1em;
  }
	  
  .menu h4{
	  color: #676027;
	  font-weight: 400;
	  text-transform: uppercase;
	  font-size: .9em;
	  letter-spacing: .1em;
	  text-align:left;
  }	
  
  .wine{width: 94%;
		  margin-left: 2%;}
		  
  .wine p{margin-top: 0; line-height:1.2em;}
  
  .wine h2{
	  color: #676027;
	  font-weight: 400;
	  text-transform: uppercase;
	  font-size: 1.2em;
	  letter-spacing: .1em;
	  line-height: 2em;
	  font-style:normal;
  }
  
  .wine h3{
	  color: #676027;
	  font-weight: 400;
	  text-transform: uppercase;
	  font-size: 1em;
	  letter-spacing: .1em;
	  line-height: 1em;
	  text-align:left;
	  padding-top:1em;
  }  	  
  .wine h4{
	  color: #676027;
	  font-weight: 400;
	  text-transform: uppercase;
	  font-size: .9em;
	  letter-spacing: .1em;
	  line-height:1em;
	  text-align:left;
  }	
	  /* Slideshow */
	  #slideshow {
		  margin: 0 auto;
		  width: 275px;
	  }
	  
	  .slideshowR {
		  height: 370px;
		  width: 250px;
		  margin: auto;
	  }
	  
	  .slideshowR img {
	  }
	  
	  .slideshowCT {
		  height: 180px;
		  width: 150px;
		  margin: auto;
		  padding-bottom: 10px;
	  }
	  
	  .slideshowCT img {
	  }
	  
	  .slideshowCB {
		  height: 180px;
		  width: 150px;
		  margin: auto;
	  }
	  
	  .slideshowCB img {
	  }
	  
	  .slideshowTL {
		  height: 130px;
		  width: 205px;
		  margin: auto;
		  padding-bottom: 10px;
	  }
	  
	  .slideshowTL img {
	  }
	  
	  .slideshowBL {
		  height: 230px;
		  width: 205px;
		  margin: auto;
	  }
	  
	  .slideshowBL img {
	  }
	  
	#leftCol, #centerCol, #rightCol {
		  display: none;
	  } 
	  #leftCol {
		  width: 205px;
		  float: left;
		  margin: 0;
		  padding: 0;
	  }
	  
	  #centerCol {
		  width: 150px;
	  /* Account for margins + border values */
		  float: left;
		  margin: 0;
		  padding-left: 10px;
	  }
	  
	  #rightCol {
		  width: 250px;
		  float: left;
		  margin: 0;
		  padding-left: 10px;
	  }
	   #rightCol2 {
		  width: 250px;
		  float: left;
		  margin: 0;
		  padding-left: 10px;
	  }
	  #mobSlide {display: block;
	  width: 100%;
  }
  
  .footer {
	  padding-top: 2em;
	  padding-bottom: 2em;
	  margin-top: 2em;
	  border-top: 2pt solid #ECAA9D;
  }
  
  .footerL {
	  width: 100%;
  }
  
  .footerL img {
	  display: block;
	  max-width: 90%;
	  margin: 0 auto;
	  text-align: center;
  }
  
  .footerR {
	  width: 80%;
	  clear: both;
	  margin: 0 auto;
	  float: right;
	  padding-top: 1em;
  }
  
  .footerR img {
	  max-width: 60%;
  }
  
    
	  	  .footerSocial { 
		  width: 100%;
		  margin: 0 auto;
		  text-align:center;
		  padding-top: 1em;
	  }
	  
	  .footerSocial img {
		  max-width: 10%;
	  }
  
  
  .copyright {
	  clear: both;
  }
  
  .copyright a:link {
	  text-transform: uppercase;
	  color: #676027;
  }
  
  .copyrightR a:hover {
	  font-weight: 500;
	  color: #000;
  }
  
  .copyrightR {
	  text-align: center;
	  width: 100%;
  }
  
  .copyrightL {
	  width: 100%;
	  text-align: center;
  }
  
  .Content {
	  padding-top: 4em;
	  padding-bottom: 2em;
	  width: 100%;
  }
#reservationBox {
	display: block;
	margin: 0 auto;
	position: relative;
	width: 170px;
}
  
  .MobileNav {
	  display: block;
	  width: 100%;
  }
  .navItem {
	  display: block;
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-style: normal;
	  letter-spacing: .2em;
	  font-variant: 400;
	  font-size: medium;
	  text-align: center;
	  color: #676027;
	  padding: .5em 0;
  }
  .navItem a {
	  text-transform: uppercase;
  }
  .navItem a:hover {
	  display: block;
	  text-align: center;
	  color: #000;
  }
  
  .subNav ul{
	  display: none;
  }
  .subNavItem {
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-size: small;
	  }
  .subNavItem a{text-transform: none;}
  #contentImgMobile {display:block;}
  
  
  #contentImgDesktop {
	  display: none;
	  width: 50%;
	  float: left;
  }
  #contactInfo {
	  display:none;
	  float: right;
	  width: 45%;
  }
  
  #contactInfoMobile {
	display: block;
	width: 100%;
	text-align: left;
  }
  #contactInfoMobile h2 {margin:0; padding:0;line-height:1em;}
  #contactInfoMobile p {margin:0; padding:0;}

  #contactInfo p{margin:0; padding:0;}

  #contactInfo h2{margin:0; padding:0; line-height:2em;}

  
  #wrap {
	  width: 96%;
	  margin: 0 auto;
  }
  
  
  
  .zeroMargin_mobile {
  margin-left: 0;
  }
  
  .hide_mobile {
  display: none;
  }
.menu h6 {
	text-align: left;
	text-decoration: none;
	font-weight: normal;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	line-height: 1.5em;
	font-style: italic;
	font-size: 0.75em;
}
.menu p {
	line-height: 1.5em;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-style: normal;
	font-size: 1em;
}
.Text img {
	padding-right: 75px;
	padding-bottom: 75px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
  
	  
	  
	  
	  
  /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
  
  @media only screen and (min-width: 481px) {

  .gridContainer {
	  width: 90.675%;
	  padding-left: 1.1625%;
	  padding-right: 1.1625%;
	  clear: none;
	  float: none;
	  margin-left: auto;
  }
	 
	  /* Slideshow */
	  #slideshow {
	  }
		  .footerL img {
		  max-width: 70%;
	  }
	  
	  .footerR {
		  width: 100%;
		  margin: 0 auto;
		  text-align: center;
	  }
	  
	  .footerR img {
		  max-width: 35%;
	  }
	
	  
	  .copyright {
		  width: 100%;
		  clear: both;
		  margin-left: 0;
	  }
  .mobileNav {
  }
  .MobileNav {
  display: block;
  }
  .navItem {
  display: block;
  }
  .subNav {
  }
  .subNavItem {
  }
  #contentImgMobile {display:none;}
  #contentImgDesktop {display:block;}
  
  #contactInfo {
	  display:block;
  }
  
  #contactInfoMobile {
	  display:none;
  }
  
  #mobSlide {
  }
  
  .hide_tablet {
  display: none;
  }
  
  .zeroMargin_tablet {
  margin-left: 0;
  }
#contactInfo h2 {
}
  }
  
  /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
  
  @media only screen and (min-width: 769px) {

  .gridContainer {
	  width: 88.5%;
	  max-width: 1232px;
	  padding-left: 0.75%;
	  padding-right: 0.75%;
	  margin: auto;
	  clear: none;
	  float: none;
	  margin-left: auto;
  }
  
	  h3 {
		  text-align: right;
	  }
	  
	  h4 {
		  text-align: right;
	  }
	  
	  h5 {
		  font-size: 9px;
	  }
	  
	  .header {
		  height: 100%;
	  }
	  .logo {
		  float: left;
		  width: 35%;
	  }
	  
	  .logo img {
		  display: block;
		  max-width: 90%;
		  margin: 0;
		  height: auto;
	  }
	  
	  .address {
		  display: block;
	  }
	  
	  .MobileAddress {
		  display: none;
	  }
	  
	  .footer {
		  padding-top: 2em;
		  padding-bottom: 2em;
		  margin-top: 2em;
		  border-top: 2pt solid #ECAA9D;
	  }
	  
	  .footerL {
		  width: 57.6271%;
		  float: left;
	  }
	  
	  .footerL img {
		  max-width: 70%;
		  margin: 0;
		  text-align: center;
		  color: undefined;
	  }
	  	  
		  .footerSocial { 
		  width: 64px;
		  text-align:right;
		  position:relative;
		  right:-462px;
		  clear: none;
		  padding-top: 10px;
	  }
	  
	  .footerSocial img {
		  max-width: 50%;
	  }
	  .footerR {
		  width: 40.6779%;
		  margin-left: 35.5932%;
		  clear: none;
		  padding-top: 0;
	  }
	  
	  .footerR img {
		  max-width: 45%;
	  }
	  .copyright {
		  width: 100%;
		  margin-left: 1.6949%;
		  clear: both;
	  }
	  .copyrightR {
		  float: right;
		  clear: right;
		  text-align: right;
		  width: 50%;
	  }
	  .copyrightL {
		  float: left;
		  width: 40%;
		  clear: both;
		  text-align: left;
	  }
	 
		 #navbar {
		  display: block;
	  font-size:84%;
	  width:  660px;
	  }
	  .menu{width: 70%;
	  margin-left:15%;}
	  
	  .wine{width: 70%;
	  margin-left:15%;}
	  .wine p{margin-top: 0; line-height:.4em;}
	  #slideshow {
		  width: 625px;
	  }
	  
	  #leftCol {
		  display: block;
	  }
	  
	  #centerCol {
		  display: block;
	  }
	   #rightCol {
		   display:block;
	  }
	   #rightCol2 {display: block;
	  }
	  #mobSlide { display:none;
  }
  .mobileNav {
  }
  .MobileNav {
  }
  .navItem {
  display: block;
  }
  .subNav {
  }
  .subNavItem {
  }
  #contentImgMobile {
	  display:none;
  }
  #contentImgDesktop {
	  display:block;
  }
  #contactInfo {
	display: block;
	text-align: left;
  }
  
  #contactInfoMobile {
	  display:none;
  }
  
  .zeroMargin_desktop {
  margin-left: 0;
  }
  .hide_desktop {
  display: none;
  }
  }

  

    This topic has been closed for replies.
    Correct answer osgood_

    Here is the css and you can see the site as well, it's live. Thanks!

      @charset "UTF-8";
  /* Simple fluid media
	 Note: Fluid media requires that you remove the media's height and width attributes from the HTML
	 http://www.alistapart.com/articles/fluid-images/ 
  */
  img, object, embed, video {
	  max-width: 100%;
  }
  
  /* IE 6 does not support max-width so default to width 100% */
  .ie6 img {
	  width:100%;
  }
  
  /*
	  Dreamweaver Fluid Grid Properties
	  ----------------------------------
	  dw-num-cols-mobile:		4;
	  dw-num-cols-tablet:		8;
	  dw-num-cols-desktop:	12;
	  dw-gutter-percentage:	25;
	  
	  Inspiration from "Responsive Web Design" by Ethan Marcotte 
	  http://www.alistapart.com/articles/responsive-web-design
	  
	  and Golden Grid System by Joni Korpi
	  http://goldengridsystem.com/
  */
  
.gfm-embed {
width: 30%;
}
.footerSocial {
display: flex;
flex-direction: column;
align-items: flex-end;
}

  .fluid {
	  clear: both;
	  margin-left: 0;
	  width: 100%;
	  float: left;
	  display: block;
  }
  
  .fluidList {
	  list-style:none;
	  list-style-image:none;
	  margin:0;
	  padding:0;        
  }
  
  /* Mobile Layout: 480px and below. */
.gfm-embed {
width: 100%;
	padding-top: 10px;
}

  .gridContainer {
	  margin-left: auto;
	  margin-right: auto;
	  width: 86.45%;
	  padding-left: 2.275%;
	  padding-right: 2.275%;
	  clear: none;
	  float: none;
	  background-image: url(/images/background_body.jpg);
  }
  
  p { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-style: normal;
	  font-weight: 400;
	  font-size: .9em;
	  line-height:1.25em;
  }
  h1 {
  }
  
  h2 {color: #676027;
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-style: italic;
	  font-weight: 400;
	  font-size: 1.1em;
	  margin: 0;
	  line-height: 1em;
	  vertical-align: bottom;
  }
  
  h3 {
	  color: #676027;
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-style: normal;
	  font-weight: 400;
	  text-transform: uppercase;
	  font-size: .7em;
	  letter-spacing: .1em;
	  margin: 0;
	  line-height: 2em;
	  vertical-align: bottom;
  }
  
  h4 {
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  color: #676027;
	  font-style: normal;
	  font-weight: 500;
	  line-height: 1em;
	  letter-spacing: .25em;
	  font-size: 12px;
  }
  
  h5 {
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  color: #676027;
	  font-style: normal;
	  font-weight: 400;
	  letter-spacing: .2em;
	  font-size: 8px;
  /* [disabled]text-align: left; */
	  text-transform: uppercase;
  }
  .menu h4{ 
	  line-height: 0em;
	  letter-spacing: .0em;
	  margin-top:1%;
	  margin-bottom:1%;
  }
  
  
  .Text {
	  width: 94%;
	  display: block;
	  margin-top: 2%;
	  margin-right: 2%;
	  margin-bottom: 2%;
	  margin-left: 2%;
  }
  
  a:link, a:visited {
	  text-decoration: none;
	  text-transform: none;
	  color: #676027;
  }
  
  a:hover{
	  color: #000;
  }
  
  
  .header {
	  width: 100%;
	  margin-top: 2em;
	  border-bottom: 2pt solid #ECAA9D;
	  border-spacing: 0 0;
	  margin-bottom: 2em;
  }
  
  .logo {
	  width: 100%;
	  margin: 0;
  }
  
  .logo img {
	  max-width: 90%;
	  display: block;
	  margin-top: 0;
	  margin-right: auto;
	  margin-left: auto;
	  margin-bottom: 2em;
	  padding-bottom: 10px;
  }
  .address {display:none;
		  width: 60%;
		  margin-left: 1.6949%;
		  clear: none;
		  text-align: right;
		  float: right;
	  }
  
  .MobileAddress h3 {
	  text-align: center;
	  font-size: .8em;
  }
  
  .MobileAddress h4 {
	  text-align: center;
  }
  
  /*vertical nav */
  
  #navbar {
	  display:none;
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-size:90%;
	  margin-left: auto;
	  margin-right: auto;
	  width:  675px;
	  float:none;
  }
  
  
  #navbar ul { list-style-type: none; margin: 0; padding: 0; }
  #navbar li { float: left; } 
  #navbar li li { clear: left; display: none; }
  #navbar li:hover li { display: block; }
  #navbar li:hover a {}
  #navbar li a { padding: 10px; display: block; text-decoration: none; }
  #navbar li a:hover {}
  #navbar li {
	  list-style: none;
	  float: left;
	  letter-spacing:1px}
  
  #navbar li a {
	  display: block;
	  padding: 0 1.75em 0 1.75em;
	  text-transform: uppercase;
	  text-decoration: none;
	  color: #676027;
	  }
  
  #navbar li a:hover {
	  color: #000; }
	  
  #navbar li ul {
	  display: none;  }
  
  #navbar li:hover ul, #navbar li.hover ul {
  position:absolute;
  display:block;
	  width: 100%;
	  margin: 0;
	  padding-left: 3px;
	  font-size:90%;
	  letter-spacing: 0px;
	  }
  
  #navbar li:hover li, #navbar li.hover li {
	  float: left; }
  
  #navbar li:hover li a, #navbar li.hover li a {
	  color: #676027;
	  text-transform: none;
  }
  
  #navbar li li a:hover {
	  color: #000;
  }
	  
  #navbar li li ul a {
	  display: none;  }
	  
  #navbar li li ul a:hover {
	  position: absolute;
	  display: block;
	  width: 100%;
	  margin: 0;
	  padding: 0;
  }
  /* horizontal nav
  
  #navbar {
	  display:none;
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-size:90%;
	  margin-left: auto;
	  margin-right: auto;
	  width:  550px;
	  float:none;
  }
  
  #navbar li {
	  list-style: none;
	  float: left;
	  letter-spacing:1px}
  
  #navbar li a {
	  display: block;
	  padding: 0 2em 0 2em;
	  text-transform: uppercase;
	  text-decoration: none;
	  color: #676027;
	  }
  
  #navbar li a:hover {
	  color: #000; }
	  
  #navbar li ul {
	  display: none;  }
  
  #navbar li:hover ul, #navbar li.hover ul {
  position:absolute;
  display:block;
	  width: 100%;
	  margin: 0;
	  padding: 0;
	  font-size:90%;
	  letter-spacing: 0px;
	  }
  
  #navbar li:hover li, #navbar li.hover li {
	  float: left; }
  
  #navbar li:hover li a, #navbar li.hover li a {
	  color: #676027;
	  text-transform: none;
  }
  
  #navbar li li a:hover {
	  color: #000;
  }
	  
  #navbar li li ul a {
	  display: none;  }
	  
  #navbar li li ul a:hover {
	  position: absolute;
	  display: block;
	  width: 100%;
	  margin: 0;
	  padding: 0;
  
	  }*/
  
  .menu{width: 94%;
		  margin-left: 2%;}
  .menu p{margin-top: 0;}
  .menu h2{
	  color: #676027;
	  font-weight: 400;
	  text-transform: uppercase;
	  font-size: 1.2em;
	  letter-spacing: .1em;
	  line-height: 2em;
	  font-style:normal;
  }
  
  .menu h3{
	  color: #676027;
	  font-weight: 400;
	  text-transform: uppercase;
	  font-size: 1em;
	  letter-spacing: .1em;
	  line-height: 2em;
	  text-align:left;
	  padding-top:1em;
  }
	  
  .menu h4{
	  color: #676027;
	  font-weight: 400;
	  text-transform: uppercase;
	  font-size: .9em;
	  letter-spacing: .1em;
	  text-align:left;
  }	
  
  .wine{width: 94%;
		  margin-left: 2%;}
		  
  .wine p{margin-top: 0; line-height:1.2em;}
  
  .wine h2{
	  color: #676027;
	  font-weight: 400;
	  text-transform: uppercase;
	  font-size: 1.2em;
	  letter-spacing: .1em;
	  line-height: 2em;
	  font-style:normal;
  }
  
  .wine h3{
	  color: #676027;
	  font-weight: 400;
	  text-transform: uppercase;
	  font-size: 1em;
	  letter-spacing: .1em;
	  line-height: 1em;
	  text-align:left;
	  padding-top:1em;
  }  	  
  .wine h4{
	  color: #676027;
	  font-weight: 400;
	  text-transform: uppercase;
	  font-size: .9em;
	  letter-spacing: .1em;
	  line-height:1em;
	  text-align:left;
  }	
	  /* Slideshow */
	  #slideshow {
		  margin: 0 auto;
		  width: 275px;
	  }
	  
	  .slideshowR {
		  height: 370px;
		  width: 250px;
		  margin: auto;
	  }
	  
	  .slideshowR img {
	  }
	  
	  .slideshowCT {
		  height: 180px;
		  width: 150px;
		  margin: auto;
		  padding-bottom: 10px;
	  }
	  
	  .slideshowCT img {
	  }
	  
	  .slideshowCB {
		  height: 180px;
		  width: 150px;
		  margin: auto;
	  }
	  
	  .slideshowCB img {
	  }
	  
	  .slideshowTL {
		  height: 130px;
		  width: 205px;
		  margin: auto;
		  padding-bottom: 10px;
	  }
	  
	  .slideshowTL img {
	  }
	  
	  .slideshowBL {
		  height: 230px;
		  width: 205px;
		  margin: auto;
	  }
	  
	  .slideshowBL img {
	  }
	  
	#leftCol, #centerCol, #rightCol {
		  display: none;
	  } 
	  #leftCol {
		  width: 205px;
		  float: left;
		  margin: 0;
		  padding: 0;
	  }
	  
	  #centerCol {
		  width: 150px;
	  /* Account for margins + border values */
		  float: left;
		  margin: 0;
		  padding-left: 10px;
	  }
	  
	  #rightCol {
		  width: 250px;
		  float: left;
		  margin: 0;
		  padding-left: 10px;
	  }
	   #rightCol2 {
		  width: 250px;
		  float: left;
		  margin: 0;
		  padding-left: 10px;
	  }
	  #mobSlide {display: block;
	  width: 100%;
  }
  
  .footer {
	  padding-top: 2em;
	  padding-bottom: 2em;
	  margin-top: 2em;
	  border-top: 2pt solid #ECAA9D;
  }
  
  .footerL {
	  width: 100%;
  }
  
  .footerL img {
	  display: block;
	  max-width: 90%;
	  margin: 0 auto;
	  text-align: center;
  }
  
  .footerR {
	  width: 80%;
	  clear: both;
	  margin: 0 auto;
	  float: right;
	  padding-top: 1em;
  }
  
  .footerR img {
	  max-width: 60%;
  }
  
    
	  	  .footerSocial { 
		  text-align: center;
	  }
	  

  
  
  .copyright {
	  clear: both;
  }
  
  .copyright a:link {
	  text-transform: uppercase;
	  color: #676027;
  }
  
  .copyrightR a:hover {
	  font-weight: 500;
	  color: #000;
  }
  
  .copyrightR {
	  text-align: center;
	  width: 100%;
  }
  
  .copyrightL {
	  width: 100%;
	  text-align: center;
  }
  
  .Content {
	  padding-top: 4em;
	  padding-bottom: 2em;
	  width: 100%;
  }
#reservationBox {
	display: block;
	margin: 0 auto;
	position: relative;
	width: 170px;
}
  
  .MobileNav {
	  display: block;
	  width: 100%;
  }
  .navItem {
	  display: block;
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-style: normal;
	  letter-spacing: .2em;
	  font-variant: 400;
	  font-size: medium;
	  text-align: center;
	  color: #676027;
	  padding: .5em 0;
  }
  .navItem a {
	  text-transform: uppercase;
  }
  .navItem a:hover {
	  display: block;
	  text-align: center;
	  color: #000;
  }
  
  .subNav ul{
	  display: none;
  }
  .subNavItem {
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-size: small;
	  }
  .subNavItem a{text-transform: none;}
  #contentImgMobile {display:block;}
  
  
  #contentImgDesktop {
	  display: none;
	  width: 50%;
	  float: left;
  }
  #contactInfo {
	  display:none;
	  float: right;
	  width: 45%;
  }
  
  #contactInfoMobile {
	display: block;
	width: 100%;
	text-align: left;
  }
  #contactInfoMobile h2 {margin:0; padding:0;line-height:1em;}
  #contactInfoMobile p {margin:0; padding:0;}

  #contactInfo p{margin:0; padding:0;}

  #contactInfo h2{margin:0; padding:0; line-height:2em;}

  
  #wrap {
	  width: 96%;
	  margin: 0 auto;
  }
  
  
  
  .zeroMargin_mobile {
  margin-left: 0;
  }
  
  .hide_mobile {
  display: none;
  }
.menu h6 {
	text-align: left;
	text-decoration: none;
	font-weight: normal;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	line-height: 1.5em;
	font-style: italic;
	font-size: 0.75em;
}
.menu p {
	line-height: 1.5em;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-style: normal;
	font-size: 1em;
}
.Text img {
	padding-right: 75px;
	padding-bottom: 75px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
  
	  

	  
	  
  /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
  
  @media only screen and (min-width: 481px) {

	  .gfm-embed {
width: 30%;
}
  .gridContainer {
	  width: 90.675%;
	  padding-left: 1.1625%;
	  padding-right: 1.1625%;
	  clear: none;
	  float: none;
	  margin-left: auto;
  }
	 
	  /* Slideshow */
	  #slideshow {
	  }
		  .footerL img {
		  max-width: 70%;
	  }
	  
	  .footerR {
		  width: 100%;
		  margin: 0 auto;
		  text-align: center;
	  }
	  
	  .footerR img {
		  max-width: 35%;
	  }
	  
	  
	  .copyright {
		  width: 100%;
		  clear: both;
		  margin-left: 0;
	  }
  .mobileNav {
  }
  .MobileNav {
  display: block;
  }
  .navItem {
  display: block;
  }
  .subNav {
  }
  .subNavItem {
  }
  #contentImgMobile {display:none;}
  #contentImgDesktop {display:block;}
  
  #contactInfo {
	  display:block;
  }
  
  #contactInfoMobile {
	  display:none;
  }
  
  #mobSlide {
  }
  
  .hide_tablet {
  display: none;
  }
  
  .zeroMargin_tablet {
  margin-left: 0;
  }
#contactInfo h2 {
}
  }
  
  /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
  
  @media only screen and (min-width: 769px) {

  .gridContainer {
	  width: 88.5%;
	  max-width: 1232px;
	  padding-left: 0.75%;
	  padding-right: 0.75%;
	  margin: auto;
	  clear: none;
	  float: none;
	  margin-left: auto;
  }
  
	  h3 {
		  text-align: right;
	  }
	  
	  h4 {
		  text-align: right;
	  }
	  
	  h5 {
		  font-size: 9px;
	  }
	  
	  .header {
		  height: 100%;
	  }
	  .logo {
		  float: left;
		  width: 35%;
	  }
	  
	  .logo img {
		  display: block;
		  max-width: 90%;
		  margin: 0;
		  height: auto;
	  }
	  
	  .address {
		  display: block;
	  }
	  
	  .MobileAddress {
		  display: none;
	  }
	  
	  .footer {
		  padding-top: 2em;
		  padding-bottom: 2em;
		  margin-top: 2em;
		  border-top: 2pt solid #ECAA9D;
	  }
	  
	  .footerL {
		  width: 57.6271%;
		  float: left;
	  }
	  
	  .footerL img {
		  max-width: 70%;
		  margin: 0;
		  text-align: center;
		  color: undefined;
	  }
	  	  
		  .footerSocial { 
		text-align:right;
		padding-top: 10px;
	  }
	  

	  .footerR {
		  width: 40.6779%;
		  margin-left: 35.5932%;
		  clear: none;
		  padding-top: 0;
	  }
	  
	  .footerR img {
		  max-width: 45%;
	  }
	  .copyright {
		  width: 100%;
		  margin-left: 1.6949%;
		  clear: both;
	  }
	  .copyrightR {
		  float: right;
		  clear: right;
		  text-align: right;
		  width: 50%;
	  }
	  .copyrightL {
		  float: left;
		  width: 40%;
		  clear: both;
		  text-align: left;
	  }
	 
		 #navbar {
		  display: block;
	  font-size:84%;
	  width:  660px;
	  }
	  .menu{width: 70%;
	  margin-left:15%;}
	  
	  .wine{width: 70%;
	  margin-left:15%;}
	  .wine p{margin-top: 0; line-height:.4em;}
	  #slideshow {
		  width: 625px;
	  }
	  
	  #leftCol {
		  display: block;
	  }
	  
	  #centerCol {
		  display: block;
	  }
	   #rightCol {
		   display:block;
	  }
	   #rightCol2 {display: block;
	  }
	  #mobSlide { display:none;
  }
  .mobileNav {
  }
  .MobileNav {
  }
  .navItem {
  display: block;
  }
  .subNav {
  }
  .subNavItem {
  }
  #contentImgMobile {
	  display:none;
  }
  #contentImgDesktop {
	  display:block;
  }
  #contactInfo {
	display: block;
	text-align: left;
  }
  
  #contactInfoMobile {
	  display:none;
  }
  
  .zeroMargin_desktop {
  margin-left: 0;
  }
  .hide_desktop {
  display: none;
  }
  }

    Add the footerSocial css to the 769px media query and see if that works. I dont work mobile first - l construct a website on a desktop so to me working desktop first is more logical and in my opinion correct, despite what youll hear from a lot of uninformed developers who just follow the crowd and use poorly coded frameworks.

     

     

    The below css styles are not even in your linked style.css sheet at the url you provided in your first post:

    .gfm-embed {
width: 30%;
}
.footerSocial {
display: flex;
flex-direction: column;
align-items: flex-end;
}

     

    They need to go in your 769px media query.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 1, 2020

    Short answer:  Open style.css

     

    Line 804

    .footerSocial {
    width: 64px;
    text-align: right;
    position: relative;
    right: -462px;
    clear: none;
    padding-top: 10px;
    }

     

    Line 498

    .footerSocial {
    width: 100%;
    margin: 0 auto;
    margin-left: auto;
    text-align: center;
    padding-top: 1em;
    }

     

    I still say you should re-build without those unfortunate Fluid Grids.  But given the situation with restaurants right now,  you might want to wait and see if they survive. 

     

    Nancy O'Shea— Product User & Community Expert
      G
      gregjbAuthor
      Known Participant
      April 1, 2020

      Yes, that is part of it. I'm hoping to help keep them in business. What a crazy time in the world.

      So this worked aside from 1 aspect. The size of the icons is now larger than I had previously. I added back width: 64px and it made them the right size but they then aligned left.

      Any ideas? 

       

      Thank you so much you've already been a huge help.

      G
      gregjbAuthor
      Known Participant
      April 1, 2020

      I think I figured it out. I had to give .footerSocial img a value.

       

      Now that I'm ready for the donate button. Where to embed code is where I'm stuck. I want it placed left of the social icons. Your thoughts are greatly appreciated.

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      April 1, 2020

      Ditch the Fluid Grid Layouts.  Adobe removed them from DW a long, long time ago for a reason.  I recommend switching to Bootstrap 4 responsive layout system which uses CSS Flexbox instead of floats.

       

      Social media icons on 1 row inside a responsive menu. I'm using Font Awesome Icons instead of raster images.

       

      Here is the code.

      <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Alt-Web Demo : Bootstrap and Font Awesome</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap 4.4.1 CSS-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!--Font Awesome-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

<style>
/**some custom styles**/
body {
min-height: 100vh;
padding-top: 25vh;
background: url( https://placeimg.com/1000/900/nature?t=1531616140833) no-repeat center center fixed;
background-size: cover;
}
.flex-grow { flex: 1; }

main {text-shadow: 2px 2px 1px #000 }
</style>
</head>
<body class="d-flex flex-column">
<!--BEGIN RESPONSIVE NAVBAR-->
<nav class="navbar navbar-dark navbar-expand-lg bg-info justify-content-center fixed-top"> <a class="navbar-brand" href="#"><img class="img-fluid rounded"  src="https://dummyimage.com/300x65" alt="Your Logo" title="Company Logo or Brand"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-2x fa-facebook-square"></i></a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-2x fa-twitter"></i></a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-2x fa-instagram"></i></a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu5</a></li>
</ul>
</div>
</nav>

<!--BEGIN MAIN CONTENT-->
<main class="container flex-grow">
<div class="row text-warning">
<div class="col">
<h1 class="p-1">Hello World!</h1>
<p class="p-2">Welcome to Bootstrap &amp; Font Awesome in Dreamweaver. </p>
<p class="p-2"><a href="https://fontawesome.com/v4.7.0/cheatsheet/">Font Awesome 4.7 Cheat Sheet</a></p>
<p class="p-2"><a href="https://www.w3schools.com/bootstrap4/">Bootstrap 4 Tutorial</a></p>
</div>
</div>
</main>

<!--BEGIN FOOTER-->
<footer class="bg-info text-white mt-4">
<div class="container-fluid py-3">
<div class="row">
<div class="col-md-4 text-center">
<h5>Footer Column 1</h5>
</div>
<div class="col-md-4 text-center">
<h5>Footer Column 2</h5>
</div>
<div class="col-md-4 text-center">
<h5>Footer Column 3</h5>
</div>
</div>
<div class="row">
<div class="col-md-6"> <small>Footer remains at page bottom on short pages.</small></div>
<div class="col-md-3"></div>
<div class="col-md-3 text-right small align-self-end"><small>©2020 XYZ Company</small></div>
</div>
</div>
</footer>
<!--First jQuery, then Popper then Bootstrap--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<!--Popper JS--> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
<!--latest Bootstrap 4.4.1 JS--> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
</body>
</html>

       

      Nancy O'Shea— Product User & Community Expert
        G
        gregjbAuthor
        Known Participant
        April 1, 2020

        Thank you Nancy,

        I'm sure this would work much better, but part of my issue is that it's been awhile since I've dealt with code and I'm only trying to fix this one issue and then add this donate button. Is there a quick way to do this with my existing code? This is fairly time sensitive so I'd like to get it up and then I can spend time moving it to bootstrap.

        Your thoughts are MUCH appreciated. 

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices