Hello everyone and thanks for the help in advance. I am a backend developer wading into the world of front end design and Bootstrap for the first time. I have a page located at http://dianamclaughlin.com/home/index2. I have two immediate problems. First, when this page is displayed in a regular browser, it displays mostly fine, however, on a mobile screen, everything goes awry with the header pushing down into another row. Since I’m new to Bootstrap, I was thinking it would handle the text resizing properly without intervention of media queries. I’m not sure what I need to do. Second, in a full screen browser, I am trying to center the name and titles similar to the image at http://dianamclaughlin.com/images/logo.png, using vertical-align: middle, but that doesn’t seem to work. Any help would be appreciated.
Bootstrap is really not my thing, but I know a limited amount about it.
You are setting up your containers with row and col classes, but to control how these behave on varying size screens you need to add additional classes which define their widths.
A row is divided into 12 sections of equal width, all the 12 width sections must be divided between the columns. So with 3 columns you couls alocate 4 to each to have equal width columns, or you can divide it unevenly, Eg: 3, 3 and 6 to have the last take half the width.
Though best to check out the documentation for more info about the classes to use on columns.
Well, I’m utterly awful at UI, so I’m stumbling around looking for the easiest way to build some responsive sites. I was under the impression from the documentation that Bootstrap handled this. Am I really better off staying away from Bootstrap and just learning Flexbox or the like? I’m never really going to be a Ninja at UI, but need a little core competency.
If your working alone on your code I think your time will be better spent learning CSS rather than a framework like BS. When your working with a development team frameworks can be beneficial, but for an individual like myself I have no use for them.
You must invest time to learn the framework but I would rather spend that time learning the core competency of modern CSS. And yes, Flexbox will be a good starting point but not everything needs to be done with it. It’s just another tool and you need to know when to use the correct tool. But it just so happens that flex would be a good choice for what your wanting to achieve.
Based on the image you posted I put together an example for you. You will still need to learn Flex to know how to use it but the demo should help point you in the right direction.
Hope that helps 
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
.wrap {
max-width: 65em;
margin:auto;
}
ul {
margin:0;
padding:0;
list-style:none;
}
header {
display:flex;
flex-flow:row wrap;
align-items:center;
}
.heading {
display:flex;
flex:1 1 auto; /*heading is also a flex item of header*/
justify-content:center;
align-items:center;
/*outline:1px dashed red;*/
}
h1 {
text-align:right;
color:#2f5f8e;
}
h1 span:first-child {
display:inline-block; /*shrinkwrap it for left border*/
color:#f68747;
border-left:1px solid #c0c0c0;
}
h1 span:last-child {
display:block; /*drop down to new line*/
}
.heading ul {
border-left:1px solid;
margin-left:.25em;
padding:.5em .25em;
font-weight:bold;
}
header li:nth-child(1) {color:#862b2d}
header li:nth-child(3) {color:#00681b}
ul.fields {
display:flex;
flex:1 1 50%; /*ul.fields is also a flex item of header*/
justify-content:center;
font-style:italic;
font-size:1.2em;
padding:0 1em;
/*outline:1px dashed red;*/
}
.fields li {
flex:0 1 auto;
}
.fields li:nth-child(1):after,
.fields li:nth-child(2):after {
content:"\2022";
color:#000;
margin:0 .5em;
}
.about {
border-radius:6px;
margin:.5em 0;
padding:1em;
font-size:1.2em;
font-weight:200;
background:#eee;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="heading">
<h1><span>Diana</span><span>McLaughlin</span></h1>
<ul>
<li>M.D.</li>
<li>M.B.A.</li>
<li>Esq.</li>
</ul>
</div>
<ul class="fields">
<li>Medicine</li>
<li>Business</li>
<li>Law</li>
</ul>
</header>
<div class="about">
<p>About Diana McLaughlin, M.D., M.B.A., Esq.</p>
</div>
</div>
</body>
</html>
It can, but it is not automatic. Simply linking to the BS stylesheets and putting row and col classes on elements will not magicaly make a page responsive as you intended. You must add more specific BS classes to instruct it to your intended layout, it can’t read your mind. You have to learn how to use the framework.
I think it would be a better use of your time. Learning a CSS framework without learning CSS is like one of those special shortcuts, you know the sort that makes things slower and more difficult in the long run.
Once you get a decent grasp of CSS, you may find that you never needed BS in the first place.
First of all thanks so much. It works perfectly with one question. To the left of Diana, there appears to be a faint vertical bar that I can’t figure out what is causing it. Aside from that, obviously, I need to figure out the css, but you gave me some great notes to follow. Yes, I am a one man band, so I will heed your (and a few other’s advice) and just bite the bullet to learn css. I keep reading about the virtues of BS, but it looks like it really isn’t for novices like me.
That was shown in your logo img so I coded it in.
It is the left border on the first h1 span…
h1 span:first-child {
display:inline-block; /*shrinkwrap it for left border*/
color:#f68747;
border-left:1px solid #c0c0c0;
}
Like I said. I’m really a novice at this. Thanks for the help. I need to read through the css line by line to understand it, but I’m assuming the flexbox replaces the need for a media query>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.