CODEWITHSUNDEEP
htmlcss
Miguel Ferreira
Miguel Ferreira

Reputation: 45

How do i move this a bit to the top?

I would like to move this smartphone a little bit up above the text but I am having some trouble doing it.

I cant seem to find a way to do it, the things I have tried are:

But that just seems to move the content on the smartphone‎‎‎‎ it self.

Any help‎‎‎‎? ‎‎‎‎‎‎‎

Preview

Preview

.smartphone {
  position: relative;
  width: 340px;
  height: 640px;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
  float: right;
}


/* The horizontal line on the top of the device */

.smartphone:before {
  content: '';
  display: block;
  width: 5 0px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}


/* The circle on the bottom of the device */

.smartphone:after {
  content: '';
  display: block;
  width: 20px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}


/* The screen (or content) of the device */

.smartphone .content {
  width: 310px;
  height: 520px;
  background: white;
}
<div id="home" class="block home-block">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-lg-6  left-block">
        <div class="text-centered">
          <h1 class="title">Texter</h1>
          <p class="info-text">Envia mensagens de texto para todos os teus amigos.</p>
          <p class="Medium-text">Download Em Breve</p>
          <a href="https://play.google.com/?hl=pt-PT" target="_blank"><img src="playstore.png" alt="Playstore" style="height: 40px;"></a>
          <a href="https://www.apple.com/pt/ios/app-store/" target="_blank"><img src="appstore.png" alt="Apple App Store" style="height: 40px"></a>
        </div>
      </div>

      <div class="smartphone">
        <div class="content">
          <img src="" style="width:100%;border:none;height:100%" />
        </div>
      </div>
    </div>

Upvotes: 0

Views: 484

Answers (1)

coderboy
coderboy

Reputation: 759

.smartphone {
  position: relative;
  width: 340px;
  height: 640px;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
  float: right; 

  # TRY ADDING THIS NEW LINE AND LET ME SEE THE RESULT TO GUIDE YOU THROUGH
  margin-top: -30px !important;
}

Upvotes: 1

Related Questions