The Trouble w/ Columns (my trouble, that is)

[markf26988182]

OK...

Been reading everything I can get my hands on (relative to column size, in bootstrap); & working to learn DW CC 2018 tools/functions like mad...& although I am making progress...I can't seem to wrap my head around columns (& their appropriate containers), just yet:

Here's the site I'm designing; & what I have thus far:

Burlington County Area of NA / Home page

1) On the div row directly under the 3 main columns...the one that contains the paragraph w/ the text 'DRUG PROBLEM'...I can't seem to figure out how to manipulate that entire area to have a shorter height (div AND paragraph...but not the size of the text).

2) I added a nav bar below that, which looks nice (& functions correctly)...but I wanted the brand and all the links to be centered (like almost everything else on that home page); & can't figure that out.  Not sure if it should have been a div row w/ a text-center class; and then the nav bar nested in that?...but I need help w/ that as well.  [as an aside...what I've done is also not responsive...upon browser resize, as I close in the right side approaching cell phone width...the links disappear).

3) For the 4 images at the bottom (which will become links)...again the brain block w/ the column size thing; & as you can see...those images aren't side by side & centered either (which was my intent).  I went w/ the container from the original template; & have tried to resize the 4 columns using the native controls in DW...but I guess I need to make that container wider?  Or change the class in some other manner?

Any help will be appreciated...thanx,

mark4man

[BenPleysier]

1) Remove or reduce the padding on line 145 as in

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

2) The fundamental structure of Bootstrap lies in the following hierarchy

     container(-fluid)

          row

               column(s)

          [row

               column(s)]

This means that for the named navbar the structure should be similar to

      <div class="container">
        <div class="row">
          <div class="col">
            <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between">
              <a class="navbar-brand mr-auto ml-auto" href="#">Navbar</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse justify-content-center" id="navbar1_collapse">
                <div class="navbar-nav">
                  <a class="nav-item nav-link active" href="#">Home</a>
                  <a class="nav-item nav-link" href="#">About</a>
                  <a class="nav-item nav-link" href="#">Contact</a>
                </div>
              </div>
            </nav>      
          </div>
        </div>
      </div>

This will result in

3) You could use d-flex for this, but in keeping with what you have, try the following

    <div class="container">
      <div class="row">
        <div class="col-sm-4 col-lg-3">
          <img src="RO_2013.png" width="182" height="75" class="img-fluid" alt=""/>
        </div>
        <div class="col-sm-6 col-lg-3">
          <img src="NAWS.jpg" width="348" height="60" class="img-fluid" alt=""/>
        </div>
        <div class="col-sm-6 col-lg-3">
          <img src="Naway99.gif" width="388" height="76" class="img-fluid" alt=""/>
        </div>
        <div class="col-sm-6 col-lg-3">
          <img src="nn-mast.gif" width="353" height="60" class="img-fluid" alt=""/>
        </div>
      </div>
    </div>

Next time, please restrict the topic one problem.

[osgood_]

BenPleysier  wrote
3) You could use d-flex for this, but in keeping with what you have, try the following
<div class="container">
<div class="row">         
<div class="col-sm-4 col-lg-3"><img src="RO_2013.png" width="182" height="75" class="img-fluid" alt=""/></div>         
<div class="col-sm-6 col-lg-3"><img src="NAWS.jpg" width="348" height="60" class="img-fluid" alt=""/></div>         
<div class="col-sm-6 col-lg-3"><img src="Naway99.gif" width="388" height="76" class="img-fluid" alt=""/></div>         
<div class="col-sm-6 col-lg-3"><img src="nn-mast.gif" width="353" height="60" class="img-fluid" alt=""/></div>       
</div</div>

Small correction - should be col-sm-6 NOT col-sm-4 - first instance. I know you just copied it from the website, so overlooked the error.

For the benefit of the OP - Bootstrap is made up of 12 columns. At the moment your code for the 4 images is col-lg-4+4+4+3 = 15 columns, hence why your last image drops to the next line.

[markf26988182]

Thanx Ben...but that doesn't work...the images are smaller.  Why can't the container (and/or the complete column) be the full width of the page, so as to accommodate the image sizes I prefer?  That's what's hanging me up...are all columns limited to '12'? (& if so, I'll need a different approach, I suppose).

Also...on the 3-4-4-4 thing, I myself wound up w/ the 3 # by resizing the column size (using the 'Resize Column' function in DW) of the left-most image, to reduce the spacing between it & the 3 images to the right, because it's not as wide as the others.  So, I guess in conclusion, what I'm looking for is...those 4 images to be their full size...in one line...& have the same spacing between them.

mf

also: sorry about the multi-issue post...(& my apologies to the admin, as well)...I'll split the other two off into separate posts later today.

[osgood_ · Accepted solution]

markf26988182  wrote

Thanx Ben...but that doesn't work...the images are smaller.  Why can't the container (and/or the complete column) be the full width of the page, so as to accommodate the image sizes I prefer?  That's what's hanging me up...are all columns limited to '12'? (& if so, I'll need a different approach, I suppose).

Change the class which your set of 4 images are in from 'container' to 'container-fluid' and remove all the <div></divs> which are wrapped around the images and just let them sit in the 'row' <div> then apply the classes 'd-flex' and 'justify-content-center' to the row plus add the class m-2 to each of the images as shown below:

<div class="container-fluid">

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

<img src="RO_2013.png" width="182" height="75" alt="" class="m-2"/>

<img src="NAWS.jpg" width="348" height="60" alt="" class="m-2"/>

<img src="Naway99.gif" width="388" height="76" alt="" class="m-2"/>

<img src="nn-mast.gif" width="353" height="60" alt="" class="m-2"/>

</div>

</div>

<!-- end container-fluid -->

EDITED,

You'll also need to add the class 'img-fluid' to all of the image tags to cater for smartphones:

<img src="RO_2013.png" width="182" height="75" alt="" class="m-2 img-fluid'"/>

[markf26988182]

THANX!, Ben

mf

[osgood_]

markf26988182  wrote

2) I added a nav bar below that, which looks nice (& functions correctly)...but I wanted the brand and all the links to be centered (like almost everything else on that home page); & can't figure that out.  Not sure if it should have been a div row w/ a text-center class; and then the nav bar nested in that?...but I need help w/ that as well.  [as an aside...what I've done is also not responsive...upon browser resize, as I close in the right side approaching cell phone width...the links disappear).

The mobile hamburger is disfunctional because you have NOT targeted the nav - your data-target and aria-controls should target #MainNavbar as in the second example below, not the first example, the code you currnetly using, which targets #navbarsExampleDefault

Eample 1- Incorrect:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">

Example 2 - Correct:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MainNavbar" aria-controls="MainNavbar" aria-expanded="false" aria-label="Toggle navigation">

I dont quite understamd about the brand and the links being centered? Currently the text in the brand anchor tag is way to long???? Are you saying you want that line of long text to be centered above the naviagtion items, which you also want to be centered, creating 2 lines?

[markf26988182]

osgood...

thanx...no, I want the brand and anchor all on the same line, exactly the way it looks now...but centered on the page.  Also, not sure what you mean about the brand being too long...all it says is: 'LINKS:'.

But I'll try your example now...thanx again,

mf

UPDATE: What button class...???...there's no button class in that code section

UPDATE II: I see what happened...you're referring to the nav bar at the top of the page...that's not the one I'm having trouble with...the nav bar I'm referring to is near the bottom of the page...the light colored one, where the brand is LINKS: (which doesn't have a button class)...that's the one I need the answers on...that one needs to look exactly the way it does now...but centered...thanx.

[osgood_]

markf26988182  wrote

osgood...

thanx...no, I want the brand and anchor all on the same line, exactly the way it looks now...but centered on the page.  Also, not sure what you mean about the brand being too long...all it says is: 'LINKS:'.

But I'll try your example now...thanx again,

mf

UPDATE: What button class...???...there's no button class in that code section

UPDATE II: I see what happened...you're referring to the nav bar at the top of the page...that's not the one I'm having trouble with...the nav bar I'm referring to is near the bottom of the page...the light colored one, where the brand is LINKS: (which doesn't have a button class)...that's the one I need the answers on...that one needs to look exactly the way it does now...but centered...thanx.

Wrap your bottom nav code in a <div> row and add the 'd-flex' , 'justify-content-center' and 'bg-light' classes, see below:

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

ALL CODE BETWEEN <nav> and </nav> HERE

</div>

<!-- end row -->

Yes, I initially thought you were referring to the top nav.

You need to look at how that bottom nav bar is going to work on mobile because at the moment users will have no way of seeing the links they get hidden and you have not included a way for them to be revealed.

[markf26988182]

osgood...

OK, did that...thanx!...but also had to remove what would have been the 2nd div class ( <div class="collapse navbar-collapse" id="LinksnavbarSupportedContent1"></div> ) for it to work...otherwise it looked like a bunch of gobblygook, w/ random text in between the links, etc.

so...here's what I have at present:

Burlington County Area of NA / Home page  (which includes Ben's fix on the 4 bottom images...which I'll thank him for in a minute)

but, as you see...the area containing the links (your div I added) is now too deep (to great in height).  How can I fix that?

thanx again,

mf

[osgood_]

markf26988182  wrote
so...here's what I have at present:
Burlington County Area of NA / Home page  (which includes Ben's fix on the 4 bottom images...which I'll thank him for in a minute)
but, as you see...the area containing the links (your div I added) is now too deep (to great in height).  How can I fix that?

That was actually my fix.

To correct the depth of the 'row' add 'm-0' to the <nav> tag and you don't need bg-light as that has now been applied to the 'row' which wraps the <nav>:

<nav class="navbar navbar-expand-lg navbar-light m-0"><a class="navbar-brand" href="#">LINKS:</a>

Also you havent closed the row which contains the <nav> - add the closing </div> after the clocing </nav>:

</nav>

</div>

<!-- end row -->

So your new code would be like below: (a couple of additional Bootstrap classes have been added as you want the LINK text to be above the links on  mobile devices NOT vertically centered to the left of them.

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

    <nav class="navbar navbar-expand-lg navbar-light m-0 d-flex flex-lg-row flex-md-column">

    <a class="navbar-brand" href="#">LINKS:</a>

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

        <li class="nav-item"> <a class="nav-link" href="http://www.jftna.org/jft/">Just For Today</a></li>

        <li class="nav-item"> <a class="nav-link" href="http://www.nanj.org/">NA / New Jersey</a></li>

        <li class="nav-item"> <a class="nav-link" href="http://www.njpn.org/">NJ Prevention Network</a></li>

        <li class="nav-item"> <a class="nav-link" href="https://www.nachatroom.net/">Online Meetings</a></li>

        <li class="nav-item"> <a class="nav-link" href="https://njrcna.com/">NJ Regional Convention</a></li>

        <li class="nav-item"> <a class="nav-link" href="https://www.na.org/admin/include/spaw2/uploads/pdf/litfiles/us_english/IP/EN3107.pdf">Am I An Addict?</a></li>

        <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Local AREA Websites </a>

          <div class="dropdown-menu" aria-labelledby="navbarDropdown">

            <a class="dropdown-item" <a class="nav-link" href="http://capeatlanticna.org/">Cape-Atlantic Area of NA</a>

            <a class="dropdown-item" <a class="nav-link" href="https://www.capitalareaofna.org/">Capital Area of NA</a>

            <a class="dropdown-item" <a class="nav-link" href="http://www.cjasc.org/">Central Jersey Area of NA</a>

            <a class="dropdown-item" <a class="nav-link" href="http://www.csascna.org/">Cumberland-Salem Area of NA</a>

            <a class="dropdown-item" <a class="nav-link" href="http://www.namiddlesexnj.org/">Middlesex Area of NA</a>

            <a class="dropdown-item" <a class="nav-link" href="http://www.ocanj.org/">Ocean Area of NA</a>

            <a class="dropdown-item" <a class="nav-link" href="http://www.southjerseyna.org/">South Jersey Area of NA</a>

            </div>

          </li>

        </ul>

       </nav>

<!-- end nav -->

      </div>

      <!-- end row -->

Also consider other suggestions posted here about optimising your images

[markf26988182]

osgood...

works like a champ...thanx!

(yes...on the image optimization...just haven't had a chance yet)

mf

[Nancy OShea]

markf26988182  wrote

OK...

Been reading everything I can get my hands on (relative to column size, in bootstrap); & working to learn DW CC 2018 tools/functions like mad...& although I am making progress...I can't seem to wrap my head around columns (& their appropriate containers), just yet:

Here's the site I'm designing; & what I have thus far:

Burlington County Area of NA / Home page

1) On the div row directly under the 3 main columns...the one that contains the paragraph w/ the text 'DRUG PROBLEM'...I can't seem to figure out how to manipulate that entire area to have a shorter height (div AND paragraph...but not the size of the text).

2) I added a nav bar below that, which looks nice (& functions correctly)...but I wanted the brand and all the links to be centered (like almost everything else on that home page); & can't figure that out.  Not sure if it should have been a div row w/ a text-center class; and then the nav bar nested in that?...but I need help w/ that as well.  [as an aside...what I've done is also not responsive...upon browser resize, as I close in the right side approaching cell phone width...the links disappear).

3) For the 4 images at the bottom (which will become links)...again the brain block w/ the column size thing; & as you can see...those images aren't side by side & centered either (which was my intent).  I went w/ the container from the original template; & have tried to resize the 4 columns using the native controls in DW...but I guess I need to make that container wider?  Or change the class in some other manner?

Any help will be appreciated...thanx,

mark4man

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

Large images with excessive bandwidth are slow loading and a burden to users on limited data plans.

This image is too big.  It needs to be resized and brought down to well under 100 KB.   Not sure I would use a GIF image.  JPGs are better for photos.

http://www.moonjams.net/John-Woolman-House-II.gif

697.79 KB (714,539 bytes)

1,200px × 927px

This one is also too big for purpose.

http://www.moonjams.net/RO_2013.png

1,651px × 681px (scaled to 182px × 75px)

All links must be easy for users to tap with their finger tip.  Link size should be at least as big as an average adult finger pad (9mm) with ample space around it.   A good starting point is 48x48 device independent pixels.

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

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

1) Height and width will vary based on viewport size.

2) I'm not loving the 2nd navbar.  It's not mobile-friendly.   And you can have only 1 responsive navbar per page.  I would place individual links into footer columns -- no navbar.

3) Replace what you have now with an inline list of images.

<div class="container">

<ul class="list-inline text-center">

<li class="list-inline-item"><a href="#"><img src="RO_2013.png" alt=""></a></li>

<li class="list-inline-item"><a href="#"><img src="NAWS.jpg" alt=""></a></li>

<li class="list-inline-item"><a href="#"><img src="Naway99.gif" alt=""></a></li>

<li class="list-inline-item"><a href="#"><img src="nn-mast.gif" alt=""></a></li>

</ul>

</div>