Webseitentitel nur ab bestimmter Auflösung anzeigen

Theme: Tesseract

Hallo Freunde,

da ich nun einen Button im header angebracht habe, der nur auf mobilen Endgeräten bzw. erst ab einer Auflösung von 769px angezeigt wird ergibt sich ein neues Problem. Auf einem Smartphone steht nun im header das Menü, der Button und der Webseitenname. Der Name ist allerding unpassen, da er zu groß ist und sich mit dem Button überlappt. Nun habe ich versucht den Webseitennamen nur anziegen zu lassen, wenn eine bestimmte große überschritten wird. Leider funktionierte das nicht ganz nach meinen Vorstellungen und hat nicht wirklich geklappt.

Hier der Code:

<?php if ( $logoImg || $blogname ) { ?>
                            <div class="site-branding <?php if ( ! display_header_text() ) { echo 'hide-header-text'; } ?>">
                                <?php if ( $logoImg ) : ?>
                                    <h1 class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo $logoImg; ?>" alt="logo" /></a></h1>
                                <?php else : ?>
                                    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>


<style>






@media (min-width:769px) {
    .site-title {
      display:none;
    }}
</style>
                                <?php endif; ?>
                            </div><!-- .site-branding -->
                        <?php } ?>

Hab jetzt den Code auf max-widht umgestellt. Leider passiert mit dem Titel nach wie vor garnichts, vielleicht codiert eine andere Stelle für das Anzeigen des Titels. Site-title erschien mir aber am plausibelsten. Idee was ich noch probieren sollte? :)

Klar, ich möchte ihn allerdings danach löschen. Da ich Beiträge ja nicht viel später bearbeiten kann muss ich dann ein speziellen Forum-code benutzen?

SirErectors Vorschläge haben das Problem schon gelöst. Abermals Danke!