The inline styles are set from CSS/JS, this is part of a small gallery.
If the inlines styles are setting the image to 300px wide, your other CSS will not be able to affect it. I assume this is why you’ve got !important in there. See if you can temporarily disable the Javascript for now. It may turn out your CSS and HTML would have otherwise worked except the JS is interfering.
Let’s try with some simpler code first and later see if it needs positioning and stuff.
I have a responsive picture on my site (yes, it’s a picture of a cat, this is teh internets). This is the code I have…
(container around most of the site, has no set width and gets smaller when the screen does)
<img src=“moesie.jpg” width=“widthofimage” height=“heightofimage” alt=“moesie the cat”>
(/somewhere later container ends)
And the css is
float: left;
some margins and stuff
max-width: 60% (so it never spans the full page)
height: auto; (keeps it square)
other styles;
And this works, but I loaded the picture as large as it will ever get, and does not get stretched larger, which might be what you’re doing. Maybe we stick to “let it get as big as it original is” first.
I figure most of your weird code is from you playing around with it and getting increasingly desperate. Still, I want to knock it down.
#club-gallery {
[b]max[/b]-width:300px; (let it squish)
margin-bottom:10px;
}
#club-gallery img {
[b]display: block;[/b] (setting dimensions is not an inline thing, it's a block thing)
max-width:100%; (even if you set !important on this, max-width is different from width)
height:auto;
}
Since when your image can get 300px wide, it will (should) automagically get the 186px height, you shouldn’t need to worry about club-gallery’s height, since this is an HTML image and not a background image.
Now if club-gallery has a max-width, that should mean if its parents can be squished, it can be as well. You would have to make your screen smaller than 300px to see the effect though.
What you might want to do for now is (for coding testing only) start with a larger club-gallery and a larger image. Maybe something that’s 900px wide or something. This’ll be a lot easier to test tablets and the such. Many smartphones nowadays don’t get as small as 300… 320 might be the smallest a general smartphone goes. Anything smaller is, I assume, much older, and might require you to do “mobile-first” (if no @media queries are supported).
Though it may be there is other stuff horizontal to this club-gallery… in which case, you’d have to show us the code of who’s sitting next to it, since maybe they are preventing some responsivey stuff from happening.
If things still aren’t budging, cripple the Javascript (find where it’s called in teh HTML and change its name or something) and post a link so we can explore further.
