Why is this text overwriting?

Why is this text overwriting?
0

#1

Lower left, “Partly Cloudy”.

What I’ve noticed: if I write it w/o a space (ie: PartlyCloudy) it displays ok.
I’m guessing this is a problem with margins(?) as if I write a long string, it only starts at a point in the box and then spills out.


#2

If you remove the class “container” from the div#daily the text will get displayed in one line.
The container Bootstrap class adds a padding of 15px on left and right sides of a div


#3

I think a better way to write your weather containers would be like something below. I would try to steer away from overwriting to many of bootstraps procreated css classes. A better way to handle this is, if you want to modify say the class=”jumbotron” add a new class to it class=”jumbotron a-new-class” then add styling to “#a-new-class” … this will save yourself some headache down the road.

html

<div class="row">
      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        <div class="weather-wrapper">
          <p class="day">Tues</p>
          <p class="date">Nov 28</p>
          <p class="day_temps"><span class="high_temp">50&degF</span> | <span class="low_temp">32&degF</span></p>
          <p class="weather_icon"><img src="http://icons-ak.wxug.com/i/c/k/partlycloudy.gif" alt=""></p>
          <p class="conditions">Partly Cloudy</p>
          <p class="precip_chance">40%|0.5in</p>
        </div>
      </div>

      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        <div class="weather-wrapper">
          <p class="day">Day 2</p>
        </div>
      </div>

      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        <div class="weather-wrapper">
          <p class="day">Day 3</p>
        </div>
      </div>

      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        <div class="weather-wrapper">
          <p class="day">Day 4</p>
        </div>
      </div>      
    </div>

css class

.weather-wrapper{
  border: 3px solid black;
  border-radius: 15px;
  background-color:rgba(255,255,255,0.3);
  min-height: 230px;
}

#4

Thank you. I think I’ve got too much bootstrap on the mind from the earlier lessons. I’ve noticed that as I look at code (and especially code for these lessons) that bootstrap isn’t used as much as I thought.

It seems simpler and cleaner to use css. I had thought I learned that from my quote machine project, but…

oh well, thanks for the detailed answer, that’ll go into the memory bank.

Edit: I guess my only other question is how to control those boxes to grow/shrink with the info in them. For example, if I use a “line-height: 8px;” in the css to tighten up the forecast info, it leaves a big gap and even moves a little outside of the top of the box.


#5

I’ll reply to myself here…

After some searching and reading I came up with this:

<div class="weather-wrapper">
                    <div class="text-wrapper">
                        <p id="day0">Tues</p>
                        <p id="date0">Nov 28</p>
                        <p id="day_temps0"><span id="high_temp0">50&degF</span> | <span id="low_temp0">32&degF</span></p>
                        <p><img id="weather_icon0" src="#" alt=""></p>
                        <p id="conditions0">Partly Cloudy</p>
                        <p><span id="precip_chance0"></span> | <span id="precip_amount0"></span></p>
                    </div>
                </div>

I added an inner

wrapper to the “weather-wrapper” and
I added “display: table;” to the .weather-wrapper and
.text-wrapper {
            display: table-cell;
            vertical-align: middle;
        }

for the inner div, which perfectly centers the info in the box.


#6

bootstarp is very powerful, very fast, but yea you still need to create some custom pieces for sure. sorry it took so long to reply. Your solution looks good, keep it up.