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

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

  • May 30, 2018
  • 3 replies
  • 5667 views

[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

    This topic has been closed for replies.
    Correct answer osgood_

    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/

    3 replies

    M
    markf26988182Author
    Known Participant
    May 30, 2018

    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

    M
    markf26988182Author
    Known Participant
    May 30, 2018

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

    mf

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    May 31, 2018

    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


    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.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 30, 2018

    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— Product User & Community Expert
    O
    osgood_Correct answer
    Legend
    May 30, 2018

    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/

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