Photos position moves and is inconsistent on other computers

Hey, thank you to anyone for answering or reading this! I am learning HTML and designing a website for myself. This is what I have so far: griffin malone dot com. I enjoy the simple and clean websites. Anywho if you go to that it will probably look really weird or bad (unless you have my exact computer and same chrome layout.)

On other computers it often looks like this: https://postimg.org/image/ux3zb7c69/

And then when I make my window smaller it does this: https://postimg.org/image/z7dgbkp2r/

Can anyone help me on how to make this consistant. In the style.css I have tried changing the position to all the options. Still does this. Anyone know how to fix this? Thank you so much.

This is what it should look like: What it should look like is this:

Hi griffinmalone2. Welcome to the fourms.

It looks like you have a lot of learning ahead.

Since you have a background in photography, you probably have an appreciation for aspect ratio and dimensions. Have you sized your photos so they will fit on a page exactly as you wish them to without cropping or otherwise losing their aspect ratio? If so, that’s a big step in the right direction.

Do you intend for the images to shrink to fit smaller viewports without shifting position? (Some may become rather small.)

Use floats discretely.
Do not use {position:absolute} on any of the images.
Do not use dramatically large negative margins.

Why do .series1, .series1cover, and other selectors include a width of 7300px? That doesn’t make sense even for a novice.

Validate your HTML as you go along.
https://validator.w3.org/nu/

Validate your CSS as you go along.
https://jigsaw.w3.org/css-validator/

Format your code uniformly. An opening tag should close on the same line or at the same level of indent so it can be followed visually. Child boxes should be indented for readability, etc.

One does NOT need the trailing slash on empty HTML elements such as . Technically, it’s invalid but tolerated. Foreground images should include dimensions using the width=“nnn” and height=“nnn” attributes. Those dimensions should reflect the actual size of the original image.

Avoid inline styles. If the CSS your are inserting starts with the attribute “style=”, then consider including it on your CSS stylesheet instead.

Minimize the use of IDs except where needed for fragment identifiers, JavaScript or forms.

Continue reading your basic HTML/CSS book.

I’ve written one page that used almost all images. It was “challenging”. If I can find it, I’ll link to it.

EDIT: Found it.
https://www.sitepoint.com/community/t/how-can-i-prevent-images-from-shifting-in-css/201986/20
Download the zip file, unpack it, and run it on your computer. Hope it is helpful.

Thanks so much, ill keep working!

1 Like

Do you have your images sized so they will fit snugly against each other and fill the rectangle (outer frame) exactly? Again, the overall size is less important than the aspect ratios. If you have done that, and if you can post a drawing or simulated screenshot showing how they should be arranged on the page and the maximum dimensions of the page, I/we should be able to help you assemble a fluid page. (fingers crossed)

I am not completely sure. I used your suggestions and actually got it in a way I like it. It looks good on other computers now and you a phone. Thanks for all the help. If i run into another problem I will definitely post on here again.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.