Use the Power of Classes in CSS To Target Specific Page Elements
Recently I decided to spiff up the look of my About page. At the top were two square thumbnail images side-by-side – kinda plain. I decided I wanted to show larger images, make them circular, and make sure they looked good on mobile. This was crucial. I advertise that I build web sites. If a potential client is browsing my web site on an iPhone, and my About page looks disjointed, why would they hire me?
Add Some Class
I started by inserting the images from the Media Library, however, attempting to target them for specific styling wasn’t working. To solve this, I created a new class and as part of that, set the URL for the image I wanted on the background property. Also in the class I’ve set the border-radius to create the circular shape and additional properties for height, width, etc.
https://gist.github.com/gspice/22867ca412527331c0581a25ba097308
How To Use It
So now that the properties are set, how do I use it? Easy!
<div class="img-circular-about-us-1"></div>
Seriously, that is it. You can place that div into the Text editor of a page, post or even a text widget. It almost acts like a short code. Hat tip to Jackie D’Elia who first shared this with me when creating the initial design for a previous site.
What About Mobile?
So now the larger images on the page looked great! That is until I viewed them on mobile. Ick — on mobile phones especially, the circles were not centered which occasionally left random amounts of text on either side. Worse, the different phone sizes caused the circular images to be stretched tall or squished wide. In looking at the mobile screen sizes, I noticed the first breakpoint in my Utility Pro starter theme is 320px wide which is the iPhone 4/5 width. The next breakpoint isn’t until 480px wide. This leaves a large gap for the latest iPhone 6/7 (375px) and iPhone 6/7 Plus screen sizes (414px).
In this case I decided to create two new breakpoints to accommodate both of the latest iPhone’s screen sizes. In my opinion, even if I only use these for this one class, it’s still worth it.
https://gist.github.com/gspice/13fe7f65acc07198e6c823e7c53ccb7c
Other Uses for Classes
The beauty about using a class is you can apply a completely different look to an HTML element that is already defined. For example, say you created a landing page for a promotion and you wanted the headings and anchor tags (links) to look very different from your main site.
To accomplish this, in your CSS you’d create new classes like .wacky-heading{css} and .wacky-links{css}. Next, in your page content, instead of <h2>My Wacky Heading</h2> you’d change it to <h2 class="wacky-heading">My Wacky Heading</h2>. For anchor tags you add the class like this: <a href="http://www.example.com" class="wacky-links">this text is linked</a> and it would pick up your new styling properties in the classes you created.
Pretty cool, huh?
Share your thoughts...