Search code examples
htmljquerycssfrontendweb-frontend

How to align image and form side by side and it should also be perfectly aligned even in different views like mobile view and desktop

desktop alignmentmobile view

<div class="box"> 
    <p>contact us</p> 
<form>
   <div>
    <input type="text" name="" required=""> 
    <label>firstname</label>
  </div>
  <div>
    <input type="text" name="" required=""> 
    <label>last name</label>
  </div>
  <div>
    <input type="text" name="" required=""> 
    <label>mail</label>
  </div>
  <div class="button">
  <button type="button">submit <span>&#10230;</span></button>
</div>

</form>

</div>

<div class="clearfix">
    <img src="https://www.fnordware.com/superpng/pnggrad8rgb.png"  >
</div>

<style>
 
img{
    float: right;
     width:40%;
     height:a;
    margin-right: 190px;
    margin-top:83px;
    height:475px;
    cursor: pointer;
    }
    span{
      content: "\27F6";
}
label{
        padding-left: 10px;
        font-size:16px;
       padding-top: 10px;
    }

.box
{
position: absolute;
top: 50%;
Left: 25%;
height:475px;
transform: translate(-50%, -50%);
background:green;
padding: 40px;
box-sizing: border-box; 
margin-left:1%;
cursor: pointer;
}
.box p
{
font-family: 'jmsans', sans-serif;
padding: 0;
margin: 0 0 40px; 
color: white;
font-size: 40px;
width: 467px;
}
.box input
{
margin-bottom: 30px;
width:466px;
box-sizing: border-box;
box-shadow: none;
border: none; 
border-bottom: 2px solid #999;
outline: none;
padding-left: 10px;
font-weight: bold;
height: 56px;
}
.box input[type="submit"]
{
border-bottom: none; 
cursor: pointer;
color: #fff;
margin-bottom: 0;
}
.box form div
{
position: relative;
}
.box form div label
{
position: absolute; 
top: 10px;
Left: 0; 
color: #999; 
transition: .5s; 
pointer-events: none;
}

</style>

If I inspect the code and check its responsiveness in different views(mobile and desktop) image and form is not aligned because of bad code how to resolve this issue If I inspect the code and check its responsiveness in different views(mobile and desktop) image and form is not aligned because of bad code how to resolve this issue

Solution

  • You have your primary box container set to position: absolute and several positioning attributes that are not present on the image which is probably why everything is shifting. I don't know what else this form and image are going to be put into but they don't seem necessary in your example so I've removed them and added a flexbox .flexContainer to wrap your content in and that helps keep your content aligned in a single row. You could take it a step further and add a @media query (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to control how the image reacts on mobile (for example, change the flex-direction to column so the image appears below the contact box instead of stretching inward on smaller screens. `

    .flexContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

img {
  width: 100%;
  height: auto;
  height: 475px;
  cursor: pointer;
}

span {
  content: "\27F6";
}

label {
  padding-left: 10px;
  font-size: 16px;
  padding-top: 10px;
}

.box {
  height: 475px;
  background: green;
  padding: 40px;
  box-sizing: border-box;
  margin-left: 1%;
  cursor: pointer;
}

.box p {
  font-family: 'jmsans', sans-serif;
  padding: 0;
  margin: 0 0 40px;
  color: white;
  font-size: 40px;
  width: 467px;
}

.box input {
  margin-bottom: 30px;
  width: 466px;
  box-sizing: border-box;
  box-shadow: none;
  border: none;
  border-bottom: 2px solid #999;
  outline: none;
  padding-left: 10px;
  font-weight: bold;
  height: 56px;
}

.box input[type="submit"] {
  border-bottom: none;
  cursor: pointer;
  color: #fff;
  margin-bottom: 0;
}

.box form div {
  position: relative;
}

.box form div label {
  position: absolute;
  top: 10px;
  left: 0;
  color: #999;
  transition: 0.5s;
  pointer-events: none;
}
    <div class="flexContainer">
  <div class="box">
    <p>contact us</p>
    <form>
      <div>
        <input type="text" name="" required="">
        <label>firstname</label>
      </div>
      <div>
        <input type="text" name="" required="">
        <label>last name</label>
      </div>
      <div>
        <input type="text" name="" required="">
        <label>mail</label>
      </div>
      <div class="button">
        <button type="button">submit <span>&#10230;</span></button>
      </div>

    </form>
  </div>

  <div>
    <img src="https://www.fnordware.com/superpng/pnggrad8rgb.png">
  </div>
</div>