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

Report · May 30, 2018

[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

Report · Jun 04, 2018

OK, thanx...but then...why is the 2nd navbar showing it's links?

mf

Report · Jun 04, 2018

Because you have set the code up differently to the top default navbar, which is the standard code set up pretty much anyone who develops with Bootstrap uses., give or take a handful of advanced Bootstrap developers who might code something with a variation on tne hamburger workflow or use some kind of slide in, slide out panel.

Your second nav uses a non toggle workflow apart from the last link, so you either had that solution in mind when coding or it somehow happened by mistake.

Report · Jun 05, 2018

thanx, osgood...

so...can I just recode the top navbar to be in concert w/ the bottom navbar? (i.e., is there some bootstrap rule that states I have to have a main navbar w/ a stupid hamburger?) I want ALL my links to show...that's one of the main purposes of the site, to get people in need help as quickly as possible. If bootstrap is set up so rigidly it cannot accommodate that, maybe it's not that great of a system.

anyway...I'll try that on my own & see if it works.

thanx again,

mf

Report · Jun 05, 2018

markf26988182 wrote
thanx, osgood...
so...can I just recode the top navbar to be in concert w/ the bottom navbar? (i.e., is there some bootstrap rule that states I have to have a main navbar w/ a stupid hamburger?) I want ALL my links to show...that's one of the main purposes of the site, to get people in need help as quickly as possible. If bootstrap is set up so rigidly it cannot accommodate that, maybe it's not that great of a system.
anyway...I'll try that on my own & see if it works.
thanx again,
mf

The idea of the hamburger is so the navigation takes up less space on mobile devices and more of the actual page content (the good stuff) is visible to the user.

If you're happy with the links always being on show you can recode your top navbar as below.

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

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

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

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

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

</ul>

</nav>

You almost certainly on mobile devices want to stop the navbar being (sticky) fixed IF you do decide to always show your links, otherwsie on a smartphone the website would be virtually unusable, so you must add the below media query to you css selectors

@media (max-width: 768px) {

.sticky-top {

position: static;

}

This will allow the navbar to scroll on small screens bbut stil be sticky on large screens.

I dont think Bootstrap 4 has yet introduces a utility class to add to the navbar for mobile devices so you need to use a media query.

Report · Jun 05, 2018

Of course if you like working in a chaotic mess such as what Bootstrap provides that's perfectly alright, plenty of aliens do just that. I much prefer to work in a more streamline workflow and keep ALL the styling classes out of the html and in the css where it belongs:

This would be the equivilant html. A lot nicer to work with when you are trouble shooting your html files. Others like to spend half their time in the dev browser tools scratching their head as to exactly what attribute has been applied to what Bootstrap style.

<ul>

<li><a class="active" href="meetings3.html">MEETINGS</a> </li>

<li><a href="#">Committees</a> </li>

<li><a href="#">Events</a></li>

<li><a href="#">Unity</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

No more css than what is in the Bootstap css file, if you care to search for it, infact a lot less: Aliens tend to believe Bootstrap is streamlined because they never see the css but behind the scenes its a complete utter mess and lots of garbage going on.

<style>

.main-nav {

background-color: #343a40;

padding: 7px 20px;

}

.main-nav ul {

display: flex;

flex-wrap: wrap;

justify-content: center;

margin: 0;

padding: 0;

}

.main-nav li {

margin: 0;

padding: 0;

list-style: none;

}

@media (max-width: 768px) {

.main-nav li {

text-align: center;

width: 100%;

}

.main-nav a {

text-decoration: none;

color: #a6a6a6;

display: block;

padding: 8px 8px;

}

.main-nav a:hover {

color: #ccc;

}

.main-nav .active {

color: #fff!important;

}

</style>

Report · Jun 04, 2018

It's not really possible to have more than one responsive navbar that toggles. If you must have more links on your page, consider using Pills, Tabs or ordinary text links. See link below for code examples.

Bootstrap 4 Navs

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 04, 2018

Of course its possible to have more than one responsive nav bar that toggles. You can have as many as you like. I dont know if Bootstraps components restrict the code challenged but l could write 10 or 20 responsive nav bars if required

Report · Jun 04, 2018

Lots of things are possible but not necessarily what people want or expect. Navigation is fundamental to the overall UI/UX experience. I can't think of any good websites with more than one hamburger menu, can you?

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 05, 2018

Its possible.

Report · Jun 03, 2018

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— Product User, Community Expert & Moderator

Report · Jun 03, 2018

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

Report · May 31, 2018

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— Product User, Community Expert & Moderator

Report · May 31, 2018

It's different to most Bootstrap sites.

Report · May 31, 2018

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

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

1 Correct answer