Responsive image in Mixfolio header

• 

  cbelako · Member · Apr 17, 2013 at 5:00 pm

  • Copy link
  • Add topic to favorites

  I’m setting up my blog and am in the process of making a few changes to the css. Instead of a text title in the upper-most header, I’ve elected to use a logo. Since I can’t change the html of the theme (as far as I know), I used an absolute link to an image I uploaded as media to WordPress. I wasn’t thinking about that not being a responsive image.

  Are there any workarounds for this? It’s important to me that the blog be responsive.

  Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 17, 2013 at 6:19 pm

  • Copy link

  Hmmm, I’ve tried several things to no avail, but let me continue with it. I’m pretty sure I can figure out how to do this.

  Stay tuned. :)

• 

  cbelako · Member · Apr 17, 2013 at 6:41 pm

  • Copy link

  Thanks, thesacred path. You’re a rock star. I’ll sit tight.

• 

  thesacredpath · Member · Apr 17, 2013 at 6:51 pm

  • Copy link

  I have a few things I need to do, but I will get back to this for you. We might have to put the image into a different div/selector to get things to work properly.

• 

  designsimply · Member · Apr 18, 2013 at 5:11 pm

  • Copy link

  In your “#branding h1 a, #branding .brand” block, try adding this:

  background-size: contain;
  max-width: 100%;

  Note that this is just one possible solution and that “background-size” is CSS3, and that means it will only work in modern browsers.

• 

  thesacredpath · Member · Apr 18, 2013 at 5:16 pm

  • Copy link

  @designsimply, thanks for getting this one. It had slipped past me. :)

• 

  designsimply · Member · Apr 18, 2013 at 8:04 pm

  • Copy link

  No problem! Do you think background-size is a good solution?