Using image with text in navbar-CodePudding

I just started using HTML and CSS. And I need help.

I want to use images and also text(for the title) in my header. So I used navbar.

If I make my window smaller, I want the text to move with the image but it doesn't move at all. I think it's because of left: 480px; in the code but if I don't use left: 480px;, it won't appear on the image.

Is there any way that it can move with the image when I make the window small?

FULL SIZE OF THE WINDOW

WHAT IT LOOKS LIKE WHEN I MAKE THE WINDOW SIZE SMALLER

the text is in the middle with left:480px;. I want the text to keep placed on the left side. Which part should I need to change or add to the code?

.navbar {
  display: block;
  align-items: flex-start;
  padding: 0;
}

.navbar img {
  width: 100%;
  height: 100px;
  display: block;
  position: relative;
}

.navbar span {
  position: absolute;
  z-index: 1;
  color: #fff;
  width: 200px;
  height: 28px;
  font-family: NanumGothic;
  font-size: 24px;
  text-align: left;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 12.8px;
  letter-spacing: normal;
  top: 50px;
  left: 480px;
}

<!DOCTYPE html>
<html>

<head>
  <title> Change Member Info</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <meta name="format-detection" content="telephone=no">
</head>

<body>
  <form id="frm" name="frm">
    <div >
    </div>
    <div >
      <nav >
        <div >
          <img src="/assets/images/[email protected]">
          <span>My Website</span>
        </div>
      </nav>
    </div>
  </form>
</body>

</html>

CodePudding user response：

you can try two ways to make this responsive

1. Giving margin-left in percentages

.navbar span{
            left: 30%
            }

This takes left spacing percentage in terms of screen size. So it adopts automatically

2. Using Media Queries

By using this you can set CSS specifically for different screen size

/* Set CSS for Full screen size */
.navbar span{
                left: 480px
                }


/* On screens that are 992px or less */
@media screen and (max-width: 992px) {
  .navbar span{
                left: 380px
                }
}

/* On screens that are 600px or less */
@media screen and (max-width: 600px) {
 .navbar span{
                left: 300px
                }
}