Skip to main content
M
markf26988182
Known Participant
May 29, 2018
Answered

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

  • May 29, 2018
  • 3 replies
  • 1507 views

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

    This topic has been closed for replies.
    Correct answer osgood_

    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.


    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'"/>

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 29, 2018

    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>

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    May 29, 2018

    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?

    M
    markf26988182Author
    Known Participant
    May 29, 2018

    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.

    O
    osgood_
    Legend
    May 29, 2018

    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.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    May 29, 2018

    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.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    O
    osgood_
    Legend
    May 29, 2018
    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.

    M
    markf26988182Author
    Known Participant
    May 29, 2018

    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.

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