PaulOB very kindly gave me some code a few months ago to make images responsive, and the code works well on most of my pages.
.img-container{
margin:0 auto 0;
border-radius:0;
border:0;
padding-top:0;
width:100%;/* adjust to suit*/
}
.img-container img{
position:static;
width:auto;
height:auto !important;
display:block;
}
But I can’t make the same code work on these 2 pages
http://pintotours.net/TEMP/BLOG/Mine.html
http://pintotours.net/TEMP/BLOG/art1.html
Any help appreciated
On the image container set:-
width: 90%; /* Or whatever proportion you want it to fill on small screens */
max-width: 375px; /* The actual image width in pixels */
For the image:-
width: 100%;
height: auto;
Also lose the padding on the image padding: 0; but only put that in the media query, where the image goes on top, to keep the padding in the wide view.
Hi
Maybe I did not get what you meant but as soon as did this, the full page went out of control.
besides, at the moment the css controls two pages with different size/position images.
.row .img-container{
margin:0 auto 0;
border-radius:0;
border:0;
padding-top:0;
width:90%;/* adjust to suit*/
max-width:375px;
}
.row .img-container img{
position:static;
width:100%;
height:auto !important;
display:block;
}
Sorry, for some reason I ignored the second link on the OP.
If the images have different size and positions, then maybe their containers should have different classes. The settings I gave were specifically for those images on the first page, beside the text, not a solution for any image on any page.
The strange thing is, it should not be too hard to set up some css to make all images responsive, but for some reason I can’t work out, the usual methods are not working on your pages. I am having to explicitly stare the images pixel width in the max-width, which should not be necessary.
Normally something like:-
.container { width:90%;}
.container img {
max-width: 100%;
height: auto;
}
would do the trick, but it won’t work on your page for some reason. There must be something in the css stopping it working.
The million $$$ question!!!
One thing in the css that is bugging me, and could be confusing things, you have 2 selectors targeting the same elements:
.row .img-container img {}
.row img {}
One gets overridden in the query, but the other does not, I think that creates a conflict.
I’m not asking you to put both in the query, but remove one altogether, or combine them into a single selector.
Sam, please permit me to add to your observation. Based on past experience with Qim, and after looking at his new CSS, I wrote this up yesterday. Some points may have been covered already. I am posting it now For Your Info only. I’m not sticking around.
Unnecessary negative margins-top.
Unnecessary repetitions of properties.
Unnecessary declarations of {width:100%} on block objects.
Why are the images floated?
Use a proper float clearing mechanism. Not a div with {clear:both}.
Too may IDs. Some (most) should be classes.
One should NEVER have two IDs in a selector.
You are setting yourself up for specificity problems already.
(line 119)
.row img {
display:block;
float:left;
height:auto;
padding:50px 30px 0 10px;
width:100%;
}
(line 128)
.row .img-container {
border: medium none;
border-radius: 0;
margin: 0 auto;
padding-top: 0;
width: 100%;
}
(line 139)
.row .img-container img {
display: block;
height: auto !important;
position: static;
width: auto;
}
(line 214)
@media screen and (max-width:767px) {
#main h2, h4, p {
display:block;
margin-left:20px;
}
.row img {
display:block;
width:100%;
height:auto;
margin:0 auto 10px;
padding:50px 20px 0 0;
}
}
Those are my opinions. Take them with a grain of salt, as we say.
Hi ronpat
Thanks
The code you wrote is what should be put in in place of what is ther already, or what needs to be deleted?
I’m in the process of setting up a different stylesheet for each page to reduce the confusion (mine…) to the minimum.
OK, I just found a major flaw in the css (among some more minor ones).
You are not re-setting the display table in the query.
#wrapper,
#main,
#side {
display: block;
width: auto;
}
In the query, all the table stuff needs to revert to display: block at full width.
Could you give me an example where this is happening, please?
I thought and ID is a selector, itself
Qim, Sam has the lead. The code in that post was copied from your CSS yesterday. I have wriitten nothing new.
I don’t like that idea, it defeats the object of having css and makes more work. Best to have just one good css than lots of iffy ones.
ronpat is right, you do need to re-think how css is done and start doing it the right way, or you will forever be running into these problems.
Hi ronpat
I’m just trying to learn about individual mistakes, now, rather than sorting out the page.
Could you tell me where I have /had 2 IDs in a selector, please’
In your last site, you had several examples of nested IDs that caused a lot of grief and bandaids.
This is the one example that is already in the current CSS:
#clock #position {
float:left;
Listing nested IDs like that are unnecessary and problematic.
One selection from one of your previous pages (not the most problematic, either):
#header #section1 #title {
height:140px;
background-color:#910000;
color:#E1E19D;
font-size:250%;
line-height:60px;
padding-top:30px;
padding-left:270px;
margin:0 50px 0 140px;
font-weight:bold;
}
This was two of the IDs in the troublemaker… they were never fixed. Too pervasive.
#content #box4 {
height:auto;
padding-top: 10px;
padding-bottom:30px;
background-color:#FFFEFC;
}
(In my opinion, most IDs are troublesome, but that’s me.)
Sam will guide you from here.
Hi
The Mine.html will be the index page of the whole site; The other page is one of many that will have the articles mentioned in the index page.
Being an index page, I feel it should have a unique css, but i will leave it for now to take advantage of your help
I got it! thanks
The clock has gone, by the way, and will no be back on these pages.
One selection from one of your previous pages (not the most problematic, either):
#header #section1 #title {
That’s also been amended following your earlier advice and I don’t think it is left in any page, any longer,
Hi Sam
I placed the code you posted above in the media query @720, minus the ID for #side as it no longer exists after the first media quesry, but the images are still the same
But is it ok to have an ID and a class like this?
If not, why?
#main .text{
display:inline;
font-weight:400;
}
Yes, BUT (and this is not JUST because of the ID), one must always be aware of, pay attention to, consider the possibiltiy of, specificity issues when writing CSS.
ID’s are very “weighty”. Can only be overriden with the !important modifier or by piling on more IDs. Apply styles to/thru IDs very sparingly. Apply styles primarily via classes.
Even for elements like #header, #sidebar, #footer?