HTML/CSS BestBite Project.....How to move text within offset columns


#1



BestBite Task 2


I'm trying to align the "."'s in Create. and Share. to line up exactly with the "." in Browse.


<div class="jumbotron">
      
      <div class="container">
        <div class="row">
          <div class="col-md-3 col-xs-offset-8">
          	<h2>Browse.</h2>
                 </div>
          	   <div class="col-md-6 col-xs-offset-8">
          		<h2>Create.</h2>
          		  </div>
         		    <div class="col-md-9 col-xs-offset-8">
          		       <h2>Share.</h2>
      				  </div>
                                       </div>


#2

why not simple use text-align: right;?


#3

Sorry, that didn't work.. that sent the text off the page..


#4

why are all the cols and offsets in different sizes? Looking at the code you provided, this makes no sense at all. Why is there a xs offset, but no xs cols? I don't understand, you used the cols to align the the text? That is super difficult and inefficient


#5

Ok, bro take it easy.. i've only been coding for a month...


#6

it is just a question, to try to understand what you did and why. What is the goal?


#7

I thought I was following the instructions of the assignment. I actually used this to align text:
.jumbotron h2 {
margin: 2px 2px 2px 2px;

}


#8

weird, they never use an offset in the actual page, what they do is very simple one column:

<div class="col-md-4">
  <h2>Browse</h2>
  <h2>Create</h2>
  <h2>Share</h2>
</div>

then use use .jumbotron h2 { margin: 2px 2px 2px 2px; } to reduce the margins between the headings. Since headings are block level elements, they will sit nicely below each other. If you then use text-align: right; the alignment is good as well.


#9

Hi
the sum of the column widths must not be bigger than 12. In your case, you have 3 + 6 + 9 = 18.

<div class="col-md-3 col-xs-offset-8">
...
<div class="col-md-6 col-xs-offset-8">
...
<div class="col-md-9 col-xs-offset-8">

Could you try to reduce the sum to 12?
Cheerio


#10

Thank you I'm flying by the seat of my pants here... very new and this positioning stuff is quite difficult...


#11

no, this question is part of a project (it was wrongly placed on the forum, which didn't make me realize this in first instance), he wants to have them aligned vertical, for which he should use only 1 col.


#12

Ok, thanks for the input.. the assignment is asking us to use offset columns....I'm sat here experimenting and learning by making many mistakes...


#13

i saw, but then they actually never use offset, but if you want you can of course use offset:

<div class="col-md-4 col-md-offset-2">

do use col-md-offset, not xs, they are for different screen widths


#14

ok, cool thanks again... i'll keep going....and let you know if i get it right...:grin:


#15

good luck :slight_smile: It has to be right, i peeked at the end product


#16

I ended up using offset columns:
class="col-md-4 col-md-offset-8"

and CSS:

.jumbotron h2 {
margin: 2px 2px 2px 2px;
text-align: right;
color: white;

}

It's very close if not exact to example and now I have a microscopically better understanding of offset columns, but as you stated your Code was much more efficient...

Thanks Again...


#17

take a look at this, it displays the different column size. you have a 8 offset, and a 4 collunm width, i know, it is not in the example, but it might help you understand something.

also realize that col-md is for screens larger then 992px (as you can see here)


#18

Okay, i've been reading that documentation, but having been dropped right in the middle of it, i don't have the correct reference point.
Is it related to @media queries? as from the example given in the same documentation: @media (min-width: @screen-md-min) { ... }
This media query is in my CSS.... should I have noticed this and stayed with md?

Also, is this stuff really difficult to get a handle on or i'm just thick?


#19

i just wanted you to look at the specific things i linked to, but reading the documentation is fine as well.

Well, bootstrap (which use to build your grid system) uses @media query's, to allows different columns for different screen widths.

Well, you can always scroll to the top, and start there? You know what bootstrap is, right? It is a css file, which you can use to build your html pages faster.

But your media query is different.(min-width: @screen-md-min) media querys are in the bootstrap css file, your media query is in your css file. You can have multiply media query's. Media query's allow you to have different css, for different screen widths.

bootstrap uses a bunch of media querys to allow you to build your grid system in such a way, it also works smooth on mobile. You can stick with col-md for know, but i thought: if look at the image of the different col-md's, might help you better understand it


#20

yup, thanks for that ... the diagram does help.... I think for me, doing is seeing. At the moment it's difficult for me to translate that diagram into code and code into reality..
I did look at the specific links .. thanks for your help!