So iam trying to make a portfolio site for the first time, however i came to test it on mobile and only just realised there is a massive block of white space on the right hand side. But iam struggling to figure out why this is ive tried moving some margins and other css features but cant quite see whats the issue, and its the same problem on all of the pages. Hope someone can help me. (I know its probably something really stupid... )
Image example : https://ibb.co/KXX8dbL
HTML CODE OF JUST index page (issue is same for all other pages)
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Mathews Joy</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/MJ.png">
<script src="index.js"></script>
</head>
<body>
<!--Screen loading-->
<div class="loader">
<img src="images/loading.gif" alt="Loading...">
</div>
<!--Scroll Top Button-->
<div class="scrollTop" onclick="scrollToTop()"></div>
<!--Scroll bar-->
<div id="progressbar"></div>
<div id="scrollPath"></div>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
<a href="contact.html">Contact Me</a>
</div>
<div class="nav-link-wrapper">
<a href="certifications.html">Certications</a>
</div>
<div class="nav-link-wrapper">
<a href="data.html">Data Data Data!</a>
</div>
</div>
<div class="right-side">
<div class="brand">
MATHEWS JOY
</div>
</div>
</div>
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/white.jfif)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
“Don’t limit yourself.<br>
Many people limit themselves to what they think they can do.<br>
You can go as far as your mind lets you.<br>
What you believe, remember, you can achieve.” – Mary Kay Ash
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/win.jfif)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
“If people are doubting how far you can go,<br>
go so far that you can’t hear them anymore.” – Michele Ruiz
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/team.jfif)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
“We need to accept that we won’t always make the right decisions,<br>
that we’ll screw up royally sometimes – understanding that failure is not the opposite of success,<br>
it’s part of success.” – Arianna Huffington
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio2.jpg)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
“You’ve gotta dance like there’s nobody watching,<br>
love like you’ll never be hurt, sing like there’s nobody listening,<br>
and live like it’s heaven on earth.” ― William W. Purkey
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio3.jpg)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
“Smart people learn from everything and everyone,<br>
average people from their experiences,<br>
stupid people already have all the answers.” – Socrates
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio1.jpg)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
“Do what you feel in your heart to be right – for you’ll be criticized anyway.”<br>
― Eleanor Roosevelt
</div>
</div>
</div>
</div>
</div>
</div>
<div id="parent2">
<div class="aboutme">
<h1>About Me</h1>
<p>Student at the University of Lincoln studying Computer Science (first year). A hard-working, responsible and enthusiastic learner. Always motivated with a willingness
to learn new attributes and obtain new business experiences. My main area of interest is data! specfically data analyst roles and business analyst roles, this has only arised
recently but as soon as I did research in these fields and talked some some well established professionals, it instantly sparked my interest.
</p>
</div>
<div class="pictureofme">
<img src="images/fb.png" alt="Avatar" width="300" height="300">
</div>
</div>
<!--Most Used Sites Section-->
<div class="wrapper">
<h1>Skills and tools I Have Experience With</h1>
<div class="tools">
<div class="websites">
<div class="site_img">
<a href="https://github.com/mathewsjoyy?tab=repositories"><img src="images/sql.png" alt="sql"></a>
</div>
<h3>SQL</h3>
<p class="role">Database communication tool</p>
<p>SQL stands for Structured Query Language. SQL lets you access and manipulate databases.
A query language is a kind of programming language that's designed to facilitate retrieving specific information from databases,
and that's exactly what SQL does. I have experience using MySQL and SSMS (SQL Server Management Studio).
</p>
</div>
<div class="websites">
<div class="site_img">
<a href="https://github.com/mathewsjoyy?tab=repositories"><img src="images/python.png" alt="python"></a>
</div>
<h3>Python</h3>
<p class="role">High-level programming language</p>
<p>Python is an interpreted, high-level and general-purpose programming
language. Python's design philosophy emphasizes code readability with its
notable use of significant indentation. I have learnt python at university, and have done
a couple intermediate/begineer projects including data analysis.</p>
</div>
<div class="websites">
<div class="site_img">
<a href="https://github.com/mathewsjoyy?tab=repositories"><img src="images/tableau-software.png" alt="tableau"></a>
</div>
<h3>Tableau</h3>
<p class="role">Data visualisation</p>
<p>Tableau is a powerful and fastest growing data visualization tool used in the Business Intelligence Industry.
It helps in simplifying raw data in a very easily understandable format. I have used this tool to produce
clear and easy to understand data visualisations for those with less understanding of the data.</p>
</div>
<div class="websites">
<div class="site_img">
<a href="https://github.com/mathewsjoyy?tab=repositories"><img src="images/csharp.png" alt="tableau"></a>
</div>
<h3>C#</h3>
<p class="role">High-level programming language</p>
<p>C# is an object-oriented programming language from Microsoft that aims to combine the computing power
of C++ with the programming ease of Visual Basic. My main exposure to this language is through university
where I strengthed my OOP skills through making intermediate console applications.</p>
</div>
</div>
</div>
<!--website footer-->
<div class="footer">
<div class="copyright"> 2021 Created By Mathews Joy</div>
</div>
</body>
</html>
FULL CSS CODE
/* Master Styles */
/* import font google api */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
* {
font-family: 'Poppins', sans-serif;
padding: 0;
margin: 0;
}
@viewport {
width: device-width;
zoom: 1.0 ;
}
/* Scroll bar */
::-webkit-scrollbar {
width: 0;
}
#scrollPath {
position:Fixed;
top: 0; right: 0; width:10px; height:100%;
background: rgba(255,255,255,0.04);
}
#progressbar {
position:Fixed;
top: 0; right: 0; width:10px; height:100%;
background: linear-gradient(to top, silver, aliceblue);
animation: animate 5s linear infinte;
z-index: 1;
}
@keyframes animate {
0%,100%
{
filter: hue-rotate(0deg);
}
50%
{
filter: hue-rotate(360deg);
}
}
#progressbar:before{
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to top, silver, aliceblue);
filter: blur(20px);
}
#progressbar:after{
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to top, silver, aliceblue);
filter: blur(20px);
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/* Nav Styles*/
.nav-wrapper{
display:flex;
justify-content: space-between;
padding: 30px;
box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
}
.left-side{
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform:uppercase;
}
.nav-link-wrapper {
color: black;
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
text-decoration: none;
transition: color 0.5s;
color: black;
}
.nav-link-wrapper:hover{
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover{
color:black;
}
.brand {
color: black;
}
.brand:hover{
border-bottom: 1px solid black;
}
/* Portfolio Styles */
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper {
position: relative;
}
.portfolio-img-background {
height: 350px;
width: 100%;
background-size: cover;
background-position: center;
}
.img-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px; padding-right: 100px;
}
.img-text-wrapper .subtitle {
transition: 1s;
font-weight: 600;
color: transparent;
text-align: center;
}
.img-text-wrapper:hover .subtitle {
font-weight: 600;
color: white;
}
.img-darken {
transition: 1s;
filter: brightness(10%);
}
/* about me */
#parent2 {
display: flex;
padding: 5px;
align-items: center;
justify-content: center;
margin-top: 230px;
height: 350px;
}
.aboutme {
margin-left: 300px;
margin-right: 200px;
font-size: 18px;
padding: 40px;
background: #f5f7f8;
border-radius: 10px;
height:70%;
width:100%;
overflow: auto;
text-overflow: ellipsis;
}
.aboutme h1 {
color: #000;
margin:0 0 30px 0;
text-transform: uppercase;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.5px;
}
.aboutme h1:hover {
-webkit-text-fill-color: black;
}
.pictureofme img{
width: 300px;
margin-left: -220px;
margin-right: 300px;
}
/* Most used sites section */
.wrapper {
margin: 0;
padding: 3%;
box-sizing: border-box;
background: white;
margin-top: 10%;
height: 100%; width: 100%;
}
.wrapper h1 {
font-size: 40px;
text-align: center;
margin-bottom: 60px;
padding-bottom: 2%;
text-transform: uppercase;
color: #000;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.5px;
}
.wrapper h1:hover {
-webkit-text-fill-color: black;
}
.tools {
display: flex;
text-align: center;
width:auto;
justify-content: center;
flex-wrap: wrap;
}
.tools .websites {
background: white;
margin: 5px;
width: 300px;
margin-bottom: 50px;
padding: 20px;
line-height: 25px;
position: relative;
border-radius: 10%;
box-shadow: 0 2px 8px 0 rgb(0 0 0 / 20%);
}
.tools .websites h3 {
font-size: 30px;
text-transform: uppercase;
margin-top: 50px;
}
.tools .websites p.role {
font-size: 15px;
text-transform: uppercase;
margin: 12px 0;
}
.tools .websites .site_img {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
background: white;
}
.tools .websites .site_img img {
width: 100px;
height: 100px;
padding: white;
}
/* footer */
.footer {
background-color:grey;
text-align: center; color: white;
padding: 3px;
position:fixed;
left:0; bottom:0; width: 100%; height: 20px;
opacity: 0.5;
z-index: 1;
}
.copyright {
float: left
}
/* CONTACT PAGE CSS STYLES */
.connect {
width: 80%;
margin:50px auto;
text-align: center;
padding-top: 50px;
}
.connect h1{
color: #4169E1;
}
.connect p{
margin-bottom: 15px;
}
.contact-box{
display:flex;
}
.contact-left {
flex-basis: 60%;
padding: 40px 60px;
background: white;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
}
.contact-right {
flex-basis: 40%;
padding: 40px;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
}
.input-row {
display:flex;
justify-content: space-between;
margin-bottom: 20px;
}
.input-row .input-group {
flex-basis: 45%;
}
input{
width:100%;
border:none;
border-bottom: 1px solid black;
outline:none;
padding-bottom: 5px;
}
.textarea{
width: 100%;
padding: 10px;
outline: none;
border:1px soild black;
box-sizing:border-box;
}
label {
margin: 6px;
display:block;
color: purple;
}
button{
border: none;
outline: none;
width: 100%;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
}
.contact-left h3{
color: forestgreen;
font-weight:600;
margin-bottom:30px;
}
.contact-right h3{
color:forestgreen;
font-weight:600;
margin-bottom:30px;
}
tr td:first-child {
padding-right: 20px;
}
tr td{
padding-top: 20px;
}
.contacts {
display: flex;
justify-content: space-around;
padding: 10px;
font-size: 18px;
padding-bottom: 200px;
}
.contacts .facebook {
color: blue;
}
.contacts .instagram {
color: orangered;
}
.contacts .linkedin {
color: steelblue;
}
.contacts .gmail {
color: red;
}
/* Certications Page */
.title-box {
margin:auto 50px;
text-align: center;
margin-top: 90px;
padding-bottom: 20px;
}
.title-box h1{
color: purple;
}
.certications-box {
width: 200px;
height: 198px;
border-radius: 4px;
margin-bottom: 30px;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
padding: 20px;
position: relative;
}
.certications-box img{
width: 100px;
position: absolute;
top: 20px;
right: 20px;
border-radius: 4px;
transition: .5s;
}
.certications-box h4{
margin-top: 25px;
margin-bottom: 5px;
color: #2196f3;
}
small {
color: #555;
}
.break-box {
margin: 50px auto 20px;
border-radius: 3px;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
}
.certications-box p{
text-align: center;
font-size: 16px;
}
.certications-row {
display: grid;
grid-template-columns: auto auto auto;
justify-content: space-around;
flex-wrap: wrap;
margin: auto;
padding: 60px;
}
.certications-box img:hover{
width: 198px;
}
/* Video Text */
.banner2 {
position: absolute;
height: 100vh;
width: 100%;
overflow: hidden;
display:flex;
justify-content: center;
text-align: center;
}
.banner2 video{
width: 100%; height: 100%;
object-fit: cover;
top: 0;
left: 0;
}
.banner2 h2 {
top: 0; left: 0; width: 100%; height: 100%;
position: absolute;
background: #fff;
font-size: 30vw;
text-transform: uppercase;
text-align:center;
line-height: 45vh;
color: #000;
mix-blend-mode:screen;
}
.banner3 {
position: absolute;
height: 100vh;
width: 100%;
overflow: hidden;
display:flex;
justify-content: center;
text-align: center;
}
.banner3 video{
width: 100%; height: 100%;
object-fit: cover;
top: 0;
left: 0;
}
.banner3 h2 {
top: 0; left: 0; width: 100%; height: 100%;
position: absolute;
background: #fff;
font-size: 20vw;
text-transform: uppercase;
text-align:center;
line-height: 45vh;
color: #000;
mix-blend-mode:screen;
}
/* Scroll to top button */
.scrollTop {
position: fixed;
bottom: 800px;
height: 60px;
width: 40px;
right: 40px;
background: #fff url(images/up.png);
border-radius: 50%;
background-size: 40px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
z-index: 10;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
.scrollTop.active {
bottom: 40px;
visibility: visible;
opacity: 1;
}
/* POWERPOINT */
.powerpoint {
padding: 90px;
}
/* THANK YOU PAGE */
.thank-you {
justify-content: center;
text-align: center;
font-size: 230%;
padding-top: 18%;
}
/* ANALYSIS PAGE */
.twitter {
display: grid;
padding: 90px;
margin: auto;
width: 66%;
grid-template-columns: auto auto auto;
justify-content: space-between;
flex-wrap: wrap;
}
.data #main-header{
padding-right: 17%;
padding-left: 17%;
margin-left: auto;
margin-right: auto;
padding-top: 4%;
font-size: 50px;
text-align: center;
color: #000;
text-transform: uppercase;
}
.data #main-header:hover {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.5px;
}
.data .data-inner {
padding-right: 25%;
padding-left: 25%;
margin-left: auto;
margin-right: auto;
padding-top: 3%;
padding-bottom: 5%;
}
.data .data-inner #first-header{
color: green;
}
.data .data-inner #second-header{
color: salmon;
}
.data .data-inner #third-header{
color: blue;
}
.data .data-inner img{
display: block;
padding: 4%;
margin-left: auto;
margin-right: auto;
width: 68%;
}
.data .data-inner iframe{
display: block;
padding: 4%;
margin-left: auto;
margin-right: auto;
width: 68%;
height: 330px;
}
/* SCREEN LOADER */
.loader {
position: fixed;
z-index: 99;
top: 0;
left: 0;
width:100%;
height:100%;
background: white;
display:flex;
justify-content: center;
align-items:center;
}
.loader > img {
width: 100px;
}
.loader.hidden{
animation:fadeOut 1s;
animation-fill-mode: forwards;
}
@keyframes fadeOut{
100%{
opacity: 0;
visibility: hidden;
}
}
JAVASCRIPT FULL
// For Loading screen
window.addEventListener('load', function(){
const loader = document.querySelector(".loader");
loader.className += " hidden"; // class loaderhidden
});
// For the hover animations at start of the page
const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper');
portfolioItems.forEach(portfolioItem => {
portfolioItem.addEventListener('mouseover', () => {
portfolioItem.childNodes[1].classList;
portfolioItem.childNodes[1].classList.add('img-darken');
})
portfolioItem.addEventListener('mouseout', () => {
portfolioItem.childNodes[1].classList.remove('img-darken');
})
})
// For Progress bar
let progress = document.getElementById('progressbar');
let totalHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = function(){
let progressHeight = (window.pageYOffset / totalHeight) * 100;
progress.style.height = progressHeight + "%";
}
// Custom cursor
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
})
document.addEventListener('click', () => {
cursor.classList.add("expand");
setTimeout(() => {
cursor.classList.remove("expand");
}, 400)
})
// Scropp up top button
window.addEventListener('scroll', function(){
var scroll = document.querySelector('.scrollTop');
scroll.classList.toggle("active", window.scrollY > 500)
})
function scrollToTop(){
window.scrollTo({
top: 0,
behavior: 'smooth'
})
}
Aucun commentaire:
Enregistrer un commentaire