Forums

StigBratvold

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 150x73 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

Paulie_D

http://css-tricks.com/which-responsive-images-solution-should-you-use/

notfilc

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.

chrisburton

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

dfogge

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

http://tinypng.org/

treehouse : what would you like to learn today?

Forums

How to make top logo responsive?