Swank Featured Circles Mobile Alignment

[NCKTessa]

I just did some tweaking in the Media Queries section of my stylesheet to get the featured circles widgets appearing as I want them on all device sizes. However, I have ONE little, hopefully easy problem left.

On iPhone only (or that size specification--no issue with iPad mini or above), the page title "Services" is too wide to fit the width and is wrapping, causing the circles to be out of alignment. Is there a way to fit the text shown (the page title or whatever I currently have in the circle) into a specific width, so it doesn't wrap? I don't care if the titles appear to show slightly different font sizes. Most mobile users won't even land on this page, but I'm trying to keep it cleaned up.

http://www.naturalcomfortkitchen.com/

[Victor Font]

It's very unusual to see the widgets aligned horizontally on such a small screen. Generally, the most common practice is to assign of width of 100% to the widget once the screen shrinks below 1023px.

Anyway, all you need to do is change the font size. Look for the @media query section of style.css and add the following block to the appropriate media query:

.featured-circles.widget-area h2.entry-title a {
font-size: 17px;
}

You can test the results here: http://www.studiopress.com/responsive/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[NCKTessa]

Thanks. I actually had to use:

.featured-circles.widget-area .entry-header h2.entry-title a {
font-size: 17px;
}

to get it to work. I had no idea about the responsive testing tool--so helpful! I'll be using that more for sure.

[Author]

Posts