The element is not flexible with the browse shaping.

[Ly-Iris]

Troubleshooting

Describe your environment

• IDE (e.g. VSCode):VSCode
• Browser (Chrome/ Safari/ Firefox/ VSCode Embedded):Chrome
• The link to your issue pages hosted on gh-pages (xxx.github.io/page.html): Ly-Iris.github.io/hw2/

Describe your question

I used the (div class="card") and (div class="avatar") function in my code, but when I shape my browser, the elements "card" and "avatar" do not move together.

Describe the efforts you have spent on this issue

I have searched online and viewed many videos.

Have you Google or StackOverflow?

Yes.

Do they solve or partially solve your question?

No.

What is the closest answer you can find?

It is suggested that I should use the @media function, but I don't think it's related to this tag.

[hupili]

Ly-Iris.github.io/hw2/

[hupili]

http://Ly-Iris.github.io/hw2/

[hupili]

Short take is that you usually do not use margin/ padding to layout objects.

Current:

Use position: absolute and place the element w.r.t. its parent:

effect of sizing:

There are other details that we can discuss f2f.

[Ly-Iris]

Conclusions

1. It's about the "margin" and "position" issue. You can compare the codes before and after to realize and have a try.
2. The picture does not display because my path is wrong.

This is the first version:

     `body {
            background-image: url('../images/wallhaven-688773.jpg');
                background-repeat: no-repeat;
            background-position: 100% center;
            background-size: cover;
      }
        .card {
                background: #FFFFFF;
                min-height: 850px;
                max-width: 800px;
                min-width: 400px;
                margin:_ 300px;
                border-radius: 3%;
                box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.50);
    }

    #avatar {
        background-image:_ url('../images/IMG_0438.png');
        background-size: contain;
        margin: -80px 10px 8px 550px;
        display: inline-block;
        height: 200px;
        width: 200px;
        border: 3px solid rgba(32, 220, 226, 0.5);
        border-radius: 50%;
        background-repeat: no-repeat;
        position:_ relative;
    }`

This is the corrected version:

      `body {
                background-image: url('images/wallhaven-688773.jpg');
                background-repeat: no-repeat;
            background-position: 100% center;
            background-size: cover;
      }
        .card {
            background: #FFFFFF;
                min-height: 850px;
                max-width: 800px;
                min-width: 400px;
                margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
                border-radius: 3%;
                box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.50);
                position: relative;
   }
          #avatar {
                background-image: url('images/IMG_0438.png');
            background-size: contain;
                right: 100px;
            top: -80px;
            display: inline-block;
            height: 200px;
            width: 200px;
            border: 3px solid rgba(32, 220, 226, 0.5);
            border-radius: 50%;
            background-repeat: no-repeat;
                position: absolute;
     }`

[hupili]

@Ly-Iris ! Let's conclude a few key points here:

• Spacing can be done by margin/ border/ padding/ innerHTML size. -- Use them according to the meaning, instead of according to how they appears on the browser screen (all could be blank-space).
• Center an element: margin-left auto; margin-right auto.
• position: absolute can be used to place an element out of regular "flow". "flow" means top-to-bottom and left-to-right.
• In order to make position: absolute work as expected, its parent element needs to be relative. Or it will recursively track back towards the root until one relative is found.