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.
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!
Hey guys thank you for you replies i also appreciate the positive feedback
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
My guess is you have probably overridden Bootstrap with all of you custom CSS
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