Good Everning,
I am currently trying to make my webpage responsive. When I show it in a 320px viewport width it will show zoomed at the left. But if I zoom out, it looks like it should. I am using media queries. You can check it in the images. Please try to open in in a 320px vw. I can not paste all the code in the snippet, please check the whole code in:
https://github.com/diefonro/portfolio
.text-title {
font-family: "Ubuntu", sans-serif;
font-size: 1.5em;
font-weight: 600;
position: relative;
top: 200px;
/* left: 250px; */
margin-top: 5px;
color: rgb(37, 37, 37);
letter-spacing: 2px;
}
.pos-text {
font-family: "Ubuntu", sans-serif;
font-size: 1em;
font-weight: 600;
position: relative;
top: 200px;
/* left: 250px; */
margin-top: 5px;
letter-spacing: 3px;
color: rgb(37, 37, 37);
}
.title {
font-family: "Pangolin", sans-serif;
font-size: 4em;
letter-spacing: 5px;
position: relative;
top: 200px;
/* left: 250px; */
color: rgb(37, 37, 37);
margin-top: 10px;
font-weight: 700;
}
img.main-img {
width: 430px;
float: left;
position: relative;
top: -20px;
left: 20px;
z-index: -1;
}
.home-cont{
margin-left: 40%;
}
.about{
margin-left: 15%;
}
.about img {
width: 280px;
opacity: 80%;
position: relative;
/* left: 130px; */
top: 170px;
}
.about-text{
margin-left: 50px;
}
.about-text h2 {
font-size: 20px;
position: relative;
left: 20px;
top: 200px;
color: #065c2a;
word-wrap: break-word;
text-shadow: 0px 0px 3px rgb(4, 82, 15);
letter-spacing: 10px;
text-align: center;
}
.about-text p {
font-weight: 600;
width: 90%;
font-size: 14px;
min-width: 300px;
position: relative;
/* left: 200px; */
top: 250px;
text-align: justify;
color: rgb(75, 74, 74);
margin-left: 30px;
word-wrap: break-word;
}
.get-cv2 {
position: relative;
top: 250px;
left: 120px;
border: none;
width: 150px;
margin-top: 25px;
padding: 13px;
border-radius: 7px;
font-family: "Ubuntu", sans-serif;
font-weight: bolder;
text-shadow: 2px 2px 7px rgba(22, 22, 22, 0.52);
box-shadow: 0.5px 0.5px 3px rgba(0, 0, 0, 0.404);
letter-spacing: 5px;
float: left;
color: #065c2a;
border: 1px solid #571e8d3b;
}
.services{
margin: auto;
min-width: 1000px;
margin-left: 40px;
/* background-color: #28852d; */
}
.portfolio{
margin-left: 50px;
}
.portfolio, .contact, footer{
min-width: 1000px;
}
#footer-bcg{
position: relative;
top: 740px;
width: 1100px;
z-index: -3;
opacity: 70%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Diefonro's Portfolio</title>
<link rel="stylesheet" href="css/styles.css" />
<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=Ubuntu&family=Pangolin&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header>
<nav>
<a class="logo" href="#home">
<img src="assets/logo/dfnr.png" alt="Diefonro logo" />
</a>
<ul class="nav-list">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#portfolio">Portfolio</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="home-cont">
<div class="main-text" id="home">
<p class="text-title">Hi! This is</p>
<h1 class="title gradient-title">DIEFONRO</h1>
<p class="pos-text">Junior Front-End Developer</p>
<a href="#contact"><button class="hire">HIRE ME</button></a>
<a href="assets/files/Diefonro's CV.pdf" download="Diefonro's CV"
><button class="get-cv">GET CV</button></a
>
<img
src="assets/img/Diefonro.png"
alt="diefonro's ilustration"
class="main-img"
/>
</div>
</div>
<div class="about-sect-cont">
<div id="about" class="et"> </div>
<div class="about">
<div class="about-img">
<img src="assets/img/dev1.png" alt="dev" class="dev-about" />
</div>
<div class="about-text">
<h2>
LET ME INTRODUCE <br />
MYSELF
</h2>
<p>
I am a passionate Front-End Junior Developer, currently located in
Bogotá, Colombia, but willing to work for anyone in the world.
<br />
<br />
I like music, I can play several instruments, I study medicine, I
like art in every shape. And at least for me, the human body and
developing are some of them.
</p>
<a href="assets/files/Diefonro's CV.pdf" download="Diefonro's CV"
><button class="get-cv2">GET CV</button></a
>
</div>
</div>
</div>
<div class="services-sect-cont">
<div id="services" class="et"> </div>
<div class="services">
<div class="services-text-cont">
<div class="services-text">
<h2>Services</h2>
<p>This are some of the services I can currently provide:</p>
</div>
</div>
<div class="services-cards-cont">
<div class="services-cards">
<div class="services-cont">
<div class="cont1">
<img
src="assets/logo/629-6291879_the-image-is-of-a-greater-than-and.png"
alt="web-d.logo"
/>
<h2>WEB DEVELOPMENT</h2>
<p>
For creating, building and maintaining your website based on
the World Wide Web.
</p>
</div>
</div>
<div class="services-cont">
<div class="cont2">
<img src="assets/logo/5387361.png" />
<h2>WEB DESIGN</h2>
<p>
For gathering webpage layout, content production and graphic
design.
</p>
</div>
</div>
<div class="services-cont">
<div class="cont3">
<img src="assets/logo/5998058.png" alt="web-d.logo" />
<h2>SEO OPTIMIZE</h2>
<p>
For improving the application to increase its visibility
when searched on search engines.
</p>
</div>
</div>
<div class="services-cont">
<div class="cont4">
<img src="assets/logo/1991222.png" alt="web-d.logo" />
<h2>UX/UI DESIGN</h2>
<p>
For supporting users behaviour when interacting with the
product, besides to desinging aesthetic interfaces,
improving the flow of the application.
</p>
</div>
</div>
</div>
</div>
<div class="technologies">
<div class="services-text services-text2">
<h2>Technologies</h2>
<p>This are some of the technologies I can currently handle:</p>
</div>
<div class="techs-cont">
<img src="assets/logo/1199118.png" alt="html5 logo" />
<img src="assets/logo/1199113.png" alt="css3 logo" />
<img src="assets/logo/1199124.png" alt="javascript logo" />
<img src="assets/logo/52234.png" alt="git logo" /> <br />
<img
id="gh-logo"
src="assets/logo/4926624.png"
alt="github logo"
/>
<img
id="bootstrap-logo"
src="assets/logo/1348052.png"
alt="bootsrap logo"
/>
<img
id="jq-logo"
src="assets/logo/jQuery-logo.png"
alt="jQuery-logo"
title="Deepening..."
/>
<img
id="react-logo"
src="assets/logo/1183672.png"
alt="react.js logo"
title="Deepening..."
/>
<img src="assets/logo/688062.png" alt="photoshop logo" />
<img src="assets/logo/688064.png" alt="illustrator logo" />
<img src="assets/logo/688068.png" alt="after efects logo" />
<img
id="adobe-xd"
src="assets/logo/688066.png"
alt="adobe xd logo"
/>
</div>
</div>
</div>
</div>
<div id="portfolio" class="et"> </div>
<div class="portfolio">
<div class="portfolio-text">
<h2>Diefonro's Portfolio</h2>
<p>Here are some of the creations I have developed:</p>
</div>
<div class="portfolio-cont">
<div class="portfolio-card">
<a
href="https://diefonro.github.io/Vegan-Store"
target="_blank"
class="vegan-st"
>
<img src="assets/img/vegan-st.png" alt="vegan store website" />
</a>
<div class="portfolio-card-text">
<h2>Vegan Store Website</h2>
<p>
Template made specially for a regular Vegan Store (can be
applied to any store).
<br />
<br />
You can check the code on
<a
class="gith-link"
target="_blank"
href="https://github.com/Diefonro/Vegan-Store"
>GitHub</a
><br />
<br />
You can watch this page live
<a href="https://diefonro.github.io/Vegan-Store" target="_blank"
>here</a
>
</p>
</div>
</div>
<div class="portfolio-card">
<a
href="https://diefonro.github.io/Google-Clone-Diefonro"
target="_blank"
class="vegan-st"
>
<img src="assets/img/google-cl.png" alt="google clone" />
</a>
<div class="portfolio-card-text">
<h2>Google Clone</h2>
<p>
This is a google clone made completely from scratch by Diefonro.
<br />
<br />
You can check the code on
<a
class="gith-link"
target="_blank"
href="https://github.com/Diefonro/Google-Clone-Diefonro"
>GitHub</a
><br />
<br />
You can watch this page live
<a
href="https://diefonro.github.io/Google-Clone-Diefonro"
target="_blank"
>here</a
>
</p>
</div>
</div>
<div class="portfolio-card">
<a
href="https://diefonro.github.io/Budget-App"
target="_blank"
class="vegan-st"
>
<img src="assets/img/Budget-App.png" alt="budget app" />
</a>
<div class="portfolio-card-text">
<h2>Budget App</h2>
<p>
This is a budget application made with JavaScript to keep track
of incomes and outcomes (It's in Spanish but you can easily
understand).
<br />
<br />
You can check the code on
<a
class="gith-link"
target="_blank"
href="https://github.com/Diefonro/Budget-App"
>GitHub</a
><br />
<br />
You can watch this page live
<a href="https://diefonro.github.io/Budget-App" target="_blank"
>here</a
>
</p>
</div>
</div>
<div class="portfolio-card">
<a
href="https://diefonro.github.io/Calculator-JS"
target="_blank"
class="vegan-st"
>
<img src="assets/img/Calculator.png" alt="budget app" />
</a>
<div class="portfolio-card-text">
<h2>Calculator</h2>
<p>
This is a regular calculator application made on JavaScript, you
can operate with a little more of the basic aritmethic
operations.
<br />
<br />
You can check the code on
<a
class="gith-link"
target="_blank"
href="https://github.com/Diefonro/Calculator-JS"
>GitHub</a
><br />
<br />
You can watch this page live
<a
href="https://diefonro.github.io/Calculator-JS/"
target="_blank"
>here</a
>
</p>
</div>
</div>
<div class="portfolio-card">
<a
href="https://diefonro.github.io/Digital-Clock-JS"
target="_blank"
class="vegan-st"
>
<img src="assets/img/OCK.png" alt="budget app" />
</a>
<div class="portfolio-card-text">
<h2>Digital Clock</h2>
<p>
This is an application that shows a digital clock, besides to
the current date, and a little animation.
<br />
<br />
You can check the code on
<a
class="gith-link"
target="_blank"
href="https://github.com/Diefonro/Digital-Clock-JS"
>GitHub</a
><br />
<br />
You can watch this page live
<a
href="https://diefonro.github.io/Digital-Clock-JS/"
target="_blank"
>here</a
>
</p>
</div>
</div>
<div class="portfolio-card">
<a
href="https://diefonro.github.io/List-Of-Individuals"
target="_blank"
class="vegan-st"
>
<img src="assets/img/list-ind.png" alt="budget app" />
</a>
<div class="portfolio-card-text">
<h2>List Of Individuals</h2>
<p>
This is an application where you can add individuals to a list
to keep track of them. There could be many examples.
<br />
<br />
You can check the code on
<a
class="gith-link"
target="_blank"
href="https://github.com/Diefonro/List-Of-Individuals"
>GitHub</a
><br />
<br />
You can watch this page live
<a
href="https://diefonro.github.io/List-Of-Individuals"
target="_blank"
>here</a
>
</p>
</div>
</div>
</div>
</div>
<div id="contact" class="et"> </div>
<div class="contact">
<div class="contact-cont">
<h3>Contact me</h3>
<form action="https://formsubmit.co/dafrprof@gmail.com" method="POST">
<input type="text" name="name" placeholder="Name" required />
<input
type="hidden"
name="_next"
value="https://diefonro.github.io/portfolio/thankyou.html"
/>
<input
type="email"
name="email"
placeholder="Your Email Address"
required
/>
<input type="text" name="_subject" placeholder="Subject" required />
<input type="hidden" name="_captcha" value="false" />
<textarea
minlength="10"
name="textarea"
id="message"
cols="25"
rows="10"
placeholder="Message"
></textarea>
<a href="thankyou.html">
<button class="contact-btn">SEND</button></a
>
</form>
</div>
</div>
</main>
<footer>
<a
href="https://www.linkedin.com/in/andrés-fonseca-619385225/"
target="_blank"
>
<img id="lil-footer" src="assets/logo/2111532.png" alt="linkedin logo"
/></a>
<a href="https://github.com/Diefonro" target="_blank">
<img id="ghl-footer" src="assets/logo/4926624.png" alt="github logo" />
</a>
<small>Diefonro's Portfolio - Made by Diefonro - 2021</small>
</footer>
<img id="footer-bcg" src="assets/img/bcg-portfolio.png" alt="" />
</body>
</html>
