Home > Mobile >  How do I place the avatar in the extreme Right?
How do I place the avatar in the extreme Right?

Time：09-16

Click to open the image

Click to visit website

I want the avatar image to align with the right side of the screen but it's not aligning. I have tried text-align but that's also not workinh 

@import url('https://fonts.googleapis.com/css2?family=Roboto Slab:wght@100&family=Ubuntu:ital,wght@0,400;0,700;1,400&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  border: none;
  text-transform: capitalize;
  transition: all 0.2s linear;
}
html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  background: #5cdb95;
  font-family: 'Ubuntu', sans-serif;
}


#preloader{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  background: #f1f2f3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

/* navbar starts */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.7rem 10%;
  height: 6.5rem;
  background-color: #5cdb95;
  box-shadow: 0 1px 4px #379683;
}
section {
  min-height: 100vh;
  padding: 2rem 9%;
}
.heading {
  font-size: 3.5rem;
  color: #05386b;
  font-weight: 800;
  text-align: center;
}
.heading span {
  color: rgb(115, 3, 167);
}
header .logo {
  font-size: 1.9rem;
  font-weight: 800;
  text-decoration: none;
  color: #05386b;
}
header .logo i {
  font-size: 2.2rem;
}
header .logo:hover {
  color: #edf5e1;
}
header .navbar ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .navbar li {
  margin-left: 2.5rem;
}
header .navbar ul li a {
  font-size: 1.57rem;
  color: #05386b;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.04rem;
  transition: 0.2s;
}
header .navbar ul li a.active,
header .navbar ul li a:hover {
  color: #edf5e1;
  border-bottom: 0.2rem solid #edf5e1;
  padding: 0.5rem 0;
}
/* navbar ends */


/* hero section starts*/
.home {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  min-height: 100vh;
  align-items: center;
}
.home #particles-js {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.home::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.home .content {
  flex: 1 1 40rem;
  padding-top: 1rem;
  z-index: 1;
}

.home .image {
  flex: 1 1 40rem;
  z-index: 1;
  margin-left: auto;
  display: block;
}
.home .image img {
  width: 80%;
  display: block;
  float:right;
}

.home .content h2 {
  font-size: 5rem;
  font-weight: 800;
  color: #edf5e1;
}
.home .content h2 span {
  font-size: 5rem;
  font-weight: 800;
  color: #05386b;
}
.home .content p {
  font-size: 2.5rem;
  color: #000;
  font-weight: 600;
  padding: 1rem 0;
}
.home .content p span {
  font-size: 2.5rem;
  color: rgb(148, 8, 8);
  font-weight: 600;
  padding: 1rem 0;
}
.home .btn {
  margin-top: 1rem;
  position: absolute;
  line-height: 0;
  padding: 1.6rem 3rem;
  border-radius: 4em;
  transition: 0.5s;
  color: #fff;
  background: #2506ad;
  box-shadow: 0px 5px 18px rgba(48, 68, 247, 0.6);
  font-family: "Nunito", sans-serif;
}
.home .btn span {
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.1rem;
}
.home .btn i {
  margin-left: 0.3rem;
  font-size: 1.5rem;
  transition: 0.3s;
}
.home .btn:hover {
  background: #1a047e;
}
.home .btn:hover i {
  transform: translateX(5px);
}
/* social icons start */
.socials {
  position: relative;
  margin-top: 9rem;
}
.socials .social-icons {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.socials .social-icons li {
  display: inline-block;
  margin-bottom: 14px;
}
.social-icons a {
  font-size: 2rem;
  display: inline-block;
  line-height: 44px;
  color: #00d9ff;
  background-color: #09011b;
  width: 44px;
  height: 44px;
  text-align: center;
  margin-right: 8px;
  border-radius: 100%;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.social-icons a:active,
.social-icons a:focus,
.social-icons a:hover {
  color: #fff;
  background-color: #0685da;
}
.social-icons a.github:hover {
  background-color: #0e0e0e;
}
.social-icons a.twitter:hover {
  background-color: #00aced;
}
.social-icons a.linkedin:hover {
  background-color: #007bb6;
}
.social-icons a.dev:hover {
  background-color: #070707;
}
.social-icons a.instagram:hover {
  background-color: #ee00da;
}
/* social icons end */

/* hero media queries starts*/
@media (max-width: 450px) {
  .home .btn {
    margin: 4rem 0;
  }
  .socials {
    margin-top: 12rem;
  }
  .home .image img {
    margin-top: -12rem;
  }
  .home .content p {
    font-size: 2.2rem;
  }
  .home .content p span {
    font-size: 2.2rem;
  }
}
/* hero media queries ends*/
/* hero section end */
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Deepjyoti's Portfolio</title>
      <link id='favicon' rel="shortcut icon" href="static/images/favicon.jpg" type="image/x-jpg">
      <link href="static/css/style.css" rel="stylesheet"/>
      <script src="https://kit.fontawesome.com/24a4de0b47.js" crossorigin="anonymous"></script>
   </head>
   <body>
      <div id="preloader">
         <img draggable="false" src="static/images/preloader.gif" alt="" width=100px height=100px >
      </div>
      <!-- navbar starts -->
      <header>
         <a href="/"  ><img draggable="false"  src="static/images/logo.gif" style="width:80px;height:auto"; alt=""></a>
         
         <nav >
            <ul>
              <div id="menu" "></div>
               <li><a  href="#home">Home</a></li>
               <li><a href="#about">About</a></li>
               <li><a href="#skills">Skills</a></li>
               <li><a href="#education">Education</a></li>
               <li><a href="#work">Work</a></li>
               <li><a href="#experience">Experience</a></li>
               <li><a href="#contact">Contact</a></li>
            </ul>
         </nav>
      </header>
      <!-- navbar ends -->
      <!-- hero section starts -->
      <section  id="home">
         <div id="particles-js"></div>
         <div >
            <h2>Hi There,<br/> I'm Deepjyoti <span>Purkayastha</span></h2>
            <p>i am into <span ></span></p>
            <a href="#about" ><span>About Me</span>
            <i ></i>
            </a>
            <div >
               <ul >
                  <li><a  aria-label="LinkedIn" href="https://www.linkedin.com/in/deepjyoti7147/" target="_blank"><i ></i></a></li>
                  <li><a  aria-label="GitHub" href="https://github.com/deepjyoti7147" target="_blank"><i ></i></a></li>
                  <li><a  aria-label="Twitter" href="https://twitter.com/deepjyoti7147" target="_blank"><i ></i></a></li>
                  <li><a  aria-label="Instagram" href="https://www.instagram.com/deepjyoti7147"><i  target="_blank"></i></a></li>
                  <li><a  aria-label="Dev" href="https://dev.to/deepjyoti7147" target="_blank"><i ></i></a></li>
               </ul>
            </div>
         </div>
         <div >
            <img draggable="false"  src="static/images/hero2.png" alt="">
         </div>
      </section>
      <!-- hero section ends -->
      <!--JAVA SCRIPTS -->
      <script src="static/js/script.js"></script>
      
      <!--JAVA SCRIPT END-->
   </body>
</html>

CodePudding user response：

Try this:

@import url('https://fonts.googleapis.com/css2?family=Roboto Slab:wght@100&family=Ubuntu:ital,wght@0,400;0,700;1,400&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  border: none;
  text-transform: capitalize;
  transition: all 0.2s linear;
}
html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  background: #5cdb95;
  font-family: 'Ubuntu', sans-serif;
}


#preloader{
  position: fixed;
  top: 65px;
  right: 0;
  z-index: 10000;
  background: #f1f2f3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 100px;
}

/* navbar starts */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.7rem 10%;
  height: 6.5rem;
  background-color: #5cdb95;
  box-shadow: 0 1px 4px #379683;
}
section {
  min-height: 100vh;
  padding: 2rem 9%;
}
.heading {
  font-size: 3.5rem;
  color: #05386b;
  font-weight: 800;
  text-align: center;
}
.heading span {
  color: rgb(115, 3, 167);
}
header .logo {
  font-size: 1.9rem;
  font-weight: 800;
  text-decoration: none;
  color: #05386b;
}
header .logo i {
  font-size: 2.2rem;
}
header .logo:hover {
  color: #edf5e1;
}
header .navbar ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .navbar li {
  margin-left: 2.5rem;
}
header .navbar ul li a {
  font-size: 1.57rem;
  color: #05386b;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.04rem;
  transition: 0.2s;
}
header .navbar ul li a.active,
header .navbar ul li a:hover {
  color: #edf5e1;
  border-bottom: 0.2rem solid #edf5e1;
  padding: 0.5rem 0;
}
/* navbar ends */


/* hero section starts*/
.home {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  min-height: 100vh;
  align-items: center;
}
.home #particles-js {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.home::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.home .content {
  flex: 1 1 40rem;
  padding-top: 1rem;
  z-index: 1;
}

.home .image {
  flex: 1 1 40rem;
  z-index: 1;
  margin-left: auto;
  display: block;
}
.home .image img {
  width: 80%;
  display: block;
  float:right;
}

.home .content h2 {
  font-size: 5rem;
  font-weight: 800;
  color: #edf5e1;
}
.home .content h2 span {
  font-size: 5rem;
  font-weight: 800;
  color: #05386b;
}
.home .content p {
  font-size: 2.5rem;
  color: #000;
  font-weight: 600;
  padding: 1rem 0;
}
.home .content p span {
  font-size: 2.5rem;
  color: rgb(148, 8, 8);
  font-weight: 600;
  padding: 1rem 0;
}
.home .btn {
  margin-top: 1rem;
  position: absolute;
  line-height: 0;
  padding: 1.6rem 3rem;
  border-radius: 4em;
  transition: 0.5s;
  color: #fff;
  background: #2506ad;
  box-shadow: 0px 5px 18px rgba(48, 68, 247, 0.6);
  font-family: "Nunito", sans-serif;
}
.home .btn span {
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.1rem;
}
.home .btn i {
  margin-left: 0.3rem;
  font-size: 1.5rem;
  transition: 0.3s;
}
.home .btn:hover {
  background: #1a047e;
}
.home .btn:hover i {
  transform: translateX(5px);
}
/* social icons start */
.socials {
  position: relative;
  margin-top: 9rem;
}
.socials .social-icons {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.socials .social-icons li {
  display: inline-block;
  margin-bottom: 14px;
}
.social-icons a {
  font-size: 2rem;
  display: inline-block;
  line-height: 44px;
  color: #00d9ff;
  background-color: #09011b;
  width: 44px;
  height: 44px;
  text-align: center;
  margin-right: 8px;
  border-radius: 100%;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.social-icons a:active,
.social-icons a:focus,
.social-icons a:hover {
  color: #fff;
  background-color: #0685da;
}
.social-icons a.github:hover {
  background-color: #0e0e0e;
}
.social-icons a.twitter:hover {
  background-color: #00aced;
}
.social-icons a.linkedin:hover {
  background-color: #007bb6;
}
.social-icons a.dev:hover {
  background-color: #070707;
}
.social-icons a.instagram:hover {
  background-color: #ee00da;
}
/* social icons end */

/* hero media queries starts*/
@media (max-width: 450px) {
  .home .btn {
    margin: 4rem 0;
  }
  .socials {
    margin-top: 12rem;
  }
  .home .image img {
    margin-top: -12rem;
  }
  .home .content p {
    font-size: 2.2rem;
  }
  .home .content p span {
    font-size: 2.2rem;
  }
}
/* hero media queries ends*/
/* hero section end */
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Deepjyoti's Portfolio</title>
      <link id='favicon' rel="shortcut icon" href="static/images/favicon.jpg" type="image/x-jpg">
      <link href="static/css/style.css" rel="stylesheet"/>
      <script src="https://kit.fontawesome.com/24a4de0b47.js" crossorigin="anonymous"></script>
   </head>
   <body>
      <div id="preloader">
         <img draggable="false" src="static/images/preloader.gif" alt="" width=100px height=100px >
      </div>
      <!-- navbar starts -->
      <header>
         <a href="/"  ><img draggable="false"  src="static/images/logo.gif" style="width:80px;height:auto"; alt=""></a>
         
         <nav >
            <ul>
              <div id="menu" "></div>
               <li><a  href="#home">Home</a></li>
               <li><a href="#about">About</a></li>
               <li><a href="#skills">Skills</a></li>
               <li><a href="#education">Education</a></li>
               <li><a href="#work">Work</a></li>
               <li><a href="#experience">Experience</a></li>
               <li><a href="#contact">Contact</a></li>
            </ul>
         </nav>
      </header>
      <!-- navbar ends -->
      <!-- hero section starts -->
      <section  id="home">
         <div id="particles-js"></div>
         <div >
            <h2>Hi There,<br/> I'm Deepjyoti <span>Purkayastha</span></h2>
            <p>i am into <span ></span></p>
            <a href="#about" ><span>About Me</span>
            <i ></i>
            </a>
            <div >
               <ul >
                  <li><a  aria-label="LinkedIn" href="https://www.linkedin.com/in/deepjyoti7147/" target="_blank"><i ></i></a></li>
                  <li><a  aria-label="GitHub" href="https://github.com/deepjyoti7147" target="_blank"><i ></i></a></li>
                  <li><a  aria-label="Twitter" href="https://twitter.com/deepjyoti7147" target="_blank"><i ></i></a></li>
                  <li><a  aria-label="Instagram" href="https://www.instagram.com/deepjyoti7147"><i  target="_blank"></i></a></li>
                  <li><a  aria-label="Dev" href="https://dev.to/deepjyoti7147" target="_blank"><i ></i></a></li>
               </ul>
            </div>
         </div>
         <div >
            <img draggable="false"  src="static/images/hero2.png" alt="">
         </div>
      </section>
      <!-- hero section ends -->
      <!--JAVA SCRIPTS -->
      <script src="static/js/script.js"></script>
      
      <!--JAVA SCRIPT END-->
   </body>
</html>

CodePudding user response：

Your snippet doesnt work but i went to your website and checked your CSS.

Since your image in a container that has a width with limit you gotta use position:absolute and then resize the picture with right and top rulers. But simpy add this code and it will fix your problem. Customize it according to your needs. Don't forget to set different values for mobile version of the website:

.home .image img {
    width: 43%;
    position: absolute;
    top: 17%;
    right: 0;
}

Page link：https//www.codepudding.com/Mobile/546147.html

Prev:How to change dropdown background color on certain pages?
Next:How to display spin result after each spinning
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding