Stop Display of Larger Logo on Mobile

Community Forums Forums Design Tips and Tricks Stop Display of Larger Logo on Mobile

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  eamonmoriarty 5 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #105974

    eamonmoriarty
    Participant
    Post count: 232

    My Logo displays OK at larger sizes. I wanted a smaller version of the logo for iphone so I created a logo-mobile.png and added media queries for widths smaller than 380 which called logo-mobile.png instead of logo.png.
    This did display the smaller logo on mobiles but also displays the larger logo as well!
    I cannot find how to prevent the larger logo from displaying at the smaller sizes.
    Please see at stayinclare.com


    Eamon Moriarty
    EM Dzine

    http://www.stayinclare.com
    #105984

    Tom
    Participant
    Post count: 968

    The THREE images are placed with different CSS selectors, so they overlay.

    “Logo” is positioned with this code at line 2122 :

    .header-image .title-area {
    	background: url(images/logo.png) left bottom no-repeat;
    }

    “logo-mobile” is positioned in your media query twice with at line 4458:

    	.header-image .site-title {
    		background: url("images/logo-mobile.png") no-repeat scroll center center transparent;
    		height: 44px;
      		width: 260px;
    	}
    
    	.timothy-blue.header-image .site-title {
    		background: url("images/timothy-blue/logo-mobile.png") no-repeat scroll center center transparent;
      		height: 44px;
      		width: 260px;
    }

    Use the same selector once in the media query to replace the original image.:

    @media only screen and (max-width: 380px)
    .header-image .title-area {
    		background: url("http://stayinclare.com/wp-content/themes/timothy/images/logo-mobile.png") no-repeat scroll center center transparent;
      		width: 100%;
    }

    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #106002

    eamonmoriarty
    Participant
    Post count: 232

    Many thanks Tom. That worked perfectly.


    Eamon Moriarty
    EM Dzine

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.