Today, I’ve been playing around with CSS. And if you’ve used Bootstrap, you might be confused on how it works. Heck, I’m confused too. About how it overlaps and stuff. So following the blog post that I talked about recently I attempted to edit the CSS for my site.
And it wasn’t working.
In the <head> of my template I imported two css files (this is on top of the default bootstrap.css which is imported elsewhere)
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<link href=”css/custom.css” rel=”stylesheet”>
I used this exactly as how the blog post told me to. Attempted to edit custom.css but none of the changes were being carried. Debugging it, I found that it imports if I removed bootstrap.min.css. custom.css doesn’t override the first file. Oh well. Guess I’ll just have to make my additions to bootstrap.min.css (according to Google, this is the “mini” version of bootstrap.css without comments and everything.
The nice thing about CSS is that it follows the naming of items in your html quite accurately, so you can restyle specific elements of your html. My file looks something like this:
Where p is the style of all the portions which have the tag <p> in my code, .navbar-nac li a is the style of all <li><a> tags in specifically the navigation bar, and so on.
Additionally, I’ve done a fun little thing where my images become dynamic and are contained within the columns, so no more awkward pictures spilling to the sidebar no matter what size it is.
I mean look at it, its hideous.
So looking through the web I found all sorts of plugins (which don’t work) that claim to solve this issue. In the end, I managed to find a CSS solution.
I’m not sure how much of this is needed, but these were the codes I added to the various theme files (if you followed the tutorial I linked previously, you should have these files too:
Into content.php, add the tags that will make images responsive/fluid when defining the class:
<div class=”img-responsive img-fluid blog-post”>
In addition adding to the css:
Into bootstrap.min.css, define the maximum size that the image can be, because I want the height to maintain its aspect ratio when the width moves, I use auto. Max-width is at 100% to follow the size of the class:
.blog-post img {
max-width: 100%;
height: auto;
}
So now, if you shrink your browser (or use your phone), the images should be nicely scaled according to the browser size.
