Im a beginner. I was creating my portfolio website. It looks good on computer and when I'm testing it for smaller devices on my computer everything works fine.
But only I hosted it and opened a link on my phone my background picture which should be fixed and centered and text float over it when scrolling (this is a way it works on computer) but on the phone pic is only partial, zoomed and scrolls together with text. I don't know what did I miss or did wrong.
Please someone give an advice.
.bg-img {
background-image: url("images/colors4.png");
min-height: 720px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-bottom: 2px solid black;
}
.wrapper {
background: url('images/colors4.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.profile-picture {
margin-top: 40px;
margin-bottom: 40px;
border-radius: 100%;
}
.page-introduction {
margin-top: 100px;
margin-left: 0;
margin-bottom: 30px;
text-align: center;
}
.icons {
width: 30px;
height: 30px;
}
.col-sm-6 {
padding-left: 80px;
padding-right: 80px;
}
.skills-list {
display: flex;
justify-content: space-evenly;
margin-top: 60px;
margin-bottom: 200px;
}
.scroll {
color: #fff;
margin-top: 100px
}
#toTopBtn {
position: fixed;
bottom: 26px;
right: 39px;
z-index: 98;
padding: 21px;
background-color: rgba(198, 84, 232, 0.8)
}
.js .cd-top--fade-out {
opacity: .5
}
.js .cd-top--is-visible {
visibility: visible;
opacity: 1
}
.js .cd-top {
visibility: hidden;
opacity: 0;
transition: opacity .3s, visibility .3s, background-color .3s
}
.cd-top {
position: fixed;
bottom: 20px;
right: 20px;
display: inline-block;
height: 40px;
width: 40px;
box-shadow: 0 0 10px rgba(0, 0, 0, .05) !important;
background: url(https://res.cloudinary.com/dxfq3iotg/image/upload/v1571057658/cd-top-arrow.svg) no-repeat center 50%;
background-color: rgba(198, 84, 232, 0.8);
} <div class="bg-img wrapper img-fluid">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Welcome to my portfolio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#about-me">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">My skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">My projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact-me">Contact me</a>
</li>
</ul>
</div>
</div>
</nav>
<a href="#" id="toTopBtn" class="cd-top text-replace js-cd-top cd-top--is-visible cd-top--fade-out" data-abc="true"></a>
<div class="container">
<div class="row">
<div class="col-sm-6 profile-picture">
<img src="me2.png" class="mx-auto d-block img-fluid profile-picture" alt="profile piture">
<h1>Inna</h1>
<p class="title">Front end web developer</p>
</div>
<div class="col-sm-6 page-introduction">
<h2 id="about-me">
Responsive Front-end Development
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, praesentium! Incidunt totam dignissimos deserunt eius ea, aliquid corrupti necessitatibus, sit id consectetur ipsum velit vitae ut asperiores? Repellat, dolor eos?.</p>
</div>
</div>
</div>
