The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to make top logo responsive?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #42310

    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…


    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.


    #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.


    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.