Tribute to Johnny Cash - constructive feedback welcome!

Hello all - Here is my Tribute page. It’s not fancy; I wanted to keep it simple and straightforward like the sample Tribute page. I welcome any and all constructive feedback!

Two issues I know I need to find out how to resolve:

  1. Would like to learn how to apply a rule that would prevent the width from going beyond a specified “narrowness”. For example, I’d like to ensure the h1 and h2 do not wrap.
  2. Why am I unable to reduce the font-size for the blockquote? Is this a Bootstrap thing? If yes, is there any way to override? I used Bootstrap 3.

Thanks for your time and support of this CodeNewbie’s efforts,
Janice

[FCC Tribute page] https://codepen.io/ConnectExtend/pen/OxBydM?editors=1100

To solve the issues you pointed out.

  1. To stop your text from wrapping. Put this in the container div.
white-space: nowrap;
overflow: hidden;

Not sure why you would want to do this though. If it doesn’t wrap, the content wont look too good on mobile screens. Your better just making sure the site is mobile friendly rather then setting nowrap to text headers. If the headers are flexing a little too soon, just make sure you have width set to 100% of the container element so it doesn’t wrap when it still has plenty of space left.

  1. The way CSS works is if there are two conflicting style sheets, it will pick the one that is more accurate and use that.
    For example. In your code. The blockquote text size is set with this code in bootstrap.
.jumbotron p {
    margin-bottom: 15px;
    font-size: 21px;
    font-weight: 200;
}

I found this by using developer tools in chrome and the select element tool.
So if you for example select the p tag and set font to say… 60px;

p {
   font-size: 60px;
}

Its not going to work because its not being exact enough compared to the code used by bootstrap CSS. For your situation something like…

blockquote.background p {
  font-size: 60px
}

Would work just fine. :slight_smile: So if your using something like bootstrap and your styles aren’t working? First make sure you linked them correctly lol :joy: . But then make sure that there’s not a more specific selector overriding your CSS in bootstrap.

https://imgur.com/a/i40pk

Hope that answered your questions. Back to the site though, it looks great! Not too unique though. Might wanna come back and redo the CSS one day when your better at styling. For now though? Especially if your still new to this thing? Awesome. :+1:

Thank you for your feedback, @ItsRoyal.
Based on your guidance, I’ll be sure to (1) get a better understanding of style-sheet conflicts and specificity, and (2) add “troubleshoot with dev tools” to my Read-Search-Ask tasks.
Much appreciated!

1 Like

Hola soy nuevo en esto debo crear una pagina de tributo pero no se como debo agregar una imagen desde internet, la imagen que necesito es de nicolas tesla. Me puedes ayudsr con eso?

Hola Adri,
Para las imagenes, hago un screen capture usando Green Shot y las mando a imgur. Despues en el menu de Green Shot, selecciono la opcion imgur > history. Un link a la imagen esta esperando y lo copio al clipboard and lo uso con . Pero debe haber miles de maneras de hacer algo parecido. Yo tambien soy nueva con todo esto. ¡Suerte!

1 Like

Gracias por la ayauda! :wink: