So I'm relatively new to coding and have been working on a project. At its current state I'm finding difficulty combining off-screen navigation with parallax scrolling. I have tried making a div inside the wrapper (ineffective), changing the location of where the parallax scrolling is in the HTML (makes one feature work, or the other), and changing the css positioning (generally just makes the page melt, with a few outliers)
The goal, ultimately, is to have the parallax scrolling run underneath the navigation square and the side menu move the background as well.
The code is below, with placeholder pictures and info some dashed out modifications of things I've tried and failed. Like I said, I'm quite new so if there is anything amiss I would deeply appreciate the help.
I'm guessing I'm overlooking something moronic, or am trying the wrong combination of solutions.
Thank you for any assistance.
HTML:
<head>
<meta charset="utf-8"/>
<title>What is Reality?</title>
<link rel="stylesheet" href="websitebasefinal.css"/>
<link rel="stylesheet" href="tennants.css"/>
<script language="javascript" src="websitefinal.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu">
<script src="jquery-3.3.1.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<div id="side-menu" class="side-menu">
Home
hai
mark
!
<br>
<br>
Contact Us
</div>
<div id="search-menu" class="search-menu">
<p>What are you <br>looking for?<br>
<input type="text" placeholder="...?">
</div>
<div id="wrapper">
<div id="insidewrapper">
<div id="container-one">
<div id="container-menu" onclick="openmenuside()">
<i class="fas fa-align-left fa-lg" id="menubutton" style="color:#f1f1f1"></i>
<script>
$('#container-menu').click(function(){
$('#menubutton').toggleClass('fas fa-align-left fa-lg fas fa-times fa-lg')
});
</script>
</div>
<div id="container-search" onclick="opensearchside()">
<i class="fas fa-search fa-lg" id="searchbutton" style="color:#f1f1f1"></i>
<script>
$('#container-search').click(function(){
$('#searchbutton').toggleClass('fas fa-search fa-lg fas fa-times fa-lg')
});
</script>
</div>
</div>
<div id="tenantcontainer">
<div class="bgimage1">
<div class="caption">
<span class="border">Scroll down</span>
<div class="content"><p>Here's where we talk about what's what daddy-o</div>
</div>
</div>
<div class="bgimage2">
<div class="caption">
<span class="border">Scroll down</span>
<div class="content"><p>Here's where we talk about what's what daddy-o</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
.bgimage1, .bgimage2, .bgimage3{
position:relative;
/*background-attachment:fixed;*/
background-position:center;
/*background-repeat:no-repeat;*/
background-size:cover;
z-index:0;
top:0;
left:0;
}
.bgimage1{
background-image:url("evelynnteaser-1920X1080.jpg");
height:100%;
}
.bgimage2{
background-image:url("2017-eclipse-photos-01.jpg");
height:100%;
}
.bgimage3{
background-image:url("evelynnteaser-1920X1080.jpg");
height:100%;
}
.caption {
position: absolute;
left: 0;
top: 25%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
.content, .content p{
position: absolute;
margin-top:70px;
color:white;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color:#f1f1f1;
}
JS:
function openmenuside(){
var side=document.getElementById("side-menu");
var container=document.getElementById("wrapper");
if (side.style.width=='320px'){
side.style.width="0px";
container.style.marginLeft="-620px";
}else{
side.style.width="320px";
container.style.marginLeft="-340px";
}
}
function opensearchside(){
var side=document.getElementById("search-menu");
var container=document.getElementById("wrapper");
if (side.style.width=='320px'){
side.style.width="0px";
container.style.marginLeft="-620px";
}else{
side.style.width="320px";
container.style.marginLeft="-900px";
}
}
Related
im making my profile websites want make scroll transition like here https://olaolu.dev,how can I do that?There will be 5 pages, and transition between them should be like in link above, also it should relater to buttons as well, when I press button it should have this scroll effect too
my html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/b/cs.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<section class="section-top active">
<div class="details">
<div class="top">
<h2>Faxraddin</h2>
<div class="lists">
<button><i class="bi bi-list-check"></i></button>
</div>
</div>
<div class="first-info">
<div class="first-sec">
<h1>Frontend</br> Developer.</h1>
<h3 class="profession-info">I like to craft solid and scalable frontend products with great user experiences.</h3>
</div>
<img class="my-img" src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
</div>
<div class="some-info">
<div class="a1">
<span>Highly skilled at progressive
enhancement, design systems &
UI Engineering.
</span>
<span>Over a decade of experience
building products for clients
across several countries.
</span>
</div>
<div class="btn-container">
<ul>
<button class="btn active"><i class="bi bi-app"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
</ul>
</div>
</div>
</div>
</section>
<section class="what-do" id="s2">
</section>
<script src="/b/js.js"></script>
</body>
</html>
HTML + CSS can be achieved, but the scrolling effect is slow
body {
margin: 0;
height: 100vh;
overflow-x: hidden;
}
.wrap {
scroll-behavior: smooth;
overflow-x: hidden;
height: 100%;
scroll-snap-type: y mandatory;
}
.section {
color: #fff;
font-size: 30px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
.section1 {
background-color: #111;
}
.section2 {
background-color: #333;
}
.section3 {
background-color: #555;
}
.section4 {
background-color: #777;
}
.section5 {
background-color: #999;
}
.point {
position: absolute;
bottom: 30px;
right: 30px;
display: flex;
flex-direction: column;
}
.point a {
display: block;
width: 8px;
height: 8px;
margin: 8px 0;
background-color: #fff;
}
<div class="wrap">
<section id="s1" class="section section1">page 1</section>
<section id="s2" class="section section2">page 2</section>
<section id="s3" class="section section3">page 3</section>
<section id="s4" class="section section4">page 4</section>
<section id="s5" class="section section5">page 5</section>
<div class="point">
</div>
</div>
I want to display a button in my project and I have created a button.css file that stores all the CSS for creating the button. Initially, I used the whole code from a different source but have managed to copy and paste the css code into the button.css file except the HTML code. I am having issues with the html code and don't know where to paste it in my index.html file. I tried working with it but it would produce a totally different output with just a simple and plain box that says "Check Out My Blogs!"
The HTML Code I want To Paste In My index.html file:
<head>
<link type="text/css" rel="stylesheet" href="css/button.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<div id="container">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">Check Out My Blogs!</span>
</button>
</div>
My Main index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title >Hussain Omer</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-180664536-1">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-180664536-1');
</script>
</head>
<body>
<!-- ======= Mobile nav toggle button ======= -->
<!-- ======= Header ======= -->
<header id="header" class="d-flex flex-column justify-content-center">
<nav class="nav-menu">
<ul>
<li class="active"><i class="bx bx-home"></i> <span>Home</span></li>
<li><i class="bx bx-user"></i> <span>About Me</span></li>
<li><i class="bx bx-file-blank"></i> <span>Resume</span></li>
<li><i class="bx bx-book-content"></i> <span>Projects</span></li>
<li><i class="bx bx-server"></i> <span>Blogs</span></li>
<li><i class="bx bx-server"></i> <span>Skills</span></li>
<li><i class="bx bx-envelope"></i> <span>Contact</span></li>
</ul>
</nav><!-- .nav-menu -->
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex flex-column justify-content-center">
<div class="container" data-aos="zoom-in" data-aos-delay="100">
<h1>Hussain Omer</h1>
<p>I'm a <span class="typed" data-typed-items="Coder, Leader, Team-Player, Blog Writer, Adventurer"></span></p>
<div class="social-links">
<!--<i class="bx bxl-twitter"></i>
<i class="bx bxl-facebook"></i>-->
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/kaustubh-prabhakar/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/SantaKaus" class="github"><i class="bx bxl-github"></i></a>
<a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/h.s.z_11/" class="instagram"><i class="bx bxl-instagram"></i></a>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="about portfolio services">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>My Story</h2>
</div>
<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid">
<div class="portfolio-info">
<h4>Lahore, Pakistan (2003-2010)</h4>
<p>I was born in Lahore, the second largest city of Pakistan. This is where I did most of my education and developed many memories. I enjoyed the very bit of the city; from the diverse culture and to the beautiful greenary. I haven't visited Pakistan in over 5 years, and I hope to go back some day 😀
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid">
<div class="portfolio-info">
<h4>Helsinki, Finland (2007-2010)</h4>
<p>From a very unique and enjoyable Finnish school syst
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid">
<div class="portfolio-info">
<h4>Helsinki, Finland (2007-2010)</h4>
<p>From a very unique and enjoyable Finnish school syst
</div>
</div>
</div>
</div>
</div>
<div class="section-title">
<h2>About ME</h2>
<p>I am a 17 year old with a enthusiastic drive to working with technology, and using my prowess in Computers to make a positive impact on this world. </p>
</div>
<img src="https://mail.google.com/mail/u/1?ui=2&ik=79098a413c&attid=0.1&permmsgid=msg-f:1687893372595235455&th=176c9a145c466a7f&view=att&disp=safe&realattid=176c9a0f10e523984941" align="left" width="370" height="500">
<!-- <div style="display:inline-block;"> to put text under something or start new -->
<div class="aligned">
<div class="p">
<p>Motivated by my love for numbers, I started to explore the many ways I can use my Mathematical knowledge and implement it into different areas. I was introduced to Computer Science in my junior years of high school, and I came to know that I was genuinely passionated about learning it. It offers a holistic approach to solve problems which I admire, and since then, I have transformed my interest into a personal hobby!</p>
<p>I would always like to challenge myself and learn new programming langauges to increase the size of my toolbox. I was inspired by one of my friends to take my programming skills and put it into a good use; thus, I was introduced to competitive programming and large coding events such as hackathons!</p>
<p>The intellectual challenges, creativity, and logic programming offers has always further strengthened the inevitable bond between us.</p>
<p>Challenging myself allows me to not only grow outside my comfort zone, but gives a new perspective towards life, and how there is no limitations/boundaries that halt you from growing! It is everlasting. Once you develop the growth mindset, your journey just never comes to a complete stop! You keep on growing outside your comfort zone, and being able to easily push through any obstacles.</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
</section><!-- End About Section -->
<!-- ======= Facts Section ======= -->
<section id="facts" class="facts">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>What I am upto 😃</h2>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
<h4 class="title">7CUPS.com</h4>
<p class="description">I am currently on the pursuit to make a positive impact on the world. To do this, I started volunteering with 7Cups as a trained listener to support people having emotional distress by interacting with them and resolving any concerns they might have. Especially in these unprecendented times (a.k.a when COVID hit), it is important to guide and support the ones that require additional assistance</p>
</div>
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
<h4 class="title">School Clubs</h4>
<p class="description">Being part of school clubs is personally my favourite thing:) Interacting with people, coming up with ideas and implementing it with various activities is a fun on its own! I am currently an active member of over 5 clubs and hold a Vice-President position at my school's STEM Club. I am also the Technical Team Member for our school's Student Tech Hub</p>
</div>
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
<h4 class="title">Blog Writing</h4>
<p class="description">This is my new favourite thing to do when I am bored:) You may wonder what kind of blogs I write and specifically about what genre I write about. The answer is everything! I write about what is on my mind, and what I learn from my experiences. Basically self-reflections. I also tend to give general advices to people through my blogs!</p>
</div>
</div>
</div>
</div>
</section><!-- End Facts Section -->
</body>
</html>
The html code may look very long but I want the button to be displayed after "This is my new favourite thing to do when I am bored........" which is near the very bottom
So where should the HTML code go for it to display the button right after the line I said above? I tried putting the code after the line but it wouldnt work for some reason. Could you guys please help?
Here is the Button.css file which has the css for my button:
#import url("https://fonts.googleapis.com/css?family=Mukta:700");
* {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
body {
font-family: "Mukta", sans-serif;
font-size: 1rem;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
background: #f3f8fa;
}
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
}
button.learn-more {
width: 12rem;
height: auto;
}
button.learn-more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
right: 25px;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #282936;
border-radius: 1.625rem;
}
button.learn-more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
button.learn-more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
button.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
button.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #282936;
font-weight: 700;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
button:hover .circle {
width: 125%;
}
button:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
button:hover .button-text {
color: #fff;
}
#supports (display: grid) {
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0.625rem;
grid-template-areas: ". main main ." ". main main .";
}
#yes {
grid-area: main;
align-self: center;
justify-self: center;
}
}
Let me start from scratch. I am developing a website which has two components text area : not an input text area, its a well, where text will appear whenever a button is clicked. The second component is a button, which when clicked a random quote should appear in the well. This button when clicked calls the API which is deployed on an external server, where the Access-Control is not set to public. This API fetches data from a data base which has many quotes and their Authors. in JSON format.
Now, to bypass this Access-Control, I have used JSON Padding `JSONP.
But the objective here is that whenever the API is invoked using the jQuery i.e., whenever the button is clicked, the query must fetch a random quote by firing the API. And also, the quote must keep changing to a new quote whenever the button is clicked.
This is my code:
$(document).ready(function() {
$("#click").each(function(index){
$(this).on("click", function() {
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
$("#quote span").replaceWith(key[0].content + "<p>— " + key[0].title + "</p>");
});
});
});
});
});
<style>
.position-message{
margin-left: 25%;
margin-right:25%;
margin-top:10%;
margin-bottom:20%;
}
.background{
background-color: rgb(170,180,200);
border-radius:10%;
}
.button-shape{
border-radius: 50%;
width: 50px;
height: 50px;
margin: auto;
}
#page{
margin-left: 5%;
margin-right: 5%;
margin-top:2%;
margin-bottom:2%;
}
#page-background{
background-color: maroon;
}
#click{
margin-bottom: 20px;
}
.quote-shape{
border-radius: 10%;
}
</style>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<Title>Click to get quotes</Title>
<body id="page-background">
<div class="background" id="page">
<div class="container-fluid">
<div class="col">
<div class="row-xs-6">
<div id="quote" class="well position-message quote-shape"><span></span>
</div>
</div>
<div class="row-xs-6">
<div class="row text-center">
<button type="button" id="click" class="button-shape"><i class="fa fa-refresh fa-2x"></i>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
This is a snapshot of my page:
The first call was working. But when I try firing the API again by clicking the button, the quote is not changing. This is the problem I am facing. Please let me know how to make the quote change whenever the API is fired.
Don't use replaceWith() as it will replace the element you're trying to match preventing future operations ($('#quote span') will not match, because the span has been replaced from the first operation). Try simply .html() to preserve the span as I've done below (Also, I've applied some simplification from the comment section above):
$(document).ready(function() {
$("#click").click(function() {
$.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
$("#quote span").html(key[0].content + "<p>— " + key[0].title + "</p>");
});
});
});
.position-message{
margin-left: 25%;
margin-right:25%;
margin-top:10%;
margin-bottom:20%;
}
.background{
background-color: rgb(170,180,200);
border-radius:10%;
}
.button-shape{
border-radius: 50%;
width: 50px;
height: 50px;
margin: auto;
}
.quote-shape{
border-radius: 10%;
}
#page{
margin-left: 5%;
margin-right: 5%;
margin-top:2%;
margin-bottom:2%;
}
#page-background{
background-color: maroon;
}
#click{
margin-bottom: 20px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<Title>Click to get quotes</Title>
</head>
<body id="page-background">
<div class="background" id="page">
<div class="container-fluid">
<div class="col">
<div class="row-xs-6">
<div id="quote" class="well position-message quote-shape"><span></span>
</div>
</div>
<div class="row-xs-6">
<div class="row text-center">
<button type="button" id="click" class="button-shape"><i class="fa fa-refresh fa-2x"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
My "home" button goes up into the div as I condense the page. What is the best way to stabilize the button so that it will stay in center of the div as the page is condensed? I've tried many different things and so far nothing has worked so I'm hoping someone on this site could help me answer this problem. I've tried many different things without success.
JS/CSS/HTML
$(document).ready(function () {
//mouseenter overlay
$('ul#gallery li').on('mouseenter', function () {
// Get data attribute values
var title = $(this).children().data('title');
var desc = $(this).children().data('desc');
//validation
if (desc == null) {
desc = 'Click To Enlarge';
}
if (title == null) {
title = '';
}
//Create overlay div
$(this).append('<div class="overlay"></div>');
//Get the overlay div
var overlay = $(this).children('.overlay');
// Add html to overlay
overlay.html('<h3>' + title + '</h3><p>' + desc + '</p>');
// Fade in overlay
overlay.fadeIn(400);
});
$('ul#gallery li').on('mouseleave', function () {
//Create overlay div
$(this).append('<div class="overlay"></div>');
//Get the overlay div
var overlay = $(this).children('.overlay');
//Fade out overlay
overlay.fadeOut(200);
});
});
body{
background-color: white;
font-family:Orbitron;
color:white;
width:100%
}
.fa-stack-overflow{
color: #f48024
}
.fa-github{
color:rgb(102,43,129);
}
.fa-linkedin{
color:rgb(0,127,178);
}
.fa-facebook-official{
color:rgb(59, 89, 153);
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
color:white;
}
.block{
background-color: #337ab7;
opacity: .7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: white;
color:#337ab7;
background-repeat:no-repeat;
background-size: cover;
height: 400px;
padding-top: 5%;
border-bottom:#00bfff 3px solid;
border-top:#00bfff 3px solid;
background-attachment: fixed;
}
.boxed{
font-size: 1.7em;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-bottom: 100px;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 800px;
padding-top:6%;
background-attachment: fixed;
}
.button{
background-size: contain;
}
.container{
width:80%;
margin:auto;
overflow:auto;
}
section{
padding:20px 0;
overflow:hidden;
padding-bottom: 5%;
margin-top: 2.5%;
}
#gallery{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#gallery li{
display: block;
float: left;
width: 23%;
cursor: pointer;
border: 5px;
box-sizing: border-box;
margin: 0 12px 7px 0;
position: relative;
}
#gallery img{
width:100%;
border-radius:5%
}
.overlay{
display:none;
background:#337ab7 url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) no-repeat top center;
color:#fff;
position:absolute;
top:0;
z-index:100;
width:100%;
height:100%;
padding:20px;
border-radius:5%;
box-sizing: border-box;
pointer-events: none;
opacity: .7;
}
.overlay h3{
margin: 0;
padding: 0;
}
.pageThreeFooter{
background: black;
color:#337ab7;
background-repeat: none;
background-size: cover;
height: 150px;
padding-top: 2.5%;
background-attachment: fixed;
}
.pageFour{
background: white;
color:#337ab7;
background-repeat: none;
background-size: cover;
height: 300px;
padding-top: 2.5%;
}
.black{
color:black;
}
<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
<div class="block text-center" id="p1">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Web Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow" aria-hidden="true"></i>Stack Overflow</a>
<a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github" aria-hidden="true"></i>GitHub</a>
<a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin</a>
<a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official" aria-hidden="true"></i>Facebook</a>
</div>
</div>
<div class= "pageTwo text-center" id="p2">
<h2>Daniel Collins</h2>
<div class="boxed">
<p class="black">
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (MySQL, PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
<div class= "pageThree" id="p3">
<header>
<div class="block text-center">
<h1 class = "logo">Portfolio</h1>
</div>
</header>
<section>
<div class="container">
<h1 id="heading">Projects</h1>
<ul id="gallery">
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
</ul>
</div>
</div>
</section>
<div class="pageThreeFooter text-center">
<div class="row">
Home
</div>
</div>
<div class= "pageFour text-center" id="p4">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Let's Get In Touch!</h2>
<hr class="primary">
<p class="black">Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<i class="fa fa-phone fa-3x sr-contact"></i>
<p class="black">555-5555</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x sr-contact"></i>
<p class="black"><a class="black" href="mailto:casteyestothesun#gmail.com">myemail.com</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
You are missing the important responsive meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
But you are using Bootstrap, which is a responsive framework. So, the answer to your question is to study and understand Bootstrap, along with more general studying of what it means for a site to be responsive.
There is a lot more to making a website responsive than just changing one or two things. You really need to plan on how each element or container of those elements is going to be responsive in their own right. Also, how your wrap or container of all content will behave as well as how your images, text/font, etc... will also be responsive.
This is too broad a question to be answered simply.
Since you are already using bootstrap, I would research how to utilize this to it's full potential and you can easily make your website responsive.
As you guessed, media queries are a good way to do this.
You'll need to add this tag in your header for these to work:
<meta name="viewport" content="width=device-width, initial-scale=1">
There are two ways you can go about setting your breakpoints - by min width or max width.
Since you've already written most of the styles, min-width probably makes more sense. If you have multiple breakpoints you can combine min-width and max-width into a single query to avoid conflicts with other media queries.
As for the home button, I recommend looking up how to vertically center an element. This guide is pretty handy: https://css-tricks.com/centering-css-complete-guide/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
Here's the mobile website of it, and please try it on mobile phones as it looks all right on desktop and tablets. For CSS, I tried putting 100% width for body first, but doesn't seem to help. Then I made the HTML's width 100%, still doesn't work.
I'm stumped and getting more confused. Please help!
And here's my HTML:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="icon" href="../../favicon.ico">
<title>Việt Nam Care</title>
<!-- Google Fonts Arvo and Font Awesome -->
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
<!-- Normalize -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar-collapse" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"
><img src="img/vietnamcare3.png" alt="Viet Nam Care"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">WHO WE ARE</li>
<li>GET INVOLVED</li>
<li>CONTACT US</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1>Doing anything necessary to Preserve<br>Việt Nam's Future</h1>
<!-- <p>This initiative is conducted to help create a more sustainable and enriching lifestyle among Vietnamese families and--most importantly--the children. </p> -->
<p><a class="btn btn-danger btn-lg" href="#" role="button">Learn More »</a></p>
</div>
</div>
<div id="who">
<div class="container homepage">
<h2>Who we Are</h2>
<hr>
<p>We are Việt Nam Care. We exist to help create a more sustainable life among Vietnamese children. </p>
</div>
</div>
<div id="get-involved">
<div class="container homepage">
<h2>Get Involved</h2>
<hr>
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<span class="fa-stack fa-4x"> <!-- Money Icon -->
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-money fa-stack-1x fa-inverse"></i>
</span>
<h3>Donations</h3>
<p>Want to contribute and make a difference? Donations--money, food, clothes, and school supplies--to disadvantaged children and families are most appreciated! </p>
<p><a class="btn btn-default" href="#" role="button">Donate now »</a></p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x"> <!-- Building Icon -->
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-building fa-stack-1x fa-inverse"></i>
</span>
<h3>Projects</h3>
<p>Volunteer in meaningful projects that ranges from helping build small infrastructures for local communities to teaching English to disadvantaged childlren. </p>
<p><a class="btn btn-default" href="#" role="button">Volunteer now »</a></p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x"> <!-- users Icon -->
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-users fa-stack-1x fa-inverse"></i>
</span>
<h3>Sponsors</h3>
<p>Give a child the opportunity to have a better life through sponsorship. Readily available resources made for the child will help shape their futures!</p>
<p><a class="btn btn-default" href="#" role="button">Help now »</a></p>
</div>
</div>
</div> <!-- /container -->
</div>
<footer>
<div class="container">
<p><img src="img/vietnamcare5.png" alt="vietnamcare_logo"></p>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
And here's my CSS:
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
width: auto;
height: 80%;
}
/* Top Left Viet Nam Care Word */
/* a.navbar-brand img {
margin: 0px;
padding: 0px;
position: relative;
top: -30px;
left: -10px;
} */
/* Vietnamese Children Jumbotron Image */
nav div div a img {
position: relative;
display: inline-block;
top: -10px;
width: 90%;
}
ul.nav, .jumbotron h1 {
font-family: 'Arvo', courier, serif;
}
ul.nav {
font-size: 13px;
}
footer {
background-color: #f74c3c;
padding-top: 150px;
padding-bottom: 30px;
}
#get-involved {
background-color: #f5f5f5;
}
.jumbotron {
text-align: center;
margin-bottom: 0;
background-image:url("../img/vietkids.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: fixed;
color: white;
height: 98%;
}
.jumbotron h1 {
margin-top: 0;
margin-bottom: 50px;
}
.jumbotron p {
margin-bottom: 30px;
font-weight: 100;
padding: 0px 50px;
}
.jumbotron img {
margin: 0;
padding: 0;
height: 200px;
width: 120px;
}
/* .jumbo_paragraph {
color: red;
border: 1px solid green;
width: 90%;
margin: 0 auto;
} */
.btn-lg {
font-size: 2.25empx;
}
nav img {
position: relative;
bottom: 10px;
left: 10px;
}
.homepage {
text-align: center;
padding: 30px 0px;
}
.homepage h2, .homepage h3 {
color: #e74c3c;
font-family: 'Arvo', courier, serif;
text-transform: uppercase;
}
.homepage h2 {
font-size: 30px;
}
.homepage h3 {
font-size: 26px;
}
.homepage p {
font-size: 19px;
}
.homepage a {
color: #e74c3c;
}
.homepage a:hover {
color: #e74c3c;
text-decoration: none;
opacity: 0.8;
}
/* All Horizontal Lines in class Homepage */
.homepage hr {
border-top: 1px solid #e74c3c;
width: 160px;
margin-top: 15px;
}
/* Responsive Styling */
#media (max-width: 1199px) {
.jumbotron h1 {
font-size: 56px;
margin-bottom: 30px;
}
}
#media (max-width: 991px) {
.jumbotron h1 {
font-size: 44px;
}
.jumbotron p {
padding: 0 10px;
}
#get-involved .col-md-4 {
padding-top: 20px;
padding-bottom: 20px;
}
}
#media (max-width: 767px) {
.jumbotron h1 {
font-size: 24px;
}
.jumbotron p {
font-size: 16px;
padding: 0;
}
.btn-lg {
font-size: 18px;
}
.homepage p {
font-size: 18px;
}
footer img {
width: 80%;
}
}
Update
I believe I found the problem. Follow theses steps:
Comment out or remove the following tags located in the <head>:
<!-- Google Fonts Arvo and Font Awesome -->
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
<!-- Normalize -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
Add this to the <head>:
<!-- Normalize, Bootstrap, and Font Awesome core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/g/normalize#3.0.3,bootstrap#3.3.6(css/bootstrap.min.css),fontawesome#4.5.0">
<!-- Google Fonts Arvo -->
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
Remove width: auto; from this ruleset:
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
/*width: auto;<==[Remove this]*/
height: 80%;
}
Clear browser cache and refresh.
When using normalize.css or reset.css place the <link> tag before any other <link> tag. The first new <link> combines Normalize, Bootstrap, and Font Awesome CSS files as one file served by jsDelivr CDN. This will cut down your HTTP requests by 2 which will decrease your overall latency (page will load faster.)
width: auto is a property that has a higher priority than min-width: 100vw; because it's farther down the CSS file. Although width and min-width are different properties, they both affect the the vertical length of the body.
Try vw
1vw = 1/100 of the current viewport width, i.e. 1% of the width
html, body {
min-width: 100vw;
}
BTW, you'll probably want to pick px or em not both of them:
.btn-lg {
font-size: 2.25empx;
} ^---^======[ px or em, not both]
Add the following as the last line of your CSS:
div { max-width: 100%; }
Likely you have a div somewhere that is defined as 100% width, plus additional padding, so some element on the page has a width greater than 100% causing the gap on the right side. This CSS will override that.
I removed the divs on your page one at a time - if you remove all but the footer div, the gap disappears. So the issue can be found somewhere in one of the elements before the footer div on the page.
Edit: If you're not already, it can be helpful to use a simulator (like Xcode's simulator) with your browser inspector to help debug this issue on mobile.
I ran this in the browser inspector to see that this CSS fix would in fact fix the problem:
$("div").css("max-width","100%")