I’m working on my tribute page at the moment and am having issues getting my div component to wrap an image snugly when the viewport is stretched to the width of my monitor. It looks like this while in fullscreen currently:
I want it to look like it does while the viewport has shrunk significantly:
So, the 10px margin applied all-around. Why is there so much extra white space while fullscreen?
I also didn’t get a good pic of it, but while in fullscreen, the caption for the image will center, but what I want to do is place it at the bottom left edge of the image, where you would usually read a caption. I was going to use a grid layout for this - is that appropriate? Here is my code:
Forgot to mention, and sorry for bumping, I tried applying margins to my #img-div id and it breaks the container somehow to the point where it “folds” in past the image and the image shrinks way too much. Like this:
do you want the image to stretch to full screen or do you want the border to wrap around?
remember you can also just give the image itself a border, if you don’t want to have to have it inside a div.
it looks like you haven’t specified the width of your container. I’d suggest giving it a max-width:1500px; the same as the size of your image. then give it a margin:auto;
but if you want it to stretch, then just make the image width:100%
Okay this worked. I think I did that before and then didn’t specify margin:auto; so I made wrong assumptions about what was going on and tried some other things, like, weirdly, giving huge margins that broke responsive elements…
