Home > Enterprise >  How to position elements in CSS?
How to position elements in CSS?

Time：10-01

I wanted to create something like this But my code is coming out to be completely different and I am not able to figure out why. The image is enlarged and going out of the div. Also if I try to shift the image towards right it instead is going to the left. I think I messed up in the positioning part of the image. How can I fix this issue and why is it happening? Here is my code:

#title {
  background-color: #916BBF;
}

.container-fluid {
  padding: 3% 15%;
}

/* Download Buttons */
.download-button {
  margin: 5% 3% 5% 0;
}

/* Title */
.title-img {
  width: 60%;
  transform: rotate(25deg);
  position: absolute;
}

#features {
  padding: 7% 15%;
  background-color: #fff;
  position: relative;
  z-index: 1;
}

.feature-box {
  text-align: center;
  padding: 5%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <!-- CSS bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <!-- JS bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
  <!-- CSS -->
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <!-- Title -->
  <section id="title">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6">
          <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
        </div>
        <div class="col-lg-6">
          <img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>


  <!-- Features -->

  <section id="features">
    <div class="row">
      <div class="feature-box col-lg-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-lg-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-lg-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>
    </div>
  </section>
</body>

</html>

CodePudding user response：

I went ahead and took your width off your img class and added a few styles. Next steps to achieve this look would be to contain your h1 and buttons on the left and provide a margin left.

EDIT:

I also added a col-sm-6 Bootstrap class to your col-lg-6 to make it mobile responsive. The @media only screen on your img class allows you to adjust the img to make it positioned just right on a different device.

#title {
  background-color: #916BBF;
}

.container-fluid {
  padding: 3% 15%;
}

/* Download Buttons */
.download-button {
  margin: 5% 3% 5% 0;
}
/* Title */
 .title-img {
   transform: rotate(27deg);
   position: absolute;
   margin-top: 5rem;
   overflow-x: hidden;
  }

/* Title Responsive */
@media only screen and (max-width: 900px) {
.title-img {
    transform: rotate(27deg);
    position: absolute;
    margin-top: 5rem;
    right: 2rem;
    overflow-x: hidden;
}
}

#features {
  padding: 7% 15%;
  background-color: #fff;
  position: relative;
  z-index: 1;
}

.feature-box {
  text-align: center;
  padding: 5%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <!-- CSS bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <!-- JS bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
  <!-- CSS -->
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <!-- Title -->
  <section id="title">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6 col-sm-6">
          <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
        </div>
        <div class="col-lg-6 col-sm-6">
          <img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>


  <!-- Features -->

  <section id="features">
    <div class="row">
      <div class="feature-box col-lg-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-lg-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-lg-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>
    </div>
  </section>
</body>

</html>

CodePudding user response：

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <!-- CSS bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <!-- JS bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
  <!-- CSS -->
  <link rel="stylesheet" href="styles.css">
</head>
<style>
#title {
  background-color: #916BBF;
}

.container-fluid {
  padding: 3% 15%;
}

/* Download Buttons */
.download-button {
  margin: 5% 3% 5% 0;
}

/* Title */
.title-img {
  width: 60%;
  transform: rotate(25deg);
  position: relative;
}

#features {
  padding: 7% 15%;
  background-color: #fff;
  position: relative;
  z-index: 1;
  margin-top: -128px;
}

.feature-box {
  text-align: center;
  padding: 5%;
}

</style>
<body>
  <!-- Title -->
  <section id="title">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6">
          <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
        </div>
        <div class="col-lg-6">
          <img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>


  <!-- Features -->

  <section id="features">
    <div class="row">
      <div class="feature-box col-md-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-md-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-md-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>
    </div>
  </section>
</body>

</html>

CodePudding user response：

Here is an alternative...

Instead of a fixed-negative-margin and z-index on #features... set .col-lg-6 to position:relative (this is so you can add an image-wrapping div with position:absolute and auto-fill the container by using width:100%; height:100% and set to overflow:hidden to auto-clip the image).

You will also need to remove position: relative; z-index: 1; margin-top: -128px; from #features (no longer needed).

The Benefits: without the need of fixed-negative-margin it will be more flexible for unforeseen changes in your content and possibly for future use in other projects

Additional suggestions: you could also apply other styles to the image-wrapper such as bottom:0 to make sure it gets pushed to the bottom and min-height and/or max-height to control its size and therefore the image inside.

Other notes: you can also remove position:relative from the image (not clear on what the need for that is)

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto Sans Display:wght@500&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="styles.css">
</head>
<style>
  #title {
    background-color: #555;
    font-family: 'Noto Sans Display', sans-serif;
  }
  
  .container-fluid {
    padding: 3% 15% 0 15%;
  }
  
  .download-button {
    margin: 5% 3% 5% 0;
  }
  
  .col-lg-6 {
    position:relative;
    min-height:170px; /* for narrow viewports */
  }
  
  .col-lg-6 > div {
    position:absolute;
    width:100%;
    height:100%;
    overflow:hidden;
  }
  
  .title-img {
    width: 70%;
    transform: rotate(25deg);
  }
  
  #features {
    padding: 7% 15%;
    background-color: #999;
  }
  
  .feature-box {
    text-align: center;
    padding: 5%;
  }
</style>

<body>
  <section id="title">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6">
          <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
        </div>
        <div class="col-lg-6">
          <div>
            <img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
          </div>
        </div>
      </div>
    </div>
  </section>


  <section id="features">
    <div class="row">
      <div class="feature-box col-md-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-md-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-md-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>
    </div>
  </section>
</body>

</html>

CodePudding user response：

Use the snippet below for your answer:-

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto Sans Display:wght@500&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="styles.css">
</head>
<style>
  #title {
    background-color: #555;
    font-family: 'Noto Sans Display', sans-serif;
  }
  
  .container-fluid {
    padding: 3% 15%;
  }
  
  .download-button {
    margin: 5% 3% 5% 0;
  }
  
  .title-img {
    width: 70%;
    transform: rotate(25deg);
    position: relative;
  }
  
  #features {
    padding: 7% 15%;
    background-color: #999;
    position: relative;
    z-index: 1;
    margin-top: -128px;
  }
  
  .feature-box {
    text-align: center;
    padding: 5%;
    font:
  }
</style>

<body>
  <section id="title">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6">
          <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
        </div>
        <div class="col-lg-6">
          <img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>


  <section id="features">
    <div class="row">
      <div class="feature-box col-md-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-md-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-md-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>
    </div>
  </section>
</body>

</html>

Page link：https//www.codepudding.com/Enterprise/135783.html

Prev:How can I show a heading element on button click?
Next:unable to fit three images inside their grid container
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding