Change font size on the sliding featured image of superhero theme

singinkuz · Member · Mar 21, 2015 at 2:45 pm
Copy link

Add topic to favorites
Hi my blog is https://musicampto.wordpress.com/ and I must reduce the font sizes on the sliding featured image. I am using superhero theme.

I think it’s a little too big for my computer screen and want to reduce it a little. However, I am hoping i can assign a different and even smaller font for ipads/tablets cuz at the moment on the ipad the title of the post on the featured image covers up sooo much of the image!

I am also wondering how it would be possible to make the “MusiCamp 2015 Weekly Themes” come up as the first featured image rather than the “Testimonials and Endorsements”.

Thanks

The blog I need help with is: (visible only to logged in users)
staff-happychia · Staff · Mar 22, 2015 at 7:33 am
Copy link
The current font size of the featured posts on the slider is 1.9em set by the following rule. Please reduce the size as you wish.
```
#featured-content .slides .featured-hentry-wrap h2.entry-title {
    font-size: 1.9em;
}
```
Since we are not using media query with the above style, this applies to all screen sizes so iPad / tablets are covered as well.

The posts are displayed on the slider in the descending order of the post dates as following:

Testimonials and Endorsements (16/Feb)
Instrument Making at MusiCamp (11/Feb)
2015 Weekly Themes (7/Feb)
West African Drumming Camp (7/Feb) – (this post must have been published at earlier time on 7/Feb that the above post.)

So please try adjusting the dates of the posts and see if they re-order on the slider.
singinkuz · Member · Mar 23, 2015 at 2:46 pm
Copy link
Great! Thanks. I am happy to have reduced the size. It looks perfect on the computer screen but the font size is still too large for my tablet. Anyway to reduce the font just for the tablet?
thesacredpath · Member · Mar 27, 2015 at 3:44 am
Copy link
Hi there, we can use a Media Query to reduce the font for a certain width of screen/window and narrower. It looks like 768px (the width of an iPad in portrait orientation) would be a good starting place. Add the following at the bottom of your CSS and you can adjust the font size to your liking.
```
@media screen and (max-width: 768px) {
#featured-content .slides .featured-hentry-wrap h2.entry-title {
    font-size: 1.9em;
}
}
```

No items found.