Forums

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
    Posts
  • #42310
    StigBratvold
    Participant

    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…

    http://www.spetakkel.org

    #122547
    Paulie_D
    Moderator
    #122553
    notfilc
    Member

    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 http://www.smushit.com should help you to further optimise the image size.

    #122565
    chrisburton
    Participant

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

    #122648
    dfogge
    Participant

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

    http://tinypng.org/

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.