One of my image keeps changing size. Unable to publish correct layout of the div

Hi, I have been working on a rebuild site for my portfolio.

One of the image container I have added keeps changing size/layout without me doing anything. Also I am unable to publish the correct version.

Please check this screen recording - Dropbox - Screen Recording 2022-10-13 at 9.43.32 - Simplify your life

Also attaching my site’s read only link below.

Appreciate any help to resolve this issue. Thank you in advance.

Here is my site Read-Only Link:

The read-only link doesn’t work.

Thank you for trying to help! @DylanJV

I have updated the link.

Your section is not set to 100% width and because nothing in the section has a width, the section shrinks to the width of the image.

Your image only has a max width value. Max width only sets the maximum width an image can go to. Its a limiter and does not set the width of the image so the image is getting set to a lower res.

Give the image a width of 100% to fix this

Also your website does not scale very well. I don’t recommend using such high padding just to set container width.

This is an example of how to fix scaling on sections

max width:

Smaller screen width:

What your current settings are doing:

1 Like

Thank you so much for this comprehensive feedback!

I will work on these for sure @DylanJV

I haven’t started working on the responsiveness yet!

I didnt understand what you did in the last but two images… where you said max width: and smaller screen width:

Can you please explain?

Glad to gelp Harikshore.

So when you set the max-width to 1420px, it will continue to scale at 100% width till it reaches that 1420px width and stops increasing the max width at 1420px.

Max-width and Min-width are limiters. They prevent a box from increasing or decreasing width after a certain point but do not affect the actual width of the box.

Width = real width of box
max-width and min-width = box width limit. (the box will not increase width past 1420px.)