No responsive Title in class 'entry-title has-shade'

[inetmedia]

I have a little Problem with the h2 class=entry-title has-shade
The Content are not smaller on mobile View.

<div class="article-wrap"><article id="post-1538" class="post-1538 post type-post status-publish format-standard hentry category-unternehmensberatung-1"><div class="featured-image-wrapper attachment-grid_4 wp-post-image"><div class="featured-image"></div>
      <!-- .featured-image (end) -->
    </div>
      <!-- .featured-image-wrapper (end) -->
    <div class="entry-content"><h2 class="entry-title has-shade"><a title="Unternehmensberatung" href="http://schillinger.speedbase.de/de/?p=1538"></a></h2><span class="excerpt"></span></div>
      <!-- .entry-content -->
    </article>
      <!-- #post-1538 -->
    </div>
      <!-- .article-wrap (end) -->

Can i fix it?
best regards Ralph

Topic

[Jason Bobich]

Hello Ralph,

Can you please try to explain what the issue is more descriptively? Can you please also provide a live link to the issue? This will help a lot, as I honestly just have no idea what you’re asking.

[inetmedia]

Hello Jason, tx4answer!
I have create a Screenshot: http://schillinger.speedbase.de/support1.jpg
The demo & development URL : http://schillinger.speedbase.de/de/
Manipulate the Screensize and you see what i mean…
best regards
ralph

[Jason Bobich]

The word is just too long as the site scales down. There’s not really much you can do accept just tweak things with CSS as the site scales down. You could maybe make the titles smaller, adjust the letter spacing, etc.

This would look something like this:

@media (max-width: 960px) {	
	h2.entry-title a {
		font-size: 14px;
		letter-spacing: 0;
	}
}

In the next update to the theme, these “in between” viewport sizes are handled much better.

====

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[inetmedia]

OK – Thanks!
best regards
Ralf

[inetmedia]

Hello Jason!

I have the same header problem in a normal post-list.
See screenshot: http://schillinger.speedbase.de/post-header1.jpg
All CSS changes are not running.
Have you a Idea?

best regards Ralph

[Jason Bobich]

@ Ralph I’m not quite following you. — I’m looking at the screenshots, but what is unresponsive about this? Or what is the issue exactly? Something to do with the header shade?

[inetmedia]

Hello Jason!

I mean the Font-Size only: The H1 / H2 Headertext must change to a smaller Font (12px… 10px), when Screensize is iPad/iPhone ….

best regards
ralph

[Jason Bobich]

The theme doesn’t have any general styling to make all headers small as you go down, but you’re totally free to make those CSS customizations, if you wish.

Here’s how you can style things as you move down in viewports:

/* Desktops */
.whatever {
	...
}
.whatever-else {
	...
}

/* Tablets */
@media (max-width: 960px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

/* Mobile */
@media (max-width: 480px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

[Author]

Replies