My tribute to Jimi Hendrix, i appreciate any feedback and also need help to make it responsive :)

My tribute to Jimi Hendrix, i appreciate any feedback and also need help to make it responsive :)
0

#1

Hello everyone this is my tribute page to my favourite guitarist: Jimi Hendrix
Actually i’m pretty satisfied with the psychedelic look (:D) but i just don’t know how to make it responsive. When i put Bootstrap in, things start moving out of place and i can’t give a circular shape to the image (it becomes elliptic i don’t know why :/)

This is my first coded stuff ever, so i 'll realy appreciate any kind of feedback and help.

Here’s the link: https://codepen.io/Migue0101/full/bZJaNO/

Thank you :slight_smile:


#2

Maybe this article will help: https://www.abeautifulsite.net/how-to-make-rounded-images-with-css


#3

Because your image is not perfectly square, you either get an ellipse, or when you try and dimension as a square, you get a squashed image. I make a quick crop as a test http://i.imgur.com/UDXQg9q.jpg BTW, I really like your tribute, great job!

Cheers


#4

Hey guys thank you for you replies i also appreciate the positive feedback :slight_smile:
i’ve fixed the image issue by downloading the pic and resizing it making it perfectly square.
But i can’t figure out how to fix the responsiveness problem…when i put Bootstrap in, some elements move away from their place (the description of the video and the “back to top” part) i don’t know why, and also when i insert the "div class=“row” and “col-x-x” things don’t resize at all.

if anybody can help me it would be really appreciated :smiley:


#5

My guess is you have probably overridden Bootstrap with all of you custom CSS :smile:
You can use the class img-circle to make the image circular and img-responsive to make it scale when resizing the screen. Without writing anything else in your CSS! Bootstrap can do a lot of work for you, read here: http://getbootstrap.com/css/#images
First rule of Bootstrap: put everything into a container. See here: https://www.freecodecamp.com/challenges/use-responsive-design-with-bootstrap-fluid-containers
You also don’t need to put the body element in Codepen.
I’d suggest you to review Bootstrap challenges :slight_smile:


#6

Guys thank you all for your replies, i’ve fixed all, now my tribute page is also responsive, you can check it if you want :slight_smile: