Highlighted

Column Height (or div height)...oy vey

New Here ,
May 30, 2018

Copy link to clipboard

Copied

[Was asked not to bunch multiple questions together in a post...so I've split this one off, from my previous post]:

So...the bootstrap grid system...what good is it if one cannot define the height of a column?  I've been reading as much as I can on this topic; & all I can seem to get is: .col-sm-4 this; and .col-md-8 that; and .col-lg-10 the other thing...very confusing to me...sorry.

On my website:

Burlington County Area of NA / Home page

...the block that reads 'DRUG PROBLEM...'...it's too HIGH...!!!  I need to have the size of the text remain the same (& stay centered), but have the height of that area (not knowing if it's the column height or div height I'm talking about)...be more narrow...not as tall.

If someone can point me to an UNDERSTANDABLE yet DETAILED informational on this topic...(including the relationship to the containers the columns reside in)...my work on this site will be concluded.

thanx; & sorry to keep bothering the folks here...you've all been exceedingly helpful...very much appreciated,

mf

Ben provided you with the answer in your other thread.

You need to understand the Bootstrap classes. p-5 on your <div> means padding top, right, bottom and left. p-5 - I think is the largest you can have in Bootstrap, try p-2 or even just remove it.

<div class="col-sm-10 col-md-10 col-lg-8 rounded mx-auto text-center p-5">

https://getbootstrap.com/docs/4.1/utilities/spacing/

Views

1.2K

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

Column Height (or div height)...oy vey

New Here ,
May 30, 2018

Copy link to clipboard

Copied

[Was asked not to bunch multiple questions together in a post...so I've split this one off, from my previous post]:

So...the bootstrap grid system...what good is it if one cannot define the height of a column?  I've been reading as much as I can on this topic; & all I can seem to get is: .col-sm-4 this; and .col-md-8 that; and .col-lg-10 the other thing...very confusing to me...sorry.

On my website:

Burlington County Area of NA / Home page

...the block that reads 'DRUG PROBLEM...'...it's too HIGH...!!!  I need to have the size of the text remain the same (& stay centered), but have the height of that area (not knowing if it's the column height or div height I'm talking about)...be more narrow...not as tall.

If someone can point me to an UNDERSTANDABLE yet DETAILED informational on this topic...(including the relationship to the containers the columns reside in)...my work on this site will be concluded.

thanx; & sorry to keep bothering the folks here...you've all been exceedingly helpful...very much appreciated,

mf

Ben provided you with the answer in your other thread.

You need to understand the Bootstrap classes. p-5 on your <div> means padding top, right, bottom and left. p-5 - I think is the largest you can have in Bootstrap, try p-2 or even just remove it.

<div class="col-sm-10 col-md-10 col-lg-8 rounded mx-auto text-center p-5">

https://getbootstrap.com/docs/4.1/utilities/spacing/

Views

1.2K

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
May 30, 2018 0
LEGEND ,
May 30, 2018

Copy link to clipboard

Copied

Ben provided you with the answer in your other thread.

You need to understand the Bootstrap classes. p-5 on your <div> means padding top, right, bottom and left. p-5 - I think is the largest you can have in Bootstrap, try p-2 or even just remove it.

<div class="col-sm-10 col-md-10 col-lg-8 rounded mx-auto text-center p-5">

https://getbootstrap.com/docs/4.1/utilities/spacing/

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...
May 30, 2018 0
Adobe Community Professional ,
May 30, 2018

Copy link to clipboard

Copied

Height is rarely if ever expressed explicitly because it varies by content, borders, padding, margins and viewport size.  Please review the CSS Box Model.

CSS Box Model

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...
May 30, 2018 0
New Here ,
May 30, 2018

Copy link to clipboard

Copied

osgood...

fixed it...uploaded it...(understand it now...it was the div; & it's padding)...thanx!

1 last question...on that line of text...how do I change just a selected portion of it to a different color?  [couldn't find any html/bootstrap info on the web relative to changing text color of individual/select words on a given line; & also looked around in DW for a properties function for selected text]

Everything from the word 'HELPLINE' to the end I need in red...I suppose it's something to do w/ CSS, but couldn't figure out how to implement that either.

thanx,

mf

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...
May 30, 2018 0
New Here ,
May 30, 2018

Copy link to clipboard

Copied

never mind...figured it out...<span style="color:#FF0000">HELPLINE: 1-800-992-0401</span>

mf

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...
May 30, 2018 0
Adobe Community Professional ,
May 30, 2018

Copy link to clipboard

Copied

Excuse me for saying this, but won't your Helpline phone number be linked as I suggested yesterday for people on mobile phones who don't like typing numbers?

Also, the Bootstrap 4 contextual class for red text is class="text-danger".  The other contextual colors are described below.

Bootstrap 4 Colors

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...
May 30, 2018 0
New Here ,
May 30, 2018

Copy link to clipboard

Copied

Nancy...

The majority of web users these days are on mobile devices.  Bootstrap is a mobile first framework which means the default layout is 1 column stacked vertically.   Don't think of this project as a recreation of your old desktop site.  Think of it as a new mobile friendly version.   How it looks on -md, -lg and -xl devices is a secondary consideration.    Mobile-Friendly Test - Google Search Console

The home page passed the test

I would make the hotline phone number an active mobile phone link for easier access.

<a href="tel:1234567890">123-456-7890</a>

have no idea where that snippet is placed...(I'm assuming in the paragraph line, in place of the existing #?)

thanx...& thanx for all the other advice...haven't had time to try/implement any of it yet

mf

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...
May 30, 2018 0
Adobe Community Professional ,
May 30, 2018

Copy link to clipboard

Copied

Replace lines 145-147

<div class="col-sm-10 col-md-10 col-lg-8 rounded mx-auto text-center p-2">

  <h3>DRUG PROBLEM? CALL OUR <span style="color:#FF0000">HELPLINE: 1-800-992-0401</span></h3>

</div>

with

<div class="col-12 text-center">

  <h3>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" onclick="window.location.href = 'tel:1-800-992-0401';">HELPLINE: 1-800-992-0401</button>

  </h3>

</div>

This will show the original text for screen sizes above mobile phones and show a call button on mobile sized screens.


Ben

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...
May 30, 2018 1
Adobe Community Professional ,
May 31, 2018

Copy link to clipboard

Copied

markf26988182  wrote

Mobile-Friendly Test - Google Search Console

The home page passed the test

Have you looked at your site on a mobile device?   On smaller viewports, there are some glaring problems.  See screenshot.

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...
May 31, 2018 1
LEGEND ,
May 31, 2018

Copy link to clipboard

Copied

It's different to most Bootstrap sites.

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...
May 31, 2018 1
New Here ,
May 31, 2018

Copy link to clipboard

Copied

thanx!, Ben...pretty cool.

also...at the very bottom of the home page...the black margin (footer) containing the image logo for 30 WEST...there's black area appearing underneath that logo, but I don't see any padding in the div.  Is that like a standard height for a footer, or something?

thanx again,

mf

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...
May 31, 2018 0
New Here ,
May 31, 2018

Copy link to clipboard

Copied

Nancy...

thanx.  The first part is gonna be a toughie, because I want the welcome line prominent on the page.  Although...if that's what's interfering w/ the links (to the right) being visible on a mobile device (which is important), then I suppose I could move it to the white column below.

On the second concern, I noticed that (in addition to what you're saying) the 3rd column [EVENTS:, teal color (bg-info)] does expand to the full width.  For the parent column itself (<div class="col-sm-11 mx-auto">), I changed the sm-11 to sm-12, but that didn't do a thing.  Not certain how to go about expanding the first two to full width, 'cause I don't see any differences in the coding of all 3 individual columns.

thanx again,

mf

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...
May 31, 2018 0
Adobe Community Professional ,
May 31, 2018

Copy link to clipboard

Copied

markf26988182  wrote

also...at the very bottom of the home page...the black margin (footer) containing the image logo for 30 WEST...there's black area appearing underneath that logo, but I don't see any padding in the div.  Is that like a standard height for a footer, or something?

Remove the paragraph element from line 197 as in

<p>© 2018 by 30 West  <img src="30West_100.jpg" width="100" height="96"> Template by Nancy OShea</p>

The reason for this is that the paragraph element has margins and padding attached to it. In this case you do not need the paragraph styling so just delete.


Ben

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...
May 31, 2018 1
Adobe Community Professional ,
May 31, 2018

Copy link to clipboard

Copied

Have a look at what else the browser is telling me

This means that the file on line 206 cannot be found, which is just as well because you have already loaded the file in line 204

204  <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>        

205  <!--latest Bootstrap 4 JS-->        

206 <script src="js/popper.min.js"></script>

It also means that you do not have a favicon in the root directory.

Edit: You may also want to have a look at clearing these errors Showing results for http://www.moonjams.net/BurlCoNA-IV.html - Nu Html Checker


Ben

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...
May 31, 2018 1
New Here ,
Jun 02, 2018

Copy link to clipboard

Copied

Ben...

thanx again! (& again & again & again...)

[really learning a lot these days, from you and everyone else]

mf

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...
Jun 02, 2018 0
New Here ,
Jun 02, 2018

Copy link to clipboard

Copied

Ben...

Thanx.

That's another thing  (relative to your post)...I have all these folders/subfolders associated w/ the site

in bootstrap/css I have bootstrap.css & bootstrap.min.css

in bootstrap/js I have bootstrap.js; bootstrap.min.js; npm.js

in css I have bootstrap-4.0.0.css & style.css

in js I have bootstrap-4.0.0.js; jquery-3.2.1.min.js; popper.min.js

(& no favicon anything)

In DW's site file, in addition to the Source Code, it has tabs for bootstrap.min.css, bootstrap.min.js, jquery-3.2.1.min.js & popper.min.js (3 tabs for this one...no idea why).

I began constructing the site in Pinegrow Pro; & then utilized the same folder hierarchy on my hard drive when I moved over to coding in DW...so I'm not sure which program created (or referenced from an external source) which.

On my server...the site didn't look right until I uploaded the css folder, which contains bootstrap-4.0.0.css

The source code references jquery-3.2.1.min.js, popper.min.js & bootstrap-4.0.0.js as external script source links

So...I need to figure out which of those files to upload to my server; & I guess which ones I should delete on my hard drive (so as to see if DW re-creates them?)...i.e., which files are necessary & which aren't.

(&...I have no idea whatsoever to do about flavicon)

thanx,

mf

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...
Jun 02, 2018 0
Adobe Community Professional ,
Jun 02, 2018

Copy link to clipboard

Copied

Bootstrap 4.0 is the current version I use.  You must not combine Bootstrap 4 with Bootstrap 3 as they are very different code-wise.

Bootstrap 4 consists of the following files in this order:

  • BS4 CSS
  • latest jQuery 3.2
  • Popper JS
  • BS4 JS

If your site contains more than that, remove the excess.

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...
Jun 02, 2018 1
New Here ,
Jun 02, 2018

Copy link to clipboard

Copied

Nancy...

thanx again....I'll upload the js folder to my server...between that & css (which is already there), that's everything you mentioned

what about the first two columns not expanding to the full width...while the third does? (question from my post of May 31st...as you pointed out the same day)  [this one has me stymied...see: below]

mf

On the second concern, I noticed that (in addition to what you're saying) the 3rd column [EVENTS:, teal color (bg-info)] does expand to the full width.  For the parent column itself (<div class="col-sm-11 mx-auto">), I changed the sm-11 to sm-12, but that didn't do a thing.  Not certain how to go about expanding the first two to full width, 'cause I don't see any differences in the coding of all 3 individual columns.

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...
Jun 02, 2018 0
Adobe Community Professional ,
Jun 02, 2018

Copy link to clipboard

Copied

Copy & paste this into a new document.  I cleaned up the columns & code errors.  I also removed parts that were not working or unnecessary.

<!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;

}

.jumbotron > .container {

    background: rgba(0,0,0,0.5);

    padding: .51%;

    color: #FFF;

}

.navbar { margin-bottom: 2rem; }

</style>

</head>

<body>

<header class="jumbotron">

<div class="container text-center rounded">

<div class="float-left"> <img src="John-Woolman-House-II.gif" width="300" height="233" alt="logo"> </div>

<div class="float-right"> <img src="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"> <a class="navbar-brand" href="#">BRAND/LOGO</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="MainNavbar">

<ul class="navbar-nav ml-auto">

<li class="nav-item active"> <a class="nav-link" href="meetings3.html">MEETINGS</a> </li>

<li class="nav-item"> <a class="nav-link" href="#">Committees</a> </li>

<li class="nav-item"> <a class="nav-link" href="#">Events</a> </li>

<li class="nav-item"> <a class="nav-link" href="#">Unity</a> </li>

<li class="nav-item"> <a class="nav-link" href="#">ASC DOCs</a> </li>

<li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>

</ul>

</div>

</nav>

<!--main content-->

<main class="container-fluid">

<div class="row row-eq-height">

<div class="col-md-5 py-2">

<div class="card h-100 bg-light text-dark">

<div class="card-body">

<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>

</div>

</div>

<div class="col-md-4 py-2">

<div class="card h-100 bg-dark text-light">

<div class="card-body">

<h4 class="card-title">TODAY's MEETINGS:</h4>

<p class="card-text"><strong>Flat Book (Step Working Guide)</strong><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>

</div>

</div>

<div class="col-md-3 py-2">

<div class="card h-100 bg-info text-light">

<div class="card-body">

<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>

<!--one column-->

<div class="row">

<div class="col-12 text-center p-2">

<h3>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" onclick="window.location.href = 'tel:1-800-992-0401';">HELPLINE: 1-800-992-0401</button></h3>

</div>

</div>

</div>

</main>

<!--aside content-->

<aside class="container-fluid">

<div class="row d-flex justify-content-center">

<a href="https://www.na.org/?ID=reaching-out-index"><img src="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="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="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="nn-mast.gif" width="353" height="60" alt="'NAWS News' Magazine" class="m-2 img-fluid'"></a>

</div>

</aside>

<!--footer-->

<footer class="container-fluid bg-dark">

<div class="row">

<div class="col text-center text-light"> © 2018 by 30 West <img src="30West_100.jpg" width="100" height="96"> </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>

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...
Jun 02, 2018 1
New Here ,
Jun 02, 2018

Copy link to clipboard

Copied

Nancy...

Thanx...but something's not quite right:
1) Reducing the amount of text in the brand/logo still doesn't solve the problem of the disappearing links in the responsive nav bar.

2) You took out the <div class="col-sm-11 mx-auto"> in the main class=container fluid.  Now all 3 columns expand to the full width of the page.  I liked the old way...looked more compact.

3) The DRUG PROBLEM/HELPLINE div row jumped from it's old spot; & I can see it jumbled up to the right of the three columns (at lease that's what happens when I preview in DW in all my browsers)

4) The light LINKS d-flex nav bar at the bottom of the page is gone.

On the responsive nav bar, why does the welcome text have to be a button or a brand or whatever it is...why can't there just be the welcome text at the left and the links at the right and it all be responsive?

anyway...here's the home page w/ your cleaned up code...& what I left in:

http://www.moonjams.net/BurlCoNA-IV.html

all that's left to do is fixing the responsive nav bar...& the column width (first two vs. the third) discrepancy.

thanx again,

mf

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...
Jun 02, 2018 0
LEGEND ,
Jun 03, 2018

Copy link to clipboard

Copied

markf26988182  wrote

Nancy...


1) Reducing the amount of text in the brand/logo still doesn't solve the problem of the disappearing links in the responsive nav bar.

1) Your main navbar links are disapearing, despite informing you of the reason why, some posts ago:

Change #navbarsExampleDefault to #MainNavbar and navbarsExampleDefault to MainNavbar:

<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>

markf26988182  wrote

2) You took out the <div class="col-sm-11 mx-auto"> in the main class=container fluid.  Now all 3 columns expand to the full width of the page.  I liked the old way...looked more compact.

2) No it looked/looks ridiculous on mobile devices, those 3  columns should adjust to the width of the mobile screen not be positioned over on the left hand edge of the browser window with acres of space to the right of them.

markf26988182  wrote

On the responsive nav bar, why does the welcome text have to be a button or a brand or whatever it is...why can't there just be the welcome text at the left and the links at the right and it all be responsive?

It can but whatever container you put that long welcome line of text in will run out of space almost immediately given the amount of links you also have. The default Bootstrap nav bar is not set up to take any long 'brand' names or any more than about half a dozen links, if that. Its a bit stupid to be honest as its not like everyone wants a 16px high logo or a 6 letter brand name or even a logo on the same line as the links. The problem with frameworks they are all crap because they cant 'think', they just provide a few basic options and you are meant to design your website with that in mind....so if you have a long company name, re-register it as something with a smaller amount of words and have all you stationary reprinted and vehicle livery changed so it will conform to Bootstraps vision. If you require anything else in terms of layout you have to code it yourself. Frameworks, visual applications are the biggest pile of camel dung this side of the moon and I would advice anyone serious about becoming a professional developer NOT to invest/waste their time learning them, they are at most a hideous workflow for amatuers to use.

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...
Jun 03, 2018 0
New Here ,
Jun 03, 2018

Copy link to clipboard

Copied

osgood...

1) Your main navbar links are disapearing, despite informing you of the reason why, some posts ago:
Change #navbarsExampleDefault to #MainNavbar and navbarsExampleDefault to MainNavbar:

Changed that...thanx much...but please try not to be so testy...I looked back thru this entire thread & didn't see any advice in that regard...if it's in another; & I overlooked it...very sorry.  As I said in another of my responses...I'm looking for a way (design-wise) to move the welcome statement (so as to make way for only centered links displaying in that nav bar), but have it still be prominent on the page.

2) No it looked/looks ridiculous on mobile devices, those 3  columns should adjust to the width of the mobile screen not be positioned over on the left hand edge of the browser window with acres of space to the right of them.

Just looked at it on mine (cell phone)...have no idea what you mean...the 3 columns have a tiny margin on their left & right (& are centered); & look fine to me.  You're referring to the main problem...on in-between display widths.  The way I am seeing it (on every previewed browser) is...as the overall display window is reduced in width...(from full browser width until it gets all the way to mobile width)...the first two columns are narrow, while the third opens up to the full width.  There has to be a way to solve that within that limited width container, which is why I keep asking if it's not some problem in the coding of the size of the individual columns.  I am hearing you guys; & have implemented all the suggested changes I can muster.  Not sure you are hearing me, as no one had actually come out and said that it can't be done (which...I don't believe is the case...because...the third column is OK; & responds correctly to any change in browser width I throw at it)

thanx again,

mf

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...
Jun 03, 2018 0
Adobe Community Professional ,
Jun 03, 2018

Copy link to clipboard

Copied

Mark, 23 code errors is not what I gave you.   Therein lies part of the problem.

Showing results for http://www.moonjams.net/BurlCoNA-IV.html - Nu Html Checker

The code in your 2nd navbar is a train wreck.

As stated before, you're still approaching this as a desktop-first web stie when you really need to think of it as mobile-first.  Bootstrap is a 12 box grid system.

Col-md-5 -- what does it mean?  It translates to full width of container on x-small and small devices breaking to 5/12ths width on medium, large and x-large devices.     When combined with the other 2 columns (col-md-4 and col-md-3)  = 12.

The excessively long Welcome message  does not belong in the navbar brand where it creates major usability problems.   Optionally, you could run it along the top of your jumbotron or below the navbar.   Your choice.

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...
Jun 03, 2018 0
LEGEND ,
Jun 03, 2018

Copy link to clipboard

Copied

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.

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...
Jun 03, 2018 0
New Here ,
Jun 03, 2018

Copy link to clipboard

Copied

Mark, 23 code errors is not what I gave you.   Therein lies part of the problem.

that's exactly what you gave me...the first half, that is.  All I added in the first half was border-radius: 0px; to the first jumbotron sequence, so there would be no little white corners in the background image.  I stopped w/ your code at <!--main content-->, for reasons previously stated.

The code in your 2nd navbar is a train wreck.

then please help me fix it...that's all I've been asking.  To demean me when I'm not a professional code meister doesn't serve either of us.  & btw...why exactly is it a train wreck?  It looks good on a desktop monitor & functions correctly at smaller display sizes.  That's all I'm looking for.

As stated before, you're still approaching this as a desktop-first web site when you really need to think of it as mobile-first. 

That's correct...it's always been a desktop-first site...always will be...I just wanted it to work correctly on browser resize, tablets/touch screen & cell phones...as stated from the very onset.

Col-md-5 -- what does it mean?  It translates to full width of container on x-small and small devices breaking to 5/12ths width on medium, large and x-large devices.     When combined with the other 2 columns (col-md-4 and col-md-3)  = 12.

I have no idea...that's been there since the very first template you gave me...I never changed a thing...so you tell me.  Again...you're asking these questions like I'm a professional designer (or suggesting I've somehow changed minute details when I don't posess the knowledge to do so).  Like I said to osgood (on this subject)...I want to keep the limited width column container; & have the first two columns expand to that width just like the third one does.  Please help with that...seems like it should be an easy fix, to me.

The excessively long Welcome message  does not belong in the navbar brand where it creates major usability problems.   Optionally, you could run it along the top of your jumbotron or below the navbar.   Your choice.

I'll probably opt for just below the main navbar.

thanx,

mf

UPDATE: Actually...I did in fact create that problem...sorry.  I went back & looked at the original bootstrap template you gave me way back when...& I did mess around w/ the individual column sizes so as to resize them a bit to accommodate the info they display [& of course...not knowing what I was doing (then & now)].  But yeah...I did it...so then...then question still remains.  The size they each are now, I like.  But it's not working.  With your original code...as the browser resized...the three columns would go to two...then to one...but always that full width.  So, how do I have the columns look similar to what they are now; & work like they used to? (& again...sorry).

Note: Theses are your original dimensions for the column container & 3 cards:


<main class="container-fluid">
<div class="col-sm-11 mx-auto">


<div class="col-sm-7 col-lg-6 py-2">
<div class="card h-100 bg-light text-dark">


<div class="col-sm-5 col-lg-4 py-2">
<div class="card h-100 bg-dark text-light">


<div class="col-md-12 col-lg-2 py-2">
<div class="card h-100 bg-danger text-light">

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...
Jun 03, 2018 0
New Here ,
Jun 03, 2018

Copy link to clipboard

Copied

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

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...
Jun 03, 2018 0
Adobe Community Professional ,
Jun 03, 2018

Copy link to clipboard

Copied

Mark,

I have put Nancy's document on line and the document is fully validated.

The document can be found at Burlington County Area of NA / Home page and the validation at Showing results for http://pleysier.com.au/mark/ - Nu Html Checker

You can copy the code and paste it into your own document by right-clicking the online page and choosing View Page Source or similar.


Ben

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...
Jun 03, 2018 0
LEGEND ,
Jun 04, 2018

Copy link to clipboard

Copied

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"> &copy;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>

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...
Jun 04, 2018 1
New Here ,
Jun 04, 2018

Copy link to clipboard

Copied

osgood...

thanx a million...yes...it solves everything, except for...on the main, top navbar...the links disappear on browser resize (& the dropdown button appears in their place), just like when the welcome message was included in the bar.  They should stack; & not go away, right?

But everything else works & looks good.  Don't know what you did w/ the 3 cards (I'll look later when I have a chance), but that's more than acceptable.

thanx again,

mf

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...
Jun 04, 2018 0
LEGEND ,
Jun 04, 2018

Copy link to clipboard

Copied

Bootstrap hides the nav links once the window size gets to tablet device size and replaces them with a toggleable hamburger icon to show them, so the nav is working in accordance with Bootstraps navbar components workflow.

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...
Jun 04, 2018 1