CSS help required

[eFestivals]

I've got a CSS issue with the new eGigs website design that I'm having trouble cracking, and I hope someone might be able to help me out.

It's to do with the header image that I want to size-downwards in small width browsers (eg: phones) but which isn't resizing.

What I'm wanting can be seen working here:-
http://www.egigs.co.uk/forums/

If you go to that page with a desktop browser and then narrow the browser window, you'll see that initially the background gets chopped off as the window narrows, but that when it gets as narrow as the main (foreground) eGigs image, that image resizes so that all of the image remains displayed but at a smaller scale.

If you go to http://www.egigs.co.uk/and do the same, it doesn't re-size but instead gets chopped off the end.

 

It's probably not a major thing to fix (I did have it working like that at one point) but I can't seem to find what I need to do, so any help would be gratefully received.

 

Either post back here or get in touch with me directly at webmaster@efestivals.co.uk.

 

Thanks.
 

[windy_miller]

Both pages behave very similarly for me (Firefox 40.0.3).  It maintains a border at all times when narrowing the window.

 

The only difference I can see is that on the forums page, the sidebar eventually just disappears (i.e. it just pops out of existence).  On the main page, the side bar slowly gets covered over, and then disappears once its about 50% covered.

Edited September 22, 2015 by windy_miller

[eFestivals]

Both pages behave very similarly for me (Firefox 40.0.3).  It maintains a border at all times when narrowing the window.

 

The only difference I can see is that on the forums page, the sidebar eventually just disappears (i.e. it just pops out of existence).  On the main page, the side bar slowly gets covered over, and then disappears once its about 50% covered.

 

(also firefox 40.0.3)

 

They're similar but they're not quite the same. On the forums page there's a small bit of resizing just before it reaches it's narrowest possible size. That resizing doesn't happen on the front page.

 

It's fairly inconsequential in real world use for eGigs, but I'm actually trying to crack the problem for the new efestivals because that has a longer logo, and that's stopping the page being as narrow as some phone screens.

[eFestivals]

I've sussed it, doh (on my test set-up, it's not live yet).

 

I needed:-

    max-width: 100%;
    height: auto;

 

in the image properties, but I also wasn't addressing the image correctly in the CSS, where I hadn't put 'img' after the object ID before the properties.

 

It's now thrown up an additional problem, tho hopefully my brain will work for sorting it.