Tribute Page - Alice Cooper - Solved

Code Feedback
1

Hello everyone,

I have just finished my tribute page! The list items aren’t quite behaving how I 'd like them to though, any suggestions?

Any and all feedback welcome.

Thanks in advance!

2

Hi @KarlMiller,

img-responsive seems not working. You have included bootstrap 4. Please have a look at:

Note: codepen automatically includes bootstrap4 although it is still alpha. better go with bootstrap 3

For your list items: try list-style: none;

Your content is not responsive. It is not enough to include the bootstrap css, you also must use it in your code.

google around about bootstrap grid with row and col

Kind regards
@daveyx

3

Thank you @daveyx!

The image is better but for some reason, the whole page isn’t responsive and the content over-flows the “jumbotron”.

4

Hi @KarlMiller

coz you are not using bootstrap v3 correctly. try to switch to bootstrap 3 and use their grid system with class=“row” and class=“col-XX-Y”

If you want, you can check my code: http://codepen.io/daveyx/full/jBNXRd/ how i use bootstrap 3 with row and col. my content does not overflow the jumbotron :wink:

you can look in the settings of my codepen how to integrate bootstrap 3

Kind regards
@daveyx

5

Forgive me Davey, your page looks great and responds beautifully, however, is there really a need for all those columns and divs?

6

Hi @KarlMiller

i don’t judge you, there is nothing to forgive, it is just from my point of view.
yeah, i use row and col HEAVILY and i still don’t know if this is the right approach to use all those columns and divs :smile:
But one thing is a fact, as you say it by yourself: my page responds beautifully.
Of course one can use a html-table or go with li-elements in order to get the same result.

Kind regards
@daveyx

7

@daveyx I’ve followed up on your version instructions and I’ve made a few changes, it’s still not 100% but thank you. I might remove the bullet points with css if I can’t line them up. At least it works on mobile!

8

Hi @KarlMiller,

yeah, it look like your page now responses much better, very cool, you are on a good way.

note that you switched to bootstrap3 for css, but in the javascript section you still are referencing bootstrap4.

you may wanna read about media queries. with them you can aply different css rules for different screen sizes, for example have a look here:


and here:
https://getbootstrap.com/examples/grid/

Kind regards
@daveyx

P.S.

  • If you like any of my answers feel free to like it by clicking the heart-button
  • If you feel like your topic is solved, you may want to mark your topic as solved
1 Like