Logo not shrinking for responsive view

Community Forums Forums Design Tips and Tricks Logo not shrinking for responsive view

This topic is: not resolved

This topic contains 7 replies, has 2 voices, and was last updated by  MelonBird 7 months, 3 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #83675

    MelonBird
    Member
    Post count: 25

    My logo is not shrinking down small enough to show on the smallest mobile devices. I’ve tried a few ways I thought would fix it, but none of them did.

    http://runmysites.com/wptesting/
    #83697

    Anita
    Participant
    Post count: 7550

    It seems to shrinking fine because it’s small to begin with. Can you provide a screenshot for the smaller device. I checked it on 320 and it’s fine.


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #83698

    MelonBird
    Member
    Post count: 25

    Anitac, I was just looking at it on the studiopress responsive testing here: http://www.studiopress.com/responsive/ Just plugin my URL: http://runmysites.com/wptesting/

    It also looks fine on my iPhone, but I know not all devices are configured the same way, so I’m trying to make sure it works well on everything.

    #83699

    Anita
    Participant
    Post count: 7550

    The first one is 240px. I really can’t say how many mobile devices are 240px anymore. If you want it to go smaller, you will need to add a 240px area to your media queries.


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #83701

    MelonBird
    Member
    Post count: 25

    Gotcha – it probably is overkill to worry about the 240, then. Thanks! You can mark this resolved.

    #83834

    MelonBird
    Member
    Post count: 25

    I’m glad you didn’t logo whis as resolved yet. I decided to make the logo wider, so now it’s critical that I figure out how to contain it. I found this in FocusPro, which I used on another site with no responsive issues:

    	.header-image .site-title a {
    		background-size: contain !important;
    	}

    But I put that in the media queries sections for Quattro for smaller screens, and it’s not working. I also tried:

    	.header .title-area a {
    		background-size: contain !important;
    	}

    Because it looked from Firebug like those would be the appropriate Quattro classes for the logo. But either I’m not putting it in the right place in the stylesheet (very possible, since I’m new to responsive design), or the code just isn’t quite right. I also tried “max-width:100%.”

    Or could it be because I altered the size of the header image in functions.php? (To 320×50). If so, is there something I can put in functions.php to make it work?

    #83840

    MelonBird
    Member
    Post count: 25

    Okay, somehow I’ve now killed all responsive styling, and I have no idea how. I replaced all the responsive design section from the original stylesheet, and that didn’t fix it. Short of going back to the start and losing all my customizations and likely making the same mistake again, I have NO IDEA how to fix this. Here’s my stylesheet in case that makes it easier to diagnose.

    • This reply was modified 6 months, 1 week ago by  Susan. Reason: please don't load your whole stylesheet
    • This reply was modified 6 months, 1 week ago by  Susan. Reason: please don't load your whole stylesheet
    #83906

    MelonBird
    Member
    Post count: 25

    Okay, you can drop this one after all. I decided not to go with responsive design on this site.

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

You must be logged in to reply to this topic.