search

mgsisk / inkblot

Inkblot is an elegant, fully responsive, highly customizable Webcomic-ready WordPress theme.
http://wordpress.org/themes/inkblot
45 stars 11 forks source link

Header image not responsive #57

Closed duanewilson closed 8 years ago

duanewilson commented 8 years ago

The header image we uploaded is at 780px wide (recommended is 960px) but on iPhone 6s Plus and smaller the header doesn't resize down like the page images do. Anyone know of a fix ?

see : http://rocketmummy.com

mgsisk commented 8 years ago

It looks like the inline style attribute on the .headimage anchor is the culprit (it's actually causing a few display issues at smaller screen sizes). I'd remove that and add the following to the custom CSS section of the Theme Customizer:

.headimage {
  margin: -80px 0 -20px -6%;
  width: 110%;
}

I reduced the negative bottom margin from -40px to -20px because – at smaller screen sizes – the nav would move up too much and cut off the bottom of the banner. I also changed the left negative margin from -30px to -6% so that it would flex as the viewport shrinks (it should be the same offset, give or take a pixel). I also replaced the fixed-width 570px with 110%, which is the same width (give or take a pixel) but flexes as the viewport shrinks.

duanewilson commented 8 years ago

Hi Michael. That worked! Thank you very much for trouble shooting that!