Question "Build a Tribute Page"

1

Hello,

I am stuck trying to resize my image

img-responsive and also
.larger-image {
width: 1000px;
}
don’t work for some reason. Not sure why.

Advice?

AW

2

If you want that class (larger-image) applied to that image, then you need to include it as a class in the image, like:

<img src="https://farm5.staticflickr.com/4357/36751620563_4eb43aa1e0_m.jpg" class="larger-image img-responsive">

Also, that style information (inside the style tags) should be in the CSS pane, that’s how it’s done in codepen.

3

Hi Alice,
You need to append the style to the class.

      <div class="thumbnail"><img src="https://farm5.staticflickr.com/4357/36751620563_4eb43aa1e0_m.jpg" class="img-responsive larger-image>

Vista

4

try

img {
width: 100%;
height: auto;
}

Above should work, I find also W3 schools is very good.

5

Thank you! more Q below.

Funny when i move <“style>…<”/style> to css section in code pen larger-image and img-responsive works. However, now the coloring does not work.

When i leave <"style> tag in html, image resizing does not work, but color salmon works.

Advice?

My updated code:

6

I think the text color somehow inherited from your jumbotron element, and jumbotron style supercedes your text style. I managed to change the color by adding color styles on your jumbotron and it worked. You can also put the css style inline with the text you want to change. Inline css codes supposed to override the style in the external file.

7

Thank you. I move the css style inline. It works as I wanted now. :slight_smile:

8

I would avoid putting styles inline - it violates the principle of “separation of concerns”. Can you imagine if you had a 150 page site hand had to dig through 3000 lines of html to make a style adjustment for all the different elements? This is why (among other things) that CSS was invented.

I think your line:

$blue: #a3d5d3;

was causing problems in your CSS. It looks like you were trying to do some Sass or cut and pasted something you shouldn’t have. It think it was crashing your CSS pane. When I remove it, I’m able to get everything to work correctly.

ul {
  text-align: center;
  list-style-position: inside;
}

h1, h2, h3, h4, p {
  text-align: center;
}

h2 {
  color: salmon !important; 
}

.larger-image {
  width: 1000px;
}

and…



<div class="container">
  <div class="jumbotron">
    <div class="row">
      <div class="col-xs-12">
        <h1>Miss Lilith Wang</h1>
        <h2><em>Our little miracle</em></h2>
          <div class="thumbnail"><img src="https://farm5.staticflickr.com/4357/36751620563_4eb43aa1e0_m.jpg" class="img-responsive larger-image">
            <div class="caption text-center"> Lili newborn 1 month and 9 months old
            </div>
          </div>
          <div class="col-xs-12">
          <br>
            <h4>First time record:</h4>
            <ul>
              <li>Smile: right away</li>
              <li>Sit down: 8 months</li>
              <li>Stand up: 9 months</li>
              <li>Walk: 9 months</li>
            </ul>

            <h4>Things she love:</h4>
            <ul>
              <li>Books</li>
              <li>Roscoe</li>
              <li>Milk</li>
              <li>Shower</li>
            </ul>

            <h4>Things she dislike:</h4>
            <ul>
              <li>Meat</li>
              <li>Stroller</li>
              <li>Dirty face</li>
            </ul>

            <blockquote>
              <p>Wheels on the bus is her favorite song <em>~ Mama</em>                   </p>
            </blockquote>
            <p>
              Check out her <a href="https://www.instagram.com/explore/tags/lilithwang/" target="_blank">instagram</a> photo page for more records
            </p>
          </div>
        </div>
      </div
    </div>
  </div>

Be wary of short cuts and half-measures. They can cost you in the long run and their cost can grow exponentially with the size of the project.

9

Also notice the typo on your 3rd to last HTML line.

10

Thanks for the advise and for pointing out the typo. How do i know which line is causing a crash in the system? in Java or C, compiler will tell me which line crashes. Since we are not using a compiler, that privilege is not available?

11

Yeah, that’s a puzzler. Usually I would expect some error in the console, but there is none in either the browser’s or the codepen’s. I just noticed that that wasn’t standard CSS syntax. Sometimes to check that CSS is being reached I’ll put odd things in like color: red; or whatever.

Yeah front-end coding can be frustrating. In compiled languages, you get a nice list of error messages. With JS, et al., you have to root them out because they aren’t compiled until run-time. With that, you could have an error buried in your code without realizing it.

Whenever things aren’t behaving the way I want in JS, I just start strategically placing console.log statements to find the problem. CSS and HTML are harder. If you can’t find the problem, you could enter the code into a linter, of which there are more than a few online ones available.

12

I’ve been using chrome dev tool. Right click on your page, select inspect.
Top left corner of the tab there’s an arrow-square-thingy button, it lets you click on the element and check which codes applied on it. That’s how I know the font color is inherited from .jumbotron default color.
it’s very useful.
you supposedly can check js script too, pause it step by step, but i’m still figuring out how to actually use it properly.