Get a free trial // Grow your CSS skills // Land your dream job

How to make top logo responsive?

  • # January 28, 2013 at 7:10 am

    Hi guys.
    I am still working on customizing this responsive WordPress theme I bought.
    In the themes settings it says that the recommended size for the logo is 150×73 but I have uploaded a much bigger sized logo. This looks great on desktop computers and even on the iPad. But on an iPhone the logo sticks out of the layout making it look horrible :(

    I guess I will have to try to overwrite the theme settings by adding code to the css files manually but how do you choose the breaking points and stuff like that?

    I appreciate any help or tips anyone can give me :)
    Here is the site if you want to take a look…

    # January 28, 2013 at 8:07 am

    The **simplest** way is to give it a max-width of 100% – but this will mean that the full sized image is served to mobiles, so you should optimise your image as much as possible. Running the image through should help you to further optimise the image size.

    # January 28, 2013 at 8:38 am

    #logo img {
    max-width: 100%;
    height: auto !important;

    But I would have to agree with @notfilc. You should try to optimize it a bit for mobile devices.

    # January 28, 2013 at 4:21 pm

    just wanted to add that tinypng blows smushit out of the water when it comes to compressing png images.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed