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 AM.mov - 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.
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.
max width:
Smaller screen width:
What your current settings are doing:
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.)
