htmlcssoverflowpage-layout

Content is overflowing from the body

I am facing an issue where the content overflow out of the page

I have tried adding the with: 100% to the body, main div but still the content is overflowing and I can see that issue in mobile view, I guess the same issue may happen in Desktop view as well currently its working fine on Desktop.

I created a page in which I have added a form and that form is overflowing from the body.

I have also tried adding the border-box css property for the layout of the page but the form is still overflowing.

Adding image for reference:

enter image description here

Code Snippet

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: 'segoe ui';
}

.wrapper {
  max-width: 100%;
}

img {
  width: 100%;
}

.myAccount-wrapper {
  width: 90%;
  margin: 0 auto;
  .myAccount-section {
    display: flex;
    flex-wrap: wrap;
    .account-img {
      img {
        width: auto;
        @media (min-width: 544px) and (max-width: 991px) {
          width: 100%;
        }
      }
    }

    .account-img,
    .account-form {
      flex-grow: 1;
    }
  }
}

// my account section
.profile-details {
  display: flex;
}

// form styling
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {
  top: 0px;
  bottom: 0px;
  left: 0px;
  font-size: 11px;
  opacity: 1;
  padding: 0px 0 0 15px;
}

.profile-name {
  position: relative;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 0px;
  top: 0px;
  transition: 0.2s ease all;
  padding: 5px;
}
  <body>
   <div id="root">
      <div class="wrapper">
         <main class="main-component">
            <div class="myAccount-wrapper">
               <div class="myAccount-section">
                  <div class="account-img"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScppAjzrG06w7v07vGUeT7E35MSS6Zfry2pEBrCYAxGRjtC7dNHz8JdB5rfJCh5FKaCjY&amp;usqp=CAU" alt="Profile"></div>
                  <div class="account-form">
                     <form>
                        <div class="account-header">
                           <h3 class="">MY ACCOUNT</h3>
                        </div>
                        <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Name</span></div>
                        <div class="profile-details">
                           <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Mobile</span></div>
                           <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Email</span></div>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </main>
      </div>
   </div>
</body>

Solution

  • I reproduce code above like that:

    <html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
   
    <style>
* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: "segoe ui";
}

.wrapper {
  max-width: 100%;
}

img {
  width: 100%;
}

.myAccount-wrapper {
  width: 90%;
  margin: 0 auto;
}
.myAccount-wrapper .myAccount-section {
  display: flex;
  flex-wrap: wrap;
}
.myAccount-wrapper .myAccount-section .account-img img {
  width: auto;
}
@media (min-width: 544px) and (max-width: 991px) {
  .myAccount-wrapper .myAccount-section .account-img img {
    width: 100%;
  }
}
.myAccount-wrapper .myAccount-section .account-img,
.myAccount-wrapper .myAccount-section .account-form {
  flex-grow: 1;
}

.profile-details {
  display: flex;
}

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {
  top: 0px;
  bottom: 0px;
  left: 0px;
  font-size: 11px;
  opacity: 1;
  padding: 0px 0 0 15px;
}

.profile-name {
  position: relative;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 0px;
  top: 0px;
  transition: 0.2s ease all;
  padding: 5px;
}
    </style>
</head>

 <body>
   <div id="root">
      <div class="wrapper">
         <main class="main-component">
            <div class="myAccount-wrapper">
               <div class="myAccount-section">
                  <div class="account-img"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScppAjzrG06w7v07vGUeT7E35MSS6Zfry2pEBrCYAxGRjtC7dNHz8JdB5rfJCh5FKaCjY&amp;usqp=CAU" alt="Profile"></div>
                  <div class="account-form">
                     <form>
                        <div class="account-header">
                           <h3 class="">MY ACCOUNT</h3>
                        </div>
                        <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Name</span></div>
                        <div class="profile-details">
                           <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Mobile</span></div>
                           <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Email</span></div>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </main>
      </div>
   </div>
</body>

    I think you can use flex-wrap: wrap; for .profile-details.