When the page is loaded the footer does not appear in the correct location. It seems to load at the bottom of the browser(I want it to go past the bottom of the browser to bottom of page if to much content on page) but then when you scroll to see the rest of the content it stays in the same place on the page which is covering content(doesn't stay on bottom of browser). I've set position: absolute; and bottom: 0; but these don't to seem to work as intended.
HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects</title>
<link rel="stylesheet" href="Style/style.css">
</head>
<body>
<header>
<nav class="row">
<a class="mobileNav"></a>
<ul class="col offset-desktop-7 desktop-5 offset-tablet-6 tablet-6 mobile-12">
<li class="col desktop-4 tablet-4">Home</li>
<li class="col desktop-4 tablet-4">Projects</li>
<li class="col desktop-4 tablet-4">Contact</li>
</ul>
</nav>
<section class="col desktop-12 tablet-12 mobile-12">
<h1>Lewis Blundell</h1>
<h2>Junior Web Developer</h2>
<h3>HTML5 | CSS3 | JavaScript | PHP | MYSQL</h3>
</section>
</header>
<section class="wrapper">
<h1 class="col desktop-12 tablet-12 mobile-12">Projects</h1>
<article class="row">
<aside class="col desktop-3">
<img src="Images/placeHolder.png" alt="">
<img src="Images/placeHolder.png" alt="">
<img src="Images/placeHolder.png" alt="">
</aside>
<div class="col desktop-6">
<p>hello</p>
</div>
<aside class="col desktop-3">
<img src="Images/placeHolder.png" alt="">
<img src="Images/placeHolder.png" alt="">
<img src="Images/placeHolder.png" alt="">
</aside>
</article>
</section>
<footer class="row">
<p class="col desktop-12 tablet-12 mobile-12"> Lewis Blundell © 2017</p>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="Script/script.js"></script>
</html>
SASS:
/* --- Variables --- */
$columnAmount : 12; /* This is used to set the amount of columns that will be used for a responsive grid layout */
$green : #3E9633; /* Main green background colour used throughout site */
$white : #FFFFFF;
$grey : #444444;
/* --- General Styling --- */
aside{
img{
width: 75%;
margin-botom: 20px;
}
}
html{
height: 100%;
}
.wrapper{
padding-left: 10px;
padding-right: 10px;
padding-bottom:40px;
}
body{
padding-bottom:50px;
position: relative;
background-color: $grey;
color: $white;
text-align: center;
margin: 0;
h1{
text-align: center;
color: $white;
font-size: 3rem;
text-decoration: underline;
}
}
header{
color: $white;
overflow: hidden;
background-color: $green;
nav{
.mobileNav{
display: block;
width: 100%;
height: 40px;
background: url(../Images/burger.png) no-repeat 98% center;
cursor:pointer;
}
overflow:hidden;
ul{
list-style-type: none;
margin: 0;
padding: 0;
li{
display: inline-block;
padding: 14px 16px;
text-align: center;
font-size: 150%;
&:hover{
background-color: $grey;
}
a{
color: $white;
text-decoration: none;
}
}
}
}
h1{
font-size: 5rem;
text-align: center;
margin-bottom: 0px;
text-decoration: none;
}
h2{
font-size: 3rem;
text-align: center;
margin-top: 0px;
}
h3{
font-size: 2rem;
text-align: center;
}
}
footer{
display: inline-block;
position: absolute;
left:0;
bottom: 0;
width:100%;
height: 50px;
background-color: $green;
}
/* --- Media Queries and General Layout--- */
.row{
clear:both;
width:100%;
}
.col{
display:block;
float:left;
box-sizing: border-box;
max-height:auto;
}
#media screen and (max-width:480px){ /* Styling for mobile viewports */
#for $i from 1 through $columnAmount{
.mobile-#{$i}{
width: 100% / $columnAmount * $i;
}
.offset-mobile-#{$i}{
margin-left: 100% / $columnAmount * $i;
}
}
header{
nav{
ul{
background-color: $grey;
height: 0;
li{
float:none;
text-align: left;
width: 100%;
margin: 0;
a{
padding: 10px;
border-bottom: 1px solid $white;
display: block;
margin: 0;
}
}
}
}
}
header nav ul.open{
height: auto;
}
}
#media screen and (min-width:481px) and (max-width:800px){ /* Styling for tablet viewports */
#for $i from 1 through $columnAmount{
.tablet-#{$i}{
width: 100% / $columnAmount * $i;
}
.offset-tablet-#{$i}{
margin-left: 100% / $columnAmount * $i;
}
}
header nav a.mobileNav{
display:none;
}
}
#media screen and (min-width:801px){ /* Styling for desktop viewports */
#for $i from 1 through $columnAmount{
.desktop-#{$i}{
width: 100% / $columnAmount * $i;
}
.offset-desktop-#{$i}{
margin-left: 100% / $columnAmount * $i;
}
}
header nav a.mobileNav{
display:none;
}
}
Images used in site:
try fixed position
position:fixed;
bottom:0;
if you want to be at bottom of browser page if your content height is less than window browser and if is more it be at the bottom of content you can try this
body{
position: relative;
}
footer{
bottom:0;
}
and use this javascript code for that
$(document).resize(function() {
var bh = $("body").height();
browser_height = window.innerHeight;
if(bh<browser_height)
$("footer").css("position","fixed");
else
$("footer").css("position","absloute");
})
Related
hello I have been working on the web and the image slider displays on top of the nav bar on a small screen the following is my code
HTML code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
section{
position: relative ;
width: 100%;
min-height:100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: rgb(36, 2, 28);
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
header img {
width: 79px;
height: 79px;
border-radius: 50%;
padding: 5px;
}
header{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 90px;
padding: 20px 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: peachpuff;
}
header .logo{
position: relative;
max-width: 80px;
}
.harmbuger{
display:none;
}
header ul{
position: relative;
display: flex;
}
header ul li{
list-style: none;
}
header ul li a{
display: block;
color: #000000;
font-weight: 400;
margin-left: 40px;
text-decoration: none;
border-radius: 50px;
margin: 0 5px;
transition: 0.2s;
padding: 10px 25px;
}
header ul li a:hover{
color: red;
background: white;
}
header ul li a.active{
color: red;
background: white;
}
#media only screen and (max-width: 1320px){
header{
padding: 0 50px;
}
}
#media only screen and (max-width: 1100px){
header{
padding: 0 30px;
}
}
#media only screen and (max-width: 900px){
.harmbuger{
display: block;
cursor: pointer;
}
.harmbuger .line{
width: 30px;
height: 3px;
background: #000000;
margin: 6px 0;
}
.nav-bar.active{
height: 450px;
}
.nav-bar{
height: 0px;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: peachpuff;
transition: 0.5s;
overflow: hidden;
}
.nav-bar ul{
display: block;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul{
opacity: 1;
}
.nav-bar ul li a{
margin-bottom: 12px;
}
}
.container{
width: 100%;
height: 60vh;
background: #222;
display: flex;
align-items: center;
justify-content: center;
}
.swiper{
width: 97%;
height: fit-content;
}
.swiper-slide img{
width: 100%;
height: 55vh;
}
<!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" />
<link rel="stylesheet" href="style2.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css"
/>
<title>Document</title>
</head>
<body>
<section>
<header>
<img src="https://picsum.photos/80/80" />
<div class="harmbuger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<nav class="nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
</nav>
</header>
<div class="container">
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="https://picsum.photos/400/400" /></div>
<div class="swiper-slide"><img src="https://picsum.photos/400/400" /></div>
<div class="swiper-slide"><img src="https://picsum.photos/400/400" /></div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</section>
<script>
harmbuger = document.querySelector(".harmbuger");
harmbuger.onclick = function () {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
};
</script>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper(".swiper", {
autoplay:{
delay: 4000,
disaleOnInteraction: false,
},
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
output
i want the slider not to show up on toggle menu
I was expecting the menu bar to display on top of the slider on toggle. The output image for this can be shown as above
I have made an about page for my class assignment. Everything worked fine until I used the inspect option to see if my webpage is responsive to other devices. It was not responsive, I tried to see what is wrong with the code but I could not find an error in my codes after 5 hrs. Help would be appreciated.
*{
margin: 0;
padding:0;
box-sizing: border-box;
color: white;
background-color: black;
}
.title12{
text-align: center;
font-size: 24px;
margin-top: 100px;
}
.p1{
text-align: center;
font-size: 20px;
margin-top: 200px;
}
h1{
text-align: center;
}
.h2{
margin-top: 400px;
}
.reviews{
margin-top: 400px;
margin-left: 300px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
padding: 16px;
text-align: center;
background-color: black;
}
.re1{
width: 250px;
}
.re3{
width:250px;
height: 350px;
}
.container2{
display: flex;
flex-direction: column;
justify-content: center;
align-items:justify;
text-align: center;
margin: 40px 20px 0 20px;
margin-top: 80px;
}
.container2 .heading{
width: 50%;
padding-bottom: 50px;
}
.container2 .heading h3{
font-size: 3em;
font-weight: bolder;
padding-bottom: 10px;
border-bottom: 3px solid white;
}
.container2 .heading h3 span{
font-weight: 100;
color: #fff;
}
.con2{
margin-top: auto;
margin-top: 900px;
}
.container{
max-width: 1280px;
margin: 2 auto;
display:flex;
align-items: center;
justify-content: space-between;
}
nav{
position:fixed;
top:0;
left:0;
right:0;
z-index: 99;
background-color: black;
padding: 16px 32px;
border-bottom: 3px solid blue ;
}
.menu{
display:flex;
justify-content: flex-end;
margin: 0 -16px;
flex: 1 1 0%;
}
.menu a{
color: white;
margin: 0 16px;
font-weight: 600;
text-decoration: none;
transition: 0.4s;
padding:8px 16px;
border-radius: 90px;
}
.menu a.highlight, .menu a:hover{
background-color:red;
}
a{
font-size: 25px;
text-decoration: none;
}
body {
margin: 0px;
font-weight: 400;
}
video {
width: 50%;
float: left;
margin-bottom: 35px;
}
.normal{
width: 100%;
}
.footer{
padding: 40px 0;
background-color: black;
}
.footer .social{
text-align: center;
padding-bottom: 25px;
color: white;
}
.footer .social a{
font-size: 24px;
color: white;
border: 1px solid white;
width: 40px;
height: 40px;
line-height: 38px;
display: inline-block;
text-align: center;
border-radius: 50%;
margin: 0 8px;
opacity: 0.75;
}
.footer .social a:hover{
opacity: 0.9;
}
.footer ul{
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a{
color: white;
text-decoration: none;
opacity: 0.8;
}
.footer ul li{
display: inline-block;
padding: 0 15px;
}
.footer ul li a:hover{
opacity: 1;
color: red;
}
.footer .copy{
margin-top: 15px;
text-align: center;
font-size: 13px;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="about.css">
<script src="https://kit.fontawesome.com/57160f5774.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="about.css">
<title>About Us</title>
</head>
<body>
<nav>
<div class="container">
<div class="menu">
Home
Products
PC Designs
Support
Build Your PC
</div>
</div>
</nav>
<img style="float: left; height: 750px;" src ="About us/V388-SUPRIM.png">
<div class="title12">
<h1>SUPRIMX</h1>
</div>
<div class="p1">
<p>SUPRIMX is a world leader in gaming, content creation, business & productivity and AIoT solutions. </p>
<p>Bolstered by its cutting-edge R&D capabilities and customer-driven innovation, SUPRIMX has a wide-ranging global presence spanning over 120 countries. Its comprehensive lineup of laptops, graphics cards, monitors, motherboards, desktops, peripherals, and telematics systems are globally acclaimed.</p>
</div>
<div class="reviews">
<div class="container2">
<div class="heading">
<h3>Reviews<span> </span></h3>
</div>
</div>
<div class="row">
<div class="column">
<div class="card">
<h3><img class="re1" src="About us/kayla.jpg"></h3>
<br>
<p>Kayla </p>
<br>
<p>
Amazing website to buy a lot of products!.
</p>
</div>
</div>
<div class="column">
<div class="card">
<br>
<br>
<h3><img class="re2" src="About us/Curtis.jpg"></h3>
<br>
<p>Curtis</p>
<br>
<p>5 stars!!</p>
</div>
</div>
<div class="column">
<div class="card">
<h3><img class="re3" src="About us/Tyler.jpg"></h3>
<br>
<p>Tyler</p>
<br>
<p>Incredible website!</p>
</div>
</div>
</div>
</div>
</div>
<hr>
<section class="footer">
<div class="social">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
<i class="fa fa-pinterest" aria-hidden="true"></i>
</div>
<ul class="list">
<li>
Home
</li>
<li>
About SUPRIMX
</li>
<li>
Forums
</li>
<li>
Products
</li>
<li>
Support
</li>
</ul>
<p class="copy">
SUPRIMX © 2022
</p>
</section>
</body>
</html>
I do not want to use anything except css and html. What can be changed to fix the text from coming outside of the card? My text keeps overflowing outside of my card. I want it all to fit in without compromising the card size as well. I have tried resizing. I am also new to coding. I would accept all and any feedback. If you have links or videos please share those also.
* {
margin:0;
padding: 0;
}
body {
color: #fff;
-webkit-font-smoothing: antialiased;
font-size: 25px;
background-color: #b4b4b4;
}
/* Header Start */
#vanta-canvas {
width: 100vw;
height: 50vh;
}
.inner_header {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
position: relative;
top: 75px;
}
.flex {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: nowrap;
align-content: normal;
}
header p {
color: #b4b4b4;
font-family: cursive;
-webkit-font-smoothing: antialiased;
font-size: 50px;
}
.highlight {
color: blue;
-webkit-font-smoothing: antialiased;
}
button {
background-color: transparent;
border-radius: 45% 3px;
color: #b4b4b4;
padding: 10px 20px;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
margin: 0 auto;
text-align: center;
position: relative;
top: 25px;
-webkit-font-smoothing: antialiased;
transition: all 0.3s;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.3s;
}
button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.3s;
}
button:hover, button:focus{
background-color: grey;
color: blue;
}
button:hover span {
padding-right: 25px;
}
button:hover span:after{
opacity: 1;
right: 0;
}
/* Header End */
/* navigation Start */
nav {
background: blue;
border-bottom: solid 2px;
border-bottom-color: white;
}
nav li {
display: inline-block;
margin-left: 30px;
}
nav a {
text-decoration: none;
color: #fff;
}
/* Navigation End */
/* Section About Start */
section {
box-align: center;
}
section h2 {
text-align: center;
margin-top: 100px;
/* border-bottom: solid 3px; */
color: black;
position: relative;
left: 50%;
transform: translateX(-50%)
}
section h2::after {
content:"";
height: 3px;
width: 70px;
position: absolute;
background: #000000;
margin: auto;
bottom: -5px;
left: 0;
right: 0;
}
section p {
padding: 20px;
text-align: center;
position: relative;
margin: auto;
}
/* Section About End */
/* Section Portfolio Start */
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner{
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backgrace-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-back {
background-color: transparent;
color: white;
transform: rotateY(180deg);
}
/* #media screen and (max-width: 600px){ */
/* .column {
width: 100%;
display: block;
margin-bottom: 20px;
}
} */
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css" >
</head>
<body>
<!-- Header Start -->
<div id="vanta-canvas">
<header>
<h1 class="inner_header" class="flex" id="Home">
<p>
Hello, I'm
<span class="highlight">Brian Mojica.</span>
<br>
I'm a full-stack web developer.
<button class="flex" style="vertical-align:middle"><span>
View My Work
</span></button>
</p>
</h1>
</header>
</div>
</header>
<!--Header End-->
<!-- Navigation Start -->
<nav>
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
PORTFOLIO
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
<li>
RESUME
</li>
</ul>
</nav>
<!--Navigation End-->
<!--Section About-->
<section>
<h2 id="About">ABOUT</h2>
<p>
I'm a full stack developer seeking employment.
I have a passion developing webpages that are responsive, dynamic, and accessbile.
Animations and UI effects are skills I hope to sharpen. I will continually expand my knowledge in different platforms such as Python, JavaScript, and React.
</p>
</section>
<!--Section Portfolio-->
<section>
<h2 id="Portfolio">PORTFOLIO</h2>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="assets/images/run-buddy-card.png" alt="Webpage" style="width:100%" height="100%">
</div>
<div class="flip-card-back">
<h1>Run Buddy</h1>
<p class="highlight"> HTML / CSS</p>
<p>A webpage for Run Buddy. They are a company that matches runners with personal trainers. </p>
<button class="flex" style="vertical-align:middle"><span> View</span></button>
</div>
</div>
</div>
</section>
<!--Section Blog-->
<section>
<h2 id="Blog">BLOG</h2>
<p>Under Construction</p>
</section>
<!--Section Contact-->
<section>
<h2 id="Contact">CONTACT</h2>
</section>
<!--Section Resume-->
<section>
<a id="resume" href="https://drive.google.com/file/d/1uVWXW7AULRBQBeXEblFfHNawPX-pHrJC/view?usp=sharing"></a>
</section>
<!--script for header background Start-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta#latest/dist/vanta.waves.min.js"></script>
<script>
VANTA.WAVES({
el: "#vanta-canvas",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 100.00,
minWidth: 100.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x102
})
</script>
<!--script for header background End-->
</body>
</html>
You can use overflow: hidden or overflow: scroll properties in the .flip-card-back class to either hide the content that isn't fitting or make it scrollable. You should also keep in mind the size of the content, it's too much for the card's dimensions. Styling properly the text inside the card would be the best approach.
I changed your code. Please check. the important point is to use font-size: 6vmin in here for #vanta-canvas. I used that instead of h1. It causes a font-size based on screen size.
Note: https://css-tricks.com/viewport-sized-typography/
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
color: #fff;
-webkit-font-smoothing: antialiased;
font-size: 25px;
background-color: #b4b4b4;
}
/* Header Start */
#vanta-canvas {
width: 100%;
height: 50vh;
display: flex;
align-items: center;
border: solid;
font-weight: bold;
font-size: 6vmin; /* here */
}
.inner_header {
width: 100%;
margin: 0 auto;
text-align: center;
}
.flex {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: nowrap;
align-content: normal;
}
.inner_header p {
color: #b4b4b4;
font-family: cursive;
-webkit-font-smoothing: antialiased;
}
.highlight {
color: blue;
-webkit-font-smoothing: antialiased;
}
button {
background-color: transparent;
border-radius: 45% 3px;
color: #b4b4b4;
padding: 10px 20px;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
margin: 0 auto;
text-align: center;
position: relative;
top: 25px;
-webkit-font-smoothing: antialiased;
transition: all 0.3s;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.3s;
}
button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.3s;
}
button:hover,
button:focus {
background-color: grey;
color: blue;
}
button:hover span {
padding-right: 25px;
}
button:hover span:after {
opacity: 1;
right: 0;
}
/* Header End */
/* navigation Start */
nav {
background: blue;
border-bottom: solid 2px;
border-bottom-color: white;
}
nav li {
display: inline-block;
margin-left: 30px;
}
nav a {
text-decoration: none;
color: #fff;
}
/* Navigation End */
/* Section About Start */
section {
box-align: center;
}
section h2 {
text-align: center;
margin-top: 100px;
/* border-bottom: solid 3px; */
color: black;
position: relative;
left: 50%;
transform: translateX(-50%)
}
section h2::after {
content: "";
height: 3px;
width: 70px;
position: absolute;
background: #000000;
margin: auto;
bottom: -5px;
left: 0;
right: 0;
}
section p {
padding: 20px;
text-align: center;
position: relative;
margin: auto;
}
/* Section About End */
/* Section Portfolio Start */
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backgrace-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-back {
background-color: transparent;
color: white;
transform: rotateY(180deg);
}
/* #media screen and (max-width: 600px){ */
/* .column {
width: 100%;
display: block;
margin-bottom: 20px;
}
} */
<!-- Header Start -->
<div id="vanta-canvas">
<div class="inner_header" class="flex" id="Home">
<p>
Hello, I'm
<span class="highlight">Brian Mojica.</span>
<br> I'm a full-stack web developer.
<button class="flex" style="vertical-align:middle"><span>
View My Work
</span></button>
</p>
</div>
</div>
</header>
<!--Header End-->
<!-- Navigation Start -->
<nav>
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
PORTFOLIO
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
<li>
RESUME
</li>
</ul>
</nav>
<!--Navigation End-->
<!--Section About-->
<section>
<h2 id="About">ABOUT</h2>
<p>
I'm a full stack developer seeking employment. I have a passion developing webpages that are responsive, dynamic, and accessbile. Animations and UI effects are skills I hope to sharpen. I will continually expand my knowledge in different platforms such
as Python, JavaScript, and React.
</p>
</section>
<!--Section Portfolio-->
<section>
<h2 id="Portfolio">PORTFOLIO</h2>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="assets/images/run-buddy-card.png" alt="Webpage" style="width:100%" height="100%">
</div>
<div class="flip-card-back">
<h1>Run Buddy</h1>
<p class="highlight"> HTML / CSS</p>
<p>A webpage for Run Buddy. They are a company that matches runners with personal trainers. </p>
<button class="flex" style="vertical-align:middle"><span> View</span></button>
</div>
</div>
</div>
</section>
<!--Section Blog-->
<section>
<h2 id="Blog">BLOG</h2>
<p>Under Construction</p>
</section>
<!--Section Contact-->
<section>
<h2 id="Contact">CONTACT</h2>
</section>
<!--Section Resume-->
<section>
<a id="resume" href="https://drive.google.com/file/d/1uVWXW7AULRBQBeXEblFfHNawPX-pHrJC/view?usp=sharing"></a>
</section>
<!--script for header background Start-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta#latest/dist/vanta.waves.min.js"></script>
<script>
VANTA.WAVES({
el: "#vanta-canvas",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 100.00,
minWidth: 100.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x102
})
</script>
<!--script for header background End-->
On larger screen size:
On smaller screen size:
I'm pretty much stuck on a site that I'm trying to build in the responsiveness part
And in the position of the text.
The img background -
What I try to do it to make the img background full cover in big screens
and on the small screen, I want that they will see the ball in the img - it only works for me for big screens.
Next to this, I want to put H1 and p, but I want it will be near the ball in the background img
My code:
/* hamburger */
const hamburger = document.querySelector("#hamburger");
const navUL = document.querySelector("#nav-ul");
hamburger.addEventListener('click', () =>{
navUL.classList.toggle('show');
});
html,body{
padding: 0;
margin: 0;
font-family: 'Rubik', sans-serif;
}
*{
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #fff;
}
.container{
max-width: 1100px;
margin: 0 auto;
}
.btn{
background-color: #222f3e;
color: white;
padding: 6px 10px;
border-radius: 20px;
cursor: pointer;
}
.btn:hover{
color: #2e86de;
background-color: #fff;
}
/* Header */
header {
background-image: url(./img/main-img.jpg) ;
background-repeat: no-repeat;
background-position: bottom center ;
background-size: cover;
}
/* Navbar */
#navbar{
padding: 10px;
}
#navbar .container{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.hamburger{
display: none;
background: transparent;
border: 0;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.hamburger:focus{
outline: none;
}
#navbar ul{
padding-right: 0;
}
#navbar ul li {
display: inline-block;
font-size: 18px;
}
.logo a{
padding: 20px;
color: #fff;
}
/* Showcase Section */
#showcase{
min-height: 700px;
}
#showcase .container{
}
#media screen and (max-width: 767px){
#nav-ul{
display: none;
width: 100%;
}
#nav-ul.show{
display: flex;
justify-content: center;
}
.hamburger{
display: block;
}
}
<!DOCTYPE html>
<html dir="rtl" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght#0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./mystyle.css">
<title>Football</title>
</head>
<body>
<header>
<nav id="navbar">
<div dir="ltr" class="container">
<h1 class="logo">
Natan Football
</h1>
<button class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</button>
<ul id="nav-ul">
<li><a class="btn"href="#">צור קשר</a></li>
<li><a class="btn"href="#">מה מציעים</a></li>
<li><a class="btn"href="#">קצת עלינו</a></li>
<li><a class="btn" href="./index.html">דף הבית</a> </li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container grid">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</section>
</header>
<script src="./app.js"></script>
</body>
</html>
here i have provided a very basic code cause i don't have your full code.
I just added few css properties for you needs. If you run this code on big screen the .text will be top and center of the page. and you go in small screen text will be near the ball as you asked. You can even use px for height. It's just an example to show you.
body {
background: url("https://i.stack.imgur.com/08nIZ.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: relative;
}
.text {
position: absolute;
color: white;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
#media screen and (max-width: 767px) {
body {
height: 40vh;
}
.text {
top: 50%;
}
}
<div class="wrapper">
<div class="text">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</div>
Let me know if it doesn't work for you.
I have the following page (see code snippet below). I would like to position each of the items, so that when it is a full web page, the elements are i their desired positions, but as soon as it is viewed on narrow aspect ratio (e.g. mobile phone), then the items need to fold under each other.
I can get a full web page working, using position: absolute;. I can position the items where I want. But the problem is then on a mobile devise, the items overlap each other. So I figure I need to use position: relative;.
position: relative; allows the items to fold beneath each other on a narrow browser. However, I cannot seem to position the items where I want.
In the below example, I would like to position the items as follows:
logo
title
text screen-print-one
google apple web screen-print-two
Terms of Service some#email.com
body {
font-family: "proxima-nova" ,"Helvetica", sans-serif;
}
/* logo */
.wz-logo {
text-align: center;
padding: 20px 20px 0px 20px;
}
/* title */
.wz-title {
font-size: 120%;
color: #B2D137;
text-align: center;
padding: 0 20px 40px 30px;
}
/* text */
.text-description {
padding-left: 10%;
padding-bottom: 20px;
padding-top: 20px;
width: 500px;
}
/* screen-prints */
.screen-prints {
position: relative;
float: right;
padding-right: 10%;
}
.screen-print1 {
position: relative;
top: 100px;
left: 0;
z-index: 2;
}
.screen-print2 {
position: relative;
top: -430px;
left: -120px;
z-index: 1;
}
/* store */
.store-container {
display: flex;
justify-content: left;
align-items: center;
padding-left: 10%;
}
.store-container .apple, .img-container .google, .img-container .web {
padding: 10px;
padding-left: 20px;
}
.store-container .google {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 10px;
}
.store-container .apple {
padding-top: 8px;
padding-left: 0px;
padding-right: 0px;
}
.store-container .web {
padding-top: 15px;
}
/* footer */
footer .terms, footer .contact {
display:inline-block;
padding-bottom: 30px;
padding-right: 10px;
padding-left: 10px;
}
footer .contact {
padding-right: 40px !important;
}
footer a {
color: white;
text-decoration: none;
font-size: 14px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
footer {
position:absolute;
bottom:0;
right: 0;
}
<body class="background-image">
<div class="wz-logo">
logo
</div>
<div class="wz-title">
title
</div>
<div class="text-description">
text
</div>
<div class="screen-prints">
<div class="screen-print1">screen-print-one
</div>
<div class="screen-print2">screen-print-two
</div>
</div>
<div class="store-container">
<div class="google">
google
</div>
<div class="apple">
apple
</div>
<div class="web">
web
</div>
</div>
<footer>
<div class="terms">
Terms of Service
</div>
<div class="contact">
some#email.com
</div>
</footer>
</body>
If anyone can assist with how I can position the items, I would appreciate the help. (As you can see my main problem is trying to position the screen-print-one & screen-print-two).
Thanks
hmm there are a bunch of problems with your html logic. too many divs and not wrapped logically . but i made what i could with it
see below. or jsFiddle
.wz-logo,.wz-title {
width:100%;
float:left;
text-align:center;
}
.left_text {
float:left;width:50%;
}
.left_text .store-container div{
display:inline
}
.screen-prints {
float:right;
width:50%;
text-align:right;
}
footer {
float:left;
width:100%;
text-align:right
}
footer div {
display:inline
}
#media only screen and (max-width: 460px) {
.left_text,.screen-prints,footer {
width:100%;
text-align:center;
}
}
<body class="background-image">
<div class="wz-logo">
logo
</div>
<div class="wz-title">
title
</div>
<div class="left_text">
<div class="text-description">
text
</div>
<div class="store-container">
<div class="google">
google
</div>
<div class="apple">
apple
</div>
<div class="web">
web
</div>
</div>
</div>
<div class="screen-prints">
<div class="screen-print1">screen-print-one
</div>
<div class="screen-print2">screen-print-two
</div>
</div>
<footer>
<div class="terms">
Terms of Service
</div>
<div class="contact">
some#email.com
</div>
</footer>
</body>
i suggest you use bootstrap for responsiveness . it's much easier to use