markf26988182 wrote It will look ok on a smart phone but have a look at it on a tablet or slowly reduce the width of your browser on desktop.
yes...I know the problem...can you help me keep the limited width column container; & have the first two columns expand to that width just like the third one does? Seems like it should be an easy fix, but it's beyond my scope. thanx, mf |
See if the code below solves your issues. It's your code just cleaned up and a couple of components moved to where I think you want them to be but are having trouble getting them there.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Burlington County Area of NA / Home page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap 4 CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
.jumbotron {
background: url(SAM_5626-II.jpg) no-repeat center center fixed;
background-size: cover;
margin-bottom: 0;
padding-bottom: 0;
border-radius: 0px;
}
.jumbotron > .container {
background: rgba(0,0,0,0.5);
padding: .51%;
color: #FFF;
}
</style>
</head>
<body>
<header class="jumbotron">
<div class="container text-center rounded">
<div class="float-left"> <img src="http://www.moonjams.net/John-Woolman-House-II.gif" width="300" height="233" alt="logo"> </div>
<div class="float-right"> <img src="http://www.moonjams.net/NA-Logo_CentIND-11.gif" width="185" height="185" alt="logo"> </div>
<h1 class="display-3">Burlington County Area of NA</h1>
<p>"The only requirement for membership is a desire to stop using"...Tradition 3</p>
<div class="clearfix"></div>
</div>
</header>
<!--responsive navbar-->
<nav class="navbar navbar-dark navbar-expand-lg bg-dark justify-content-center sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MainNavbar" aria-controls="MainNavbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse justify-content-center" id="MainNavbar">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link text-center" href="meetings3.html">MEETINGS</a> </li>
<li class="nav-item"> <a class="nav-link text-center" href="#">Committees</a> </li>
<li class="nav-item"> <a class="nav-link text-center" href="#">Events</a> </li>
<li class="nav-item"> <a class="nav-link text-center" href="#">Unity</a> </li>
<li class="nav-item"> <a class="nav-link text-center" href="#">ASC DOCs</a> </li>
<li class="nav-item"> <a class="nav-link text-center" href="#">Contact</a> </li>
</ul>
</div>
</nav>
<!--main content-->
<main class="container-fluid">
<h3 class="text-center p-4 text-info">Welcome to the BURLINGTON COUNTY AREA of Narcotics Anonymous</h3>
<div class="row col-md-11 col-sm-12 mx-auto p-0">
<div class="col-md-5 col-sm-6 pb-2">
<div class="card card-body h-100 bg-light text-dark">
<h4 class="card-title">What Is the Narcotics Anonymous Program?</h4>
<p class="card-text">NA is a nonprofit fellowship or society of men and women for whom drugs had become a major problem. We are recovering addicts who meet regularly to help each other stay clean. This is a program of complete abstinence from all drugs. There is only one requirement for membership, the desire to stop using. We suggest that you keep an open mind and give yourself a break. Our program is a set of principles written so simply that we can follow them in our daily lives. The most important thing about them is that they work. There are no strings attached to NA. We are not affiliated with any other organizations. We have no initiation fees or dues, no pledges to sign, no promises to make to anyone. We are not connected with any political, religious, or law enforcement groups, and are under no surveillance at any time. Anyone may join us regardless of age, race, sexual identity, creed, religion, or lack of religion.We are not interested in what or how much you used or who your connections were, what you have done in the past, how much or how little you have, but only in what you want to do about your problem and how we can help. The newcomer is the most important person at any meeting, because we can only keep what we have by giving it away. We have learned from our group experience that those who keep coming to our meetings regularly stay clean.</p>
</div>
<!-- end card body -->
</div>
<div class="col-md-4 col-sm-6 pb-2">
<div class="card card-body bg-dark text-light h-100">
<h4 class="card-title">TODAY's MEETINGS:</h4>
<p class="card-text"><b>Flat Book (Step Working Guide)</b><br>Virtua Memorial Hospital<br>175 Madison Avenue, Mt Holly 08060<br>11:00am-1:00pm (C/St)</p>
<p class="card-text"><b>No Matter What</b><br>449 Club6 Pemberton Street, Pemberton 08068<br>4:00pm-5:30pm (O/S/D/L)</p>
<p class="card-text"><b>Come Grow With Us</b><br>Saint Mary's Hall<br>145 Broad Street, <br>Burlington 08016<br>7:00pm-8:30pm (O/S/St./D)</p>
<p class="card-text"><b>Freedom Group (SJ)</b><br>Saint Peter's Episcopal Church<br>1 Hartford Road, Medford 08055<br>8:00pm-9:00pm (O/V)</p>
<p class="card-text"><b>Nothing Else Works</b><br>Mount Holly Friends Meeting<br>81 High Street, Mt Holly 08060<br>8:15-9:30pm (C,JFT,D)</p>
</div>
<!-- end card body -->
</div>
<div class="col-md-3 col-sm-12 pb-2">
<div class="card card-body bg-info text-light h-100">
<h4 class="card-title">EVENTS:</h4>
<p class="card-text"><b>Bordentown Group of NA</b><br>Bordentown, FRI April 6th11th ANNIVERSARY! </p>
<p class="card-text"><b>Recovery By The River</b><br>Riverton, TUE April 24th 4th ANNIVERSARY! </p>
</div>
</div>
</div>
<!-- end row -->
</main>
<!-- end main-content -->
<div class="container-fluid">
<div class="row text-center p-3">
<h3 class="w-100">DRUG PROBLEM? CALL OUR <span class="text-danger d-none d-sm-inline">HELPLINE: 1-800-992-0401</span>
<button type="button" class="btn btn-danger d-inline d-sm-none m-2" onClick="window.location.href = 'tel:1-800-992-0401';">HELPLINE: 1-800-992-0401</button> </h3>
</div>
<!-- end row -->
<!-- start footer navbar -->
<div class="row bg-light p-3 mb-3">
<h5 class="text-center w-100 m-0 pb-sm-2">LINKS:</h5>
<nav class="navbar navbar-light m-0 p-0 w-100">
<ul class="navbar-nav w-100 d-flex justify-content-center text-center align-items-md-start align-items-sm-center flex-md-row">
<li> <a class="nav-link p-2" href="http://www.jftna.org/jft/">Just For Today</a></li>
<li> <a class="nav-link p-2" href="http://www.nanj.org/">NA / New Jersey</a></li>
<li> <a class="nav-link p-2" href="http://www.njpn.org/">NJ Prevention Network</a></li>
<li> <a class="nav-link p-2" href="https://www.nachatroom.net/">Online Meetings</a></li>
<li> <a class="nav-link p-2" href="https://njrcna.com/">NJ Regional Convention</a></li>
<li> <a class="nav-link p-2" href="https://www.na.org/admin/include/spaw2/uploads/pdf/litfiles/us_english/IP/EN3107.pdf">Am I An Addict?</a></li>
<li class="dropdown">
<a class="nav-link dropdown-toggle text-center" href="#" id="dropdownMenuButton" data-toggle="dropdown">Local AREA Websites </a>
<div class="dropdown-menu">
<a class="dropdown-item" href="http://capeatlanticna.org/">Cape-Atlantic Area of NA</a>
<a class="dropdown-item" href="https://www.capitalareaofna.org/">Capital Area of NA</a>
<a class="dropdown-item" href="http://www.cjasc.org/">Central Jersey Area of NA</a>
<a class="dropdown-item" href="http://www.csascna.org/">Cumberland-Salem Area of NA</a>
<a class="dropdown-item" href="http://www.namiddlesexnj.org/">Middlesex Area of NA</a>
<a class="dropdown-item" href="http://www.ocanj.org/">Ocean Area of NA</a>
<a class="dropdown-item" href="http://www.southjerseyna.org/">South Jersey Area of NA</a>
</div>
</li>
</ul>
</nav>
<!-- end nav -->
</div>
<!-- end row -->
</div>
<!-- end container-fluid -->
<!-- 2 columns small, 4 columns large-->
<div class="container-fluid">
<div class="row d-flex justify-content-center">
<a href="https://www.na.org/?ID=reaching-out-index"><img src="http://www.moonjams.net/RO_2013.png" width="182" height="75" alt="'Reaching' Out Magazine" class="m-2 img-fluid'"></a>
<a href="https://www.na.org/"><img src="http://www.moonjams.net/NAWS.jpg" width="348" height="60" alt="Narcitics Anonymous World Services" class="m-2 img-fluid'"></a>
<a href="https://www.na.org/?ID=naway-toc"><img src="http://www.moonjams.net/Naway99.gif" width="388" height="76" alt="'The NA Way' Magazine" class="m-2 img-fluid'"></a>
<a href="https://www.na.org/?ID=reports-nawsnews-nawsmain"><img src="http://www.moonjams.net/nn-mast.gif" width="353" height="60" alt="'NAWS News' Magazine" class="m-2 img-fluid'"></a>
</div>
</div>
<!--footer-->
<footer class="container-fluid bg-dark">
<div class="row">
<div class="col text-center text-light"> ©2018 by <img src="http://www.moonjams.net/30West_100.jpg" alt="" width="100" height="96"> 30 West </div>
</div>
</footer>
<!--latest jQuery Core-->
<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>
<!--Bootstrap 4 JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
1 Correct answer
38
Replies
AdChoices