Known Participant

Question

Help setting the border around my footer

Forum|Forum|1 year ago
March 19, 2024
4 replies
2515 views

Thank you for helping me... I've been searching the community, and learning so much about so many things, but nothing that addresses my issue. I can't figure out what I did to mess up the borders around my footer. I had an even border around the menu, only. No border around the copyright. https://www.greenbeaks.com/retailers.html

This topic has been closed for replies.

Haybound23605476Author

Known Participant

So simple, but I couldn't see it. Thank you everybody.

BenPleysier

Community Expert

I hope you do not mind me answering beyond your question.

I have noticed that the proper Bootstrap workflow has not been followed. The construct when using Bootstrap is:

Container(s)->Row(s)->Col(s)->Content

I have therefore reconstructed the page for you to peruse and learn from. Starting with the <body>, I have changed this to

<body class="pt-4">

between the <body> tag and the first <script> tag, I have come up with this code:

    <div class="container">
        <div class="row">
            <div class="col">
                <h6 class="text-center text-black-50">
                    We'd love to hear from you!
                    <a href="tel:6089681311" class="text-black-50">608-968-1311</a> or txt
                    <a href="tel:6089681311" class="text-black-50">608-482-5622</a>
                </h6>
            </div>
        </div>
        <div class="row justify-content-around align-items-center">
            <div class="col">
                <a href="index.html">
                    <img src="https://www.greenbeaks.com/images/logos/gblogotrans.png" alt="&copy; Copyright 2023 Twin Beaks© Aviary All Rights Reserved" width="225" height="73" class="img-fluid">
                </a>
            </div>
            <div class="col">
                <div class="loginBasket d-flex justify-content-end">
                    <a href="account.html"><img src="https://www.greenbeaks.com/images/icons/icons8-user-100(1).png" alt="login" width="35" height="35" /></a>
                    <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
                        <input type="hidden" name="cmd" value="_cart">
                        <input type="hidden" name="business" value="NE36TX7CGG78S">
                        <input type="hidden" name="display" value="1">
                        <input type="image" src="images/icons/icons8-shopping-basket-100.png" alt="basket" width="32" height="32" border="0" name="submit">
                    </form>
                </div>
            </div>
        </div>
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent1">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li>
                    <li class="nav-item dropdown"> <a class="nav-link" href="herbsalad.html" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Herb Salad&#8482; </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="herbsalad.html">Herb Salad&#8482;</a> <a class="dropdown-item" href="herbs.html">Our Chosen Herbs&#8482;</a>
                        </div>
                    </li>
                    <li class="nav-item"> <a class="nav-link" href="hatched.html">Crushed Eggshell</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="herbalive.html">Herb-a-Live Garden&#8482;</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="habitats.html">Natural World Habitats&#8482;</a> </li>
                    <li class="nav-item dropdown"> <a class="nav-link" href="products.html" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Our Products </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown2"> <a class="dropdown-item" href="products.html">All of Our Products</a>
                            <a class="dropdown-item" href="herbsalad.html">Herb Salad&#8482;</a>
                            <a class="dropdown-item" href="herbs.html">Our Chosen Herbs&#8482;</a>
                            <a class="dropdown-item" href="hatched.html">Hatched! Eggshell&#8482;</a>
                            <a class="dropdown-item" href="herbalive.html">Herb-a-Live Garden&#8482;</a>
                            <a class="dropdown-item" href="habitats.html">Natural World Habitats&#8482;</a>
                            <a class="dropdown-item" href="interiors.html">Habitat Interiors&#8482;</a>
                            <a class="dropdown-item" href="sprout.html">Sprout-it-Out&#8482;</a>
                            <a class="dropdown-item" href="insect.html">Insect Complete&#8482;</a>
                            <a class="dropdown-item" href="millet.html">Millet Bouquets&#8482;</a>
                            <a class="dropdown-item" href="stew.html">Oyster Stew&#8482;</a>
                            <a class="dropdown-item" href="monster-mash.html">Monster Mash&#8482;</a>
                            <a class="dropdown-item" href="three-hens.html">Three Hens in a Tub&#8482;</a>
                            <a class="dropdown-item" href="nest.html">Best Nest&#8482;</a>
                            <a class="dropdown-item" href="lab.html">From the Lab&#8482;</a>
                            <a class="dropdown-item" href="bakery.html">Mother Hen's Bakery&#8482;</a>
                        </div>
                    </li>
                    <li class="nav-item"> <a class="nav-link" href="read-about-it.html">Read All About It!</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="tba.html">Twin Beaks&reg; Aviary</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="shopping.html">Store</a> </li>
                </ul>
            </div>
        </nav>
        <main>
            <div class="row mt-4">
                <div class="col"><img src="images/titles/title-retailers.jpg" alt="©Copyright 2023 GreenBeaks®, Inc.  All Rights Reserved" width="1387" height="402" class="img-fluid" /></div>
            </div>
            <div class="row mt-3">
                <div class="col">
                    <h6 class="text-left"><a href="pdf/TBA-AppforDistribution.pdf" class="text-body text-black-50">Inquire about becoming a GreenBeaks® Merchant</a></h6>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col">
                    <p class="font-italic">GreenBeaks® endorses our resellers of Twin Beaks® Aviary's Herb Salad&#8482;, with complete confidence and support. Unfortunately, there are some businesses that market their own avian herb imitation, using our trademarks Herb Salad&#8482; and Twin Beaks® Aviary. Their products can be unsafe for your bird. A false claim of being organic is a serious USDA offense. Question a product's authenticity and the maker's qualification. Contact <a href="mailto:support@greenbeaks.com" class="text-black-50"><span class="font-weight-bold">I'm Not Verified</span></a> if you have concerns. We've been helping your birds stay well for over 25 years. Keeping your bird safe and healthy has been Twin Beaks® Aviary's mission.</p>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <p class="mb-0">Learn why</p>
                    <a href="whatsin.html" class="text-black-50">
                        <h5>We Set the Bar</h5>
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col text-center">
                    <p><a href="retailers.html"><img src="images/icons/inspection-seal.png" width="73" height="71" alt="tba certified" class="img-fluid"></a>&nbsp;<a href="retailers.html" class="font-weight-bold">Our Authorized Dealers</a></p>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <p>If you believe a business is misrepresenting their product as one of ours, replicating our product's descriptions or masquerading as one of our resellers, please contact <a href="mailto:support@greenbeaks.com" class="text-black-50">ARE THEY AUTHORIZED?</a></p>
                </div>
            </div>
            <div class="row">
                <div class="col text-center">
                    <h5 class="font-italic">NORTHEAST</h5>
                </div>
            </div>
            <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3">
                <authorised-dealer title="My Safe Bird Store" description="Health Products from a Bird-free Environment" address="612 Tyler Street" city="Burlington, NJ 08016" phone="732-737-1010"></authorised-dealer>
                <authorised-dealer title="Bird Paradise" description="World's Largest Exotic Bird Store" address="551 E Rt 130 South" city="Burlington, NJ 08016" phone="609-747-7777"></authorised-dealer>
                <authorised-dealer title="Birds by Joe" description="Visit Our Site, Step into Our Store" address="265 RT 22" city="Greenbrook NJ 08812" phone="732-764-2473"></authorised-dealer>
                <authorised-dealer title="World of Birds" description="" address="15 Perry Street" city="Chester, NJ 07930" phone="908-879-2291"></authorised-dealer>
            </div>

            <div class="row">
                <div class="col">
                    <p class="small">Herb Salad&#8482; and Hatched!&#8482;are trademarks of Twin Beaks&reg; Aviary. The use or display of 'Herb Salad&#8482;', 'Hatched!&#8482;'or 'Twin Beaks&reg;' in packaging materials, product descriptions or advertising is strictly prohibited.</p>
                </div>
            </div>
        </main>
        <footer>
            <div class="row text-center row-cols-1  row-cols-sm-2  row-cols-lg-4 mt-4">
                <div class="col mb-4 mb-lg-0">
                    <h5 class="text-uppercase mb-4">Good to Know!</h5>
                    <ul class="list-unstyled mb-4">
                        <li><a href="index.html" class="text-black-50">Home</a></li>
                        <li><a href="retailers.html" class="text-black-50">Store Locations</a></li>
                        <li><a href="whatsin.html" class="text-black-50">What's In, What's Not</a></li>
                        <li><a href="best.html" class="text-black-50">We Set the Bar</a></li>
                        <li><a href="comments.html" class="text-black-50">It Could Happen to You!</a></li>
                        <li><a href="faq.html" class="text-black-50">Glad You Asked!</a></li>
                    </ul>
                </div>
                <div class="col mb-4 mb-lg-0">
                    <h5 class="text-uppercase mb-4">Policies</h5>
                    <ul class="list-unstyled">
                        <li><a href="about.html" class="text-black-50">About Us</a></li>
                        <li><a href="policies.html" class="text-black-50">Returns</a></li>
                        <li><a href="policies.html" class="text-black-50">Shipping</a></li>
                        <li><a href="policies.html" class="text-black-50">Wholesale</a></li>
                        <li><a href="policies.html" class="text-black-50">501c3 Policy</a></li>
                        <li><a href="policies.html" class="text-black-50">Trade-In Offer</a></li>
                    </ul>
                </div>
                <div class="col mb-4 mb-lg-0">
                    <h5 class="text-uppercase mb-4">let's talk!</h5>
                    <ul class="list-unstyled">
                        <li>
                            <a href="mailto:support@greenbeaks.com" class="text-black-50">Contact Support</a><br>
                            <a href="mailto:sales@greenbeaks.com" class="text-black-50">Request a Quote</a><br>
                            <a href="tel:6089681311" class="text-black-50">608-968-1311 or</a><br>
                            <a href="tel:6084825622" class="text-black-50">608-482-5622</a><br>
                            <a class="text-black-50">Mon-Fri 9:00-5:00pm<br>
                                (GMT Chicago) </a>
                        </li>
                    </ul>
                </div>
                <div class="col mb-4 mb-lg-0">
                    <h5 class="text-uppercase mb-4">Sign up for our newsletter</h5>
                    <form>
                        <div class="form-group col-xl-12">
                            <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email">
                            <button type="submit" class="btn btn-outline-black-50 btn-block">Subscribe</button>
                        </div>
                    </form>
                    <a href="tel:6089681311"><img src="images/icons/call_phone_calling_icon_193497.png" width="30" height="30" alt="phone" class="img-fluid"></a>
                    <a href="mailto:support@greenbeaks.com"><img src="images/icons/icons8-email-sign-50).png" alt="email" width="30" height="30" class="img-fluid" /></a>&nbsp;
                    <a href="tel:6089681311"><img src="images/icons/icons8-chat-bubble-100.png" alt="text msg" width="30" height="30" class="img-fluid" /></a>&nbsp;
                    <img src="images/icons/icons8-facebook-50.png" alt="facebook" width="30" height="30" class="img-fluid" />&nbsp;
                    <img src="images/icons/icons8-instagram-50.png" alt="instagram" width="30" height="30" class="img-fluid" />
                </div>
            </div>
            <div class="row">
                <div class="col text-center">
                    <p class="small">&copy;Copyright 2002-2024 GreenBeaks® Inc. All Rights Reserved<br>
                        This site is powered by&nbsp; <a href="dairyairdesigns.com" class="text-black-50">Dairy Air Designs&reg;</a>
                    </p>
                </div>
            </div>
        </footer>
    </div>

    <script>
        class Dealer extends HTMLElement {
            constructor() {
                super();
            }
            connectedCallback() {
                this.render();
            }
            render() {
                this.innerHTML = `
                    <div class="col">
                        <p><a href="http://mysafebirdstore.com/" class="text-body"><span class="font-weight-bold">${this.getAttribute('title')}</span></a><br>
                            <span class="font-italic">${this.getAttribute('description')}</span><br>
                            ${this.getAttribute('address')}<br />
                            ${this.getAttribute('city')}<br />
                            <a href="tel:7${this.getAttribute('phone')}" class="text-black-50">${this.getAttribute('phone')}</a>
                        </p>
                    </div>
                `;
            }
        }
        window.customElements.define('authorised-dealer', Dealer);
    </script>

Notice:

There is just the one container class.
All content (with the eception of the navar), is wrapped in a row->col.
I have created a custom element called "authorised-dealer" to make the coding a bit easier. The code for the custom element is found at the end of the posted code.
I have added a <main> element. This is to help screen readers and search engines to find the main content quickly.

As a side note: It is a pity that you are not using the latest version of Bootstrap with all of the hehancements.

Disclaimer: There are still some problems remaining with the styling. If you need assistance correcting these, please come back here.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

osgood_

Legend

I don't know what suggestion the OP implemented in the end to correct the border issue as l haven't looked at the code but this is done and dusted.

BenPleysier

Community Expert

Done and Dusted

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Nancy OShea

Community Expert

Change footer class from border border-white to border border-dark

https://www.w3schools.com/bootstrap4/bootstrap_colors.asp.

Nancy O'Shea— Product User & Community Expert

Ben M

Community Expert

Right now your copyright is within the footer section and the footer section has the css "border border-white". If you don't want a border around the copyright I would move that out of the footer section and remove the border-top border-white classes that are also on that div.

osgood_

Legend

Right now your copyright is within the footer section and the footer section has the css "border border-white". If you don't want a border around the copyright I would move that out of the footer section and remove the border-top border-white classes that are also on that div.

By @Ben M

I agree.

Structure you need to follow is add another 'container-fluid' <div> directly AFTER the closing </footer> tag. Add a 'row' <div> inside the 'container-fluid' <div> then move your   code into the 'row' <div> as shown below:

<div class="container-fluid">
<div class="row" >

<!-- Copyright -->
<div class="text-center p-3 w-100">
<small>&copy;Copyright 2002-2024 GreenBeaks® Inc. All Rights Reserved</small><br>
<small>This site is powered by&nbsp; <a href="dairyairdesigns.com" class="text-black-50">Dairy Air Designs&reg;</a></small>
</div>
<!-- Copyright -->

</div>
<!-- end row -->
</div>
<!-- end container-fluid -->

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded