Now ideally I want to have my image centred properly but when I view it on my phone there’s a weird bit of horizontal movement (it always unnecessarily scrolls horizontally but I can’t work out why), I want to be able to vertically centre the image in its column when I view it on tablets but I can’t find a bootstrap command for that, and i’d like to be able to have some control over the point size of some of the fonts, but not all, when vieweing it on a mobile device. Personally I like the way it looks on a computer, but that’s not really enough.
Is it possible that screen size/resolution for a mobile or tablet device has an impact on how an optimised page displays?
I’ve been searching online and trying various things out but seemingly to no avail. Am I trying to do something impossible or just downright unnecessary? Any help or just pointing me in the right direction would be greatly appreciated!
Hi man, you have your margin set inside your #main-image selector which is over-riding your img-responsive and center-block classes. Simply remove your margin: 10px; from within your #main-image selector.
Funny tribute page, I like the idea To remove the horizontal scroll bar move the footer one level up and place it inside the main container. To center the image within it’s column add auto for left and right margin for the #main-image. A couple minor things: you opened the tag but never closed it. Also, it would be nicer if you used a hamster photo without a watermark. Hope that helps
@Nims That’s much better thanks for that! I did wonder if I had over-coded some of it. You know made classes and ids that were treading on each other’s toes.
@Beekey That’s all great advice. Unfortunately real-life beckons and I can’t try to apply those fixes right now. I’ll have a go at some point soon and let you know how it goes.
As for the watermark, I know but I wanted to get a non-copyrighted image, thought it was best practice. I don’t know how to get a non-watermarked image from the site. I’ll have a look into it though. Would be much more “professional” looking. Well as professional as a fake, tongue-in-cheek tribute to the life of a hamster could be.
@Beekey hadn’t realised that i wasn’t encapsulating the footer within the container! Thanks for that! In spite of slavishly annotating every div tag I just wasn’t properly checking they all were properly closed. I’ll take more care with that in future!
Page looks great now. As for the image and watermark. Absolutely, it’s an imperative to use images you have a permission to use. However, watermark slapped in the middle of an image is usually a sign of a copyrighted image, also it just doesn’t look right. You can google public domain hamster images, or try searching Wikimedia for pet hamsters, for example. You can also find an image you like on flickr and ask the photographer for a permission to use it. It takes a bit of an effort, but results in a nicer page. Although, that has nothing to do with coding, so you can also just skip it and leave it as it is.
@Beekey thanks for the advice that let me make my page look great. Thanks for the tips on finding public domain images. I just went with the first thing I found tbh.
@leactz thanks for the great link to some unwatermarked images! I much prefer the new image I found thanks to your tip - looks more like someone’s pet rather than a hamster model - and now no watermark!
Yeah. I like it as well. A search for “Free royalty free images” shows lots of sites. Pixbay is another one I have used, and there is no registration to go through.
Attributing sources in alt / title tags is okay to a point, but it my be necessary to find out what the usage terms are. Wikimedia Commons has many images, and they use the CC licence.
To remove the horizontal scroll bar move the footer one level up and place it inside the main container. To center the image within it’s column add auto for left and right margin for the 
