Hi
I created two rows of boxes: the top row to insert adverts
the bottom to write title captions.
Everything was going well until I inserted the first image. It pushed down the whole bottom row, and when I “solved” that by giving the images width:100% the image grew to take up all available space even if it should have a 25px padding all around in it was centered.
Worse still, when I narrow the screen the image is pushing down its own container…
What have I done wrong, please?
The containers should look like this:
.box {
background-color: yellow;
display: inline-block;
/* height: 250px; /* DELETE Me. NO FIXED HEIGHTS */
max-width: 250px;
vertical-align: top; /* ADD Me. like table-cells, vertical-align:top is usually recommended with inline-blocks */
width: 30%;
}
The images should look like this:
.box img {
display: block;
height: auto;
margin: 0;
padding: 0;
width: 100%;
}
Images should not be assigned padding in this code. If you want to separate the images, use margins instead. And remember that the sum of horizontal margins plus the widths in the row cannot exceed 100%.
I’m guessing this is an attempt at the picture caption as shown here.
That sounds like a bad structure for a start, the captions should be grouped with the corresponding picture. So one row of containers with an image and a caption.
What else would you expect width:100% to do? The images should have their own individual containers to fill. I think @ronpat already told you about using padding on your images.
Your container has its height defined in pixels, that is never going to be responsive, let height take care of itself.
So, How to do it right?
I did start on an demo after seeing your earlier thread, but I have been concentrating my efforts on my own projects (yes, that has to be done sometimes), so never posted anything.
Here is an incomplete example, not perfect, but something like.
Because I used vw to size the captions so they scale, it would want upper and lower stops on that in media queries giving a fixed font-size. One at about the wrappers max-width and one where you decide to stack the images.
Another thing is I had to set the max-width of the caption, this could be avoided maybe if I used display table, which I probably would if it were my own project. Check this pen for constraining captions to the image width:-
Looks like @ronpat has got in first, I’m so slow!
Hi ronpat and Sam
I did the changes as per ronpat’s reply. The yellow boxes disappeared, but I assume that’s what should be i.e. no height until something is put in. I thought of creating permanent fixed boxes and drops the ads in.
The ad is 200x200 but it is taking up all the space. Shall I use margins to bring it back into its own measurements?
let me know if this is as you suggested.
I’’ m going out in half hour ( I do that sometimes…) and will not be abck tl later, i will go through Sam’s reply tomorrow morning.
Thank you both
Yes.
No, let content create the space it needs.
You can put placeholder images or text in if you need to visualise or test it.
<img src="http://placehold.it/200x200" alt="picture" width="200" height="200">
Hi
But the original image is 200 x 200 and right now it has grown to 250 x 250 I want to have it its own size. In my previous idea, inside a box (now maybe border) with padding. That is a 200 x 200 image with a thin border with a margin of 25px.
Am I talking nonsense? Most likely!
I think I got it. I always put measurements in anyway.
Going out now
many thanks
EDIT
putting width/height in the html for the img did not change anything…
That was not the point, I was suggesting using placeholder images to give the empty boxes some content, so they don’t disappear, instead of adding fixed heights or margins which is a bad idea.
Though stating the image size is a good thing to do anyway.
how do you do that?
right but that does not bring the images back to their right sizes
With the code I posted, just change the sizes to what you want.
Yes, I got that, but thre will be images.
What I need now is for the 200x200 image that’s posted to be that size inside the 250x250 box.
and now I’m really going!
Well you can do that by having the 25px padding in the img, if you also have box-sizing: border-box; set too. But I don’t like that personally, when it gets small the 25px looks too much. You seem to have a thing for fixed px values everywhere, it’s not good for RWD.
If you want the image a bit smaller than the containing box, make it a % and centre with margins:-
.box img {
width:80%;
height:auto;
display:block;
margin 10% auto;
}
Or use a border if you want that yellow surround.
Just to confuse things further (what you really need), my previous answer with the pens, take a different direction to @ronpat , his fixes the html you have with css, which is convenient, but mine structures the html a bit differently which is more semantic, grouping the images with their associated captions. the structure also lends itself better to the layout task. For example if you wanted to have varying numbers of images in a row at different screen sizes, it makes sense to group them with the captions to keep them together however you manipulate them. As separate rows, they act independently and could go astray of each other.
Thank you Sam
I made the changes to my earlier version and it now works exactly as I wanted. I can see problems when images are different sizes but it just means that I would have to get different css code for each one of them: box img1, box img2, box img3.
I looked at your other solution, and yes, it seems to be a better solution. The problems that I see is the size of the caption box at screen sizes higher than around @1340 (I see now that this is due to the size of the font, that can be reduced with a media query) and the way they stack below @300. I do not want them to stack, although I do not think there are devices that go below 300px, so that is not a problem.
http://pintotours.net/TEMP/FRONT/sam.html
In the box.html they only stack below 100px.
I will introduce real images into both versions and see what comes out of it. Many thanks.
EDIT
What does this mean (in pixels:my native language…)
font-size: 1.2em; /* Fallback font size where vw fails */
font-size: 2vw;
VW is a motor car currently receiving bad press!
LATER
In sam.html the caption ends up on top of the image; I gave it a negative top:-41px; to position it properly but wonder if the whole thing will be ok once placed in the middle of the final page.
I will also have to code for individual adjustments to each image
I’m not telling you in pixels, because it does not relate to pixels. Learn a new language, pixels are generally bad in RWD and your obsession with them is a big part of all the problems you encounter in making things responsive.
vw stands for Viewport Width. 1vw = 1% of the width of the viewport. Applying it to the font-size makes the text responsive, it grows and shrinks with the view port, which mostly works well in this case, but it does have its problems and limitations. For one, it only works off viewport width, not container width, which would be far more useful.
Also it can go to extremes as the screen gets big or small.
That’s what that is, and why I said this:
When the text gets too small, have a query that fixes the size:-
@media screen and (max-width: 500px) { figcaption { font-size:0.5em;}}
When it gets too big, add a query for that:
@media screen and (min-width: 900px) { figcaption { font-size:1.5em;}}
Yes, that was deliberate, the caption is placed absolutely of the bottom of the image, overlapping it.
What’s properly about that? I’m sure @ronpat has already mentioned about “fixing” things with margins, it only causes problems further down the line. How about just removing position:absolute if you don’t want an overlap?
I’m sure there is a better way.
Thanks
I’ll be reviewing your code http://pintotours.net/TEMP/FRONT/sam.html
meanwhile I have been working on http://pintotours.net/TEMP/FRONT/box.html
Hi
I think the box.html will be easier for me to work with and I’ve pasted it into the nearly finished page. (but I am still trying to get the sam.html to do the same, without success…!
I have another problem with the page regarding the image slider. I need to add text to the images ( destination, and credits for images that are not mine)~
Could you help, or should I start a new thread, maybe in javascript forum?
Thanks
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.