Responsive Header Image – Focus Pro

[Belinda]

I'm using Focus Pro for my own site.
When i uploaded my header image I resized it to be 500x180.
Header image looks fine, but when I look via a device the logo is pushing across the screen and is not responsive.

I had to add custom CSS so that the 500x180 image would display in it's entirity but now it's not responsive.

I used:
.header-image .site-title a {
min-height: 180px;
min-width: 500px;
}

If i try using % then it cuts the image off so I'm assuming there is a div or container which holds the header image and i need to be able to adjust that part so my image isn't cut off when using computer but is still responsive when viewing via device.

Can anyone help with this as I cannot seem to work out how to do it.

http://www.thetraininglady.com

[Belinda]

UPDATE:
I finally found the DIV's i needed to resize.
I used:

div.title-area {
width: 70%;
}

div.widget-area.header-widget-area {
width: 30%;
}

HOWEVER, now that I have the logo working responsive on devices. How can i set it so that the widgets to the right of the Header Image will drop onto a new line of their own when viewed on a device.

[Author]

Posts