Support » Themes and Templates » Mobile website won't scale logo

Mobile website won't scale logo

  • slampoketuckdope


    hey guys, im using the gridly theme on my wp ( www(.)slampoketuckdope(.)com, but it seems like it cannot scale my logo for the mobile website, does anyone know how i can make it scale the logo down for mobile pages or how i can insert a separate logo just for mobile?

    here is a screenshot of what im talking about: http://imgur.com/fWinC

Viewing 5 replies - 1 through 5 (of 5 total)
  • See if #logo img {width:100%} does it. Add it to your theme’s stylesheet.



    unfortunately it didn’t 🙁 my .css is literally empty, is there somewhere i should add it on the header?

    <!DOCTYPE html>
    <!-- Gridly WordPress Theme by Eleven Themes (http://www.eleventhemes.com) - Proudly powered by WordPress (http://wordpress.org) -->
    	<!-- meta -->
        <html <?php language_attributes();?>>
    	<meta charset="<?php bloginfo('charset'); ?>" />
    	<title><?php bloginfo('sitename'); ?> <?php wp_title(); ?></title>
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
        <!-- styles -->
    	<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/css/reset.css" />
        <?php  $options = get_option('plugin_options');
    			$gridly_color_scheme = $options['gridly_color_scheme'];
    			$gridly_logo = $options['gridly_logo'];
    			$gridly_responsive = $options['gridly_responsive'];?> 
       <?php if ($gridly_color_scheme == 'dark') { ?>
        	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/dark.css" />
    	<?php  } elseif ($gridly_color_scheme == 'custom') {  ?>
        	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/custom.css"/>
        <?php  } else {?>
             <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/light.css"/>
        <?php  } ?>
        <?php if ($gridly_responsive != 'no') { ?>
        	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
          	<link rel="stylesheet" type="text/css" media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="<?php echo get_template_directory_uri(); ?>/css/mobile.css" />
        <?php  } ?>
     	<!-- wp head -->
    	<?php wp_head(); ?>
        <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    <body <?php body_class(); ?>>
    <div id="wrap">
    	<div id="header">
        	<div id="logo">
            	<a href="<?php echo home_url( '/' ); ?>"  title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                     <?php if ($gridly_logo != '') {?>
                     	 <img src="<?php echo $gridly_logo; ?>" alt="<?php bloginfo('sitename'); ?>">
                     <?php } else { ?>
                           <img src="<?php echo get_template_directory_uri(); ?>/images/light/logo.png" alt="<?php bloginfo('sitename'); ?>">
                     <?php } ?>
           <?php if ( has_nav_menu( 'main_nav' ) ) { ?>
      		 <div id="nav"><?php wp_nav_menu( array( 'theme_location' => 'main_nav' ) ); ?></div>
           <?php } else { ?>
     	 	 <div id="nav"><ul><?php wp_list_pages("depth=1&title_li=");  ?></ul></div>
    	   <?php } ?>
    <!-- // header -->

    is my header at the moment

    Your style.css is empty but you have 11 other stylesheets and none of those are empty. Where did you add that rule? The /gridly/css/mobile.css looks like a good place to me.



    you sir are a saint! worked like a charm!

    That did the trick for me too, thanks guys. Once I added the Infinite Scroll plugin, I started liking this theme even more. Great work.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Mobile website won't scale logo’ is closed to new replies.
Skip to toolbar