Question:
Hello everyone,
I’m working on the media query max-width 500px.
When I resize the window in the browser to less then 500, the right side of the window has a white band all the way down of the content but not the navbar.
Any ideas.
Please give us the link to your Repl so it’s easier to help you
It’s easier if you provide the code snippet of the CSS that is responsible for resize the window than having us look at the whole website.
I assume you did not built the code using replit right?
Which you didn’t give us…
Ctrl+U for source code
Hello everybody, I couldn’t attach the code before.
here is the html and I will put the css next.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Glastonbury Festival</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<script src="/js/script.js"></script>
</head>
<body>
<!-- <header> -->
<nav class="navbar" id="navbar">
<ul>
<li class="nav"><a href="./about-website/about.html">About</a></li>
<li class="nav"><a href="#lineup">Line-up</a></li>
<li class="nav"><a href="#tickets">Tickets</a></li>
<li class="nav"><a href="#info">Info</a></li>
</ul>
</nav>
<!-- </header> -->
<section class="section-background parallax">
<h2>Desert</h2>
</section>
<section class="text-bloc">
<p>NEW GEN Z Music Festival is expecting to attrac around 15,000 attendees with a £10 entry fee. Despite facing logistical challenges
the festival showcased diverse genres like pop, blues, and folk. It embodied the counterculture movement of
the time,
Live music, and communal experiences will be
featuring larger audiences, diverse genres, and emerging artists.
New GEN Z Festival will be the event, known for headline acts, surprise performances, and memorable
moments. It
evolved into a multi-day celebration of music, art, healing, and sustainability. Today, Glastonbury remains
a cultural
pilgrimage, attracting people from all walks of life to experience its unique blend of joy, creativity, and
community
spirit.</p>
<section>
<section class="section-background parallax1">
<h2>Mountain</h2>
</section>
<section class="text-bloc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis minima fuga debitis quasi eius
aliquid
sapiente? Cumque blanditiis quibusdam, ex totam aliquam provident alias culpa, sit illo, eum
doloribus
doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi reprehenderit
voluptatum
aperiam pariatur numquam praesentium recusandae, ipsa at iusto eveniet, distinctio sunt dolore nemo
veniam maiores vitae deserunt cum ducimus.</p>
<section>
<section class="section-background parallax2">
<h2>Sea</h2>
</section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam deleniti tempora odit, iusto nemo aliquid. Facilis quis provident magni, consequatur necessitatibus perferendis nesciunt tempore harum mollitia nam iusto commodi deserunt.</p>
<section class="section-background parallax3">
<h2>Galaxy</h2>
</section>
<main>
<section id="hero">
<div class="container">
<video poster="https://sb.vox1.net/video/poligonBG.jpg" playsinline autoplay muted loop>
<source src="./videos/video_preview_h264.mp4" type="video/mp4">
</video>
</div>
</section>
<h2 class="text">The Ultimate Experience for Gen Z</h2>
</main>
<section id="about">
<p>Experience the new frontier of music festivals tailored exclusively for Gen Z. Immerse
yourself in a
unique blend of music, art, and culture that celebrates the spirit of this generation.
</p>
</section>
<!-- lineup with pictures of artists -->
<!-- <div> -->
<div class="lineup" id="lineup">
<a href="/about-website/about.html" class="lineup-h2">
<h2>Lineup</h2>
</a>
<section>
<div class="artists">
<!-- Display lineup artists with their names and photos -->
<div class="card__collection clear-fix">
<!-- https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d702cb99ca804bffcfa8820c46483264&auto=format&fit=crop&w=651&q=80 -->
<div class="cards cards--two">
<img src="./images/drake-boy-light-silhouette-wallpaper-preview.jpg" class="img-responsive" alt="Cards Image">
<span class="cards--two__rect"></span>
<span class="cards--two__tri"></span>
<p>Drake</p>
<ul class="cards__list">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<!-- https://images.unsplash.com/photo-1480408144303-d874c5e12201?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=575213599ae24b3dbdfd84be79425c50&auto=format&fit=crop&w=634&q=80 -->
<div class="cards cards--three">
<img src="./images/justin-bieber.jpeg" class="img-responsive" alt="">
<span class="cards--three__rect-1">
<span class="shadow-1"></span>
<p>Justin Bieber</p>
</span>
<span class="cards--three__rect-2">
<span class="shadow-2"></span>
</span>
<span class="cards--three__circle"></span>
<ul class="cards--three__list">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<!-- another card from codepen -->
<div class="cards cards--two">
<img src="./images/the-weeknd-2.jpeg" class="img-responsive" alt="Cards Image">
<span class="cards--two__rect"></span>
<span class="cards--two__tri"></span>
<p>The Weeknd</p>
<ul class="cards__list">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<!-- end cards from codepen -->
</div>
</div>
</section>
</div>
<!-- Add more artists as needed -->
<!-- section activities -->
<div class="experiences-title">
<h1>Experiences</h1>
<p>virtual reality, augmented reality, experiential art, and social media-friendly
activations.</p>
</div>
<section>
<div class="wrapper">
<div class="card"><img alt="image"
src="https://images.unsplash.com/photo-1477666250292-1419fac4c25c?auto=format&fit=crop&w=667&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" />
<div class="info">
<h1>Virtual Reality</h1>
<p>Enjoy the concert virtualy from the accesibility room</p>
<button><a class="experiences-a" href="/about-website/about.html">Read
More</a></button>
</div>
</div>
<div class="card"><img alt="image"
src="https://images.unsplash.com/photo-1425342605259-25d80e320565?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" />
<div class="info">
<h1>Augmented Reality</h1>
<p>interact in a real world environment enhanced with computer-generated visual
elements, sounds,
and other stimuli</p>
<button><a class="experiences-a" href="/about-website/about.html">Read
More</a></button>
</div>
</div>
<div class="card"><img alt="image"
src="https://images.unsplash.com/photo-1503249023995-51b0f3778ccf?auto=format&fit=crop&w=311&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" />
<div class="info">
<h1>Experimental</h1>
<p>walk into a different gallaxy of immersive art museums activating your space
where the work exists.</p>
<button><a class="experiences-a" href="/about-website/about.html">Read
More</a></button>
</div>
</div>
</div>
</section>
<!-- end section activities -->
</section>
<div>
<section id="tickets">
<h2>Tickets</h2>
<!-- <a href="#tickets" class="cta-button">Get Tickets</a> -->
<p>Join us for an unforgettable festival experience. Get your tickets now and secure your
spot at the New
Gen Z Festival.</p>
<a href="ticket-sales-page.html" class="cta-button">Buy Tickets</a>
</section>
</div>
<section id="info">
<h2>Festival Information</h2>
<p>Find all the details you need to know about the festival, including location, dates,
FAQs, and more.</p>
<a href="/about-website/about.html" class="cta-button">Learn More</a>
</section>
</main>
<!-- footer accordion -->
<footer>
<div class="container">
<ul class="accordion">
<li class="tab">
<div class="social youtube">
<a href="https://www.youtube.com" target="_blank" rel="noopener">Youtube</a>
</div>
<div class="content">
<h1>Youtube</h1>
<p>Connect with me for professional youtube videos</p>
</div>
</li>
<li class="tab">
<div class="social linkedin">
<a href="https://www.linkedin.com/in/selvaonline/" target="_blank" rel="noopener">Linkedin</a>
</div>
<div class="content">
<h1>Linkedin</h1>
<p>Connect with me professional level on Linkedin</p>
</div>
</li>
<li class="tab">
<div class="social facebook">
<a href="https://www.linkedin.com/in/selvaonline/" target="_blank" rel="noopener">Facebook</a>
</div>
<div class="content">
<h1>Facebook</h1>
<p>Connect with me on Facebook</p>
</div>
</li>
<li class="tab">
<div class="social twitter">
<a href="https://www.twitter.com/selvaonline" rel="noopener" target="_blank">Twitter</a>
</div>
<div class="content">
<h1>Twitter</h1>
<p>Follow me on twitter for my technology updates</p>
</div>
</li>
<li class="tab">
<div class="social instagram">
<a href="https://www.instagram.com/" rel="noopener" target="_blank">Instagram</a>
</div>
<div class="content">
<h1>Instagram</h1>
<p>Connect with me on Instagram</p>
</div>
</li>
<!-- <li class="tab">
<div class="social github">
<a href="https://github.com/selvaonline/" rel="noopener" target="_blank">Github</a>
</div>
<div class="content">
<h1>Github</h1>
<p>Follow me on github for my opensource projects</p>
</div>
</li>
<li class="tab">
<div class="social codepen">
<a href="https://codepen.io/selvaonline/" rel="noopener" target="_blank">Blog</a>
</div>
<div class="content">
<h1>CodePen</h1>
<p>Follow my codepen to see my latest works</p>
</div>
</li> -->
</ul>
</div>
</footer>
<div class="copywrite">
<p>© 2023 New Gen Z Festival. All rights reserved.</p>
</div>
</body>
</html>
Is probably the most messy css you have ever seen, but is my beginning 
* {
margin: 0;
padding: 0;
}
header {
position: relative;
}
.navbar {
list-style-type: none;
/* margin: 0; */
padding-bottom: 3px;
width: 100%;
/* height: 100%; */
background: linear-gradient(87.4deg, rgb(255, 241, 165) 1.9%, rgb(200, 125, 76) 49.7%, rgb(83, 54, 54) 100.5%);
/* border: 1px solid #555; */
/* position: fixed; */
overflow: hidden;
position: fixed;
z-index: 9999;
transition-duration: 1s;
}
.nav {
text-align: center;
display: inline;
float: left;
/* background-color: #e8751a; */
}
.nav:first-child {
float: right;
}
.nav:first-child:hover {
/* float: right; */
color: #fdf1ae;
font-size: 28px;
font-family: fantasy;
}
.nav a {
display: block;
color: rgb(109, 17, 17);
text-align: center;
/* margin: 5px 40px 0 10px; */
padding: 14px 16px;
text-decoration: none;
border-radius: 15px;
font-size: 30px;
}
/* Change the link color on hover */
.nav a:hover {
background-color: transparent;
/* color: #fdf1ae; */
font-size: 28px;
font-family: fantasy;
}
/* li a:hover:not(.active) {
background-color: #111;
} */
/* styles for the next item on the navbar (<ul>)
<a> is inside of <li> which is inside <ul> */
a {
display: block;
padding: 8px;
/* background-color: #333; */
}
.active {
/* background-color: #9b6a4b; */
color: #fdf2ae;
}
#hero {
box-sizing: border-box;
width: 100%;
/* height: 100vh; */
position: relative;
}
/* ------------------- */
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
.container video {
width: 100%;
height: 100%;
}
.text {
/* position: absolute; */
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.126);
color: rgb(16, 16, 16);
display: flex;
justify-content: center;
align-items: center;
font-size: 8vw;
mix-blend-mode: multiply;
font-family: 'Raleway', sans-serif;
}
/* --------------- */
/* parallax effect copied from athena AI assistand */
h2 {
font-size: 125px;
}
.section-background {
background-attachment: fixed;
background-position: center;
background-size: cover;
height: 100vh;
width: 100%;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
}
.parallax {
background-image: url(./images/desert.jpg);
}
.parallax1 {
background-image: url(./images/mountain.jpg);
}
.parallax2 {
background-image: url(./images/sea.jpg);
}
.parallax3 {
background-image: url(./images/galaxy.jpg);
}
.text-bloc p {
margin: 70px;
font-size: 22px;
}
/* end of parallax styles */
/* .lineup {
display: block;
}
.artists {
display: flex;
}
.artist {
flex: 33.33%;
height: 200px;
padding: 10px;
margin: 0;
text-align: center;
} */
/* cards from codepen */
.clear-fix:after {
display: block;
clear: both;
content: "";
}
.img-responsive {
max-width: 100%;
height: auto;
}
.card__collection {
display: flex;
flex-direction: row;
justify-content: space-evenly;
position: relative;
/* display: block; */
background: orange;
padding: 0;
font-family: "Do Hyeon", sans-serif;
overflow: hidden;
}
.card__collection .cards {
width: 300px;
height: 400px;
display: block;
background-size: cover;
float: left;
border-radius: 15px;
position: relative;
overflow: hidden;
background-position: center;
margin: 10px;
}
.card__collection .cards--one {
backface-visibility: hidden;
/* change backface-visiblility to backface-visibility */
}
.card__collection .cards--one:hover:after {
bottom: -20px;
}
.card__collection .cards--one:hover:before {
bottom: -10px;
}
.card__collection .cards--one:hover .cards--one__rect {
left: 45%;
}
.card__collection .cards--one:hover .cards--one__rect--back {
left: 50%;
}
.card__collection .cards--one::after {
content: "";
display: block;
position: absolute;
height: 70px;
transform: rotate(-3deg);
background: #e660e3;
position: absolute;
bottom: -80px;
left: 0;
right: -10px;
z-index: 9;
transition: all 0.2s ease-in;
transition-delay: 0.3s;
}
.card__collection .cards--one:before {
content: "";
display: block;
position: absolute;
height: 80px;
transform: rotate(-3deg);
bottom: -90px;
left: 0;
background: #fff;
right: -10px;
z-index: 5;
transition: all 0.2s ease-in;
transition-delay: 0.1s;
}
.card__collection .cards--one__rect {
color: #fff;
text-transform: uppercase;
font-size: 18px;
background: #0f9bc0;
width: 126px;
height: 55px;
transform: skewY(5deg);
position: absolute;
display: block;
top: 60%;
left: -45%;
z-index: 1;
line-height: 3.3rem;
text-align: center;
transition: all 0.2s ease-in;
}
.card__collection .cards--one__rect--back {
display: block;
background: rgba(34, 65, 154, 0.8);
width: 126px;
height: 55px;
transform: skewY(7deg);
position: absolute;
top: 65%;
left: -50%;
transition: all 0.2s ease-in;
transition-delay: 0.3s;
}
.card__collection .cards--one__rect p {
transform: skewY(-7deg);
position: relative;
}
.card__collection .cards--two {
position: relative;
backface-visibility: hidden;
}
.card__collection .cards--two p {
position: absolute;
top: 60%;
left: -183%;
text-transform: capitalize;
color: #b00b0b;
font-size: 20px;
z-index: 8;
transition: all 0.6s ease;
}
.card__collection .cards--two:hover p {
left: -10%;
}
.card__collection .cards--two:hover img {
transform: translateY(-15px);
}
.card__collection .cards--two:hover .cards--two__rect {
top: 75%;
}
.card__collection .cards--two:hover .cards--two__rect:before {
transform: translateY(15px);
}
.card__collection .cards--two:hover li {
transform: translateY(0);
}
.card__collection .cards--two:hover .cards--two__tri {
right: -40%;
}
.card__collection .cards--two:hover .cards--two__tri:before {
right: -312px;
}
.card__collection .cards--two img {
transition: all 0.2s ease;
}
.card__collection .cards--two__tri {
border-top: 220px solid transparent;
border-bottom: 190px solid transparent;
border-right: 288px solid #fff;
opacity: 0.9;
position: absolute;
display: block;
top: 0;
right: -100%;
transition: all 0.3s ease-in-out;
}
.card__collection .cards--two__tri:before {
border-top: 220px solid transparent;
border-bottom: 190px solid transparent;
border-right: 288px solid #57ccfd;
position: absolute;
content: "";
display: block;
top: -220px;
right: -612px;
transition: all 0.3s ease-in-out;
transition-delay: 0.2s;
}
.card__collection .cards--two__rect {
width: 750px;
height: 200px;
background: #fff;
display: block;
position: absolute;
top: 175%;
left: -78%;
transform: rotate(30deg);
z-index: 5;
opacity: 0.9;
transition: all 0.3s ease-in-out;
}
.card__collection .cards--two__rect:before {
content: "";
display: block;
width: 100%;
position: relative;
height: 100%;
background: #f07306;
transform: translateY(200px);
z-index: 2;
transition: all 0.3s ease-in-out;
transition-delay: 0.1s;
}
.card__collection .cards--two ul {
list-style: none;
position: absolute;
bottom: 0;
left: 10px;
z-index: 9;
}
.card__collection .cards--two ul li {
display: inline-block;
font-size: 16px;
margin: 7px;
color: #fff;
transition: all 0.2s ease-in-out;
transform: translateY(100px);
}
.card__collection .cards--two ul li:nth-child(2) {
transition-delay: 0.2s;
}
.card__collection .cards--two ul li:nth-child(3) {
transition-delay: 0.3s;
}
.card__collection .cards--two ul li:nth-child(4) {
transition-delay: 0.4s;
}
.card__collection .cards--three {
position: relative;
z-index: 10;
}
.card__collection .cards--three:hover .cards--three__rect-1 {
left: 10%;
}
.card__collection .cards--three:hover .cards--three__rect-1 .shadow-1 {
left: -20%;
}
.card__collection .cards--three:hover .cards--three__rect-2 {
left: 60%;
}
.card__collection .cards--three:hover .cards--three__rect-2:before {
left: -100%;
}
.card__collection .cards--three:hover .cards--three__rect-2:after {
left: 80%;
}
.card__collection .cards--three:hover .cards--three__rect-2 .shadow-2 {
left: -10%;
}
.card__collection .cards--three:hover .cards--three__circle {
transform: scale(1);
}
.card__collection .cards--three:hover .cards--three__circle:before {
transform: scale(0.9);
}
.card__collection .cards--three:hover .cards--three__list li {
transform: translateX(0);
}
.card__collection .cards--three__rect-1 {
background: #fff;
width: 200px;
height: 110px;
transform: skewX(-20deg);
display: block;
position: absolute;
top: 73%;
opacity: 0.9;
left: -100%;
z-index: 8;
transition: all 0.5s ease-in;
}
.card__collection .cards--three__rect-1 p {
font-size: 20px;
color: #fff;
transform: skewX(20deg);
/* line-height: 6rem; */
margin-top: 55px;
}
.card__collection .cards--three__rect-1 .shadow-1 {
background: #9b1308;
width: 230px;
height: 100px;
display: block;
position: absolute;
left: -200%;
z-index: -1;
transition: all 0.3s ease-in;
}
.card__collection .cards--three__rect-2 {
width: 100px;
height: 70px;
background: #fff;
position: absolute;
top: 65%;
left: 1000%;
opacity: 0.9;
transform: skewX(-20deg);
z-index: 8;
transition: all 0.5s ease-in;
}
.card__collection .cards--three__rect-2::before {
content: "";
display: block;
width: 50px;
height: 40px;
background: #57ccfd;
opacity: 1;
position: absolute;
left: 500%;
top: 10%;
transition: all 0.3s ease-in;
}
.card__collection .cards--three__rect-2::after {
content: "";
display: block;
width: 50px;
height: 40px;
background: #9b1308;
opacity: 1;
position: absolute;
left: 500%;
top: 114%;
transition: all 0.5s ease-in;
transition-delay: 0.2s;
}
.card__collection .cards--three__rect-2 .shadow-2 {
background: #57ccfd;
width: 100%;
height: 100%;
display: block;
position: absolute;
top: -10%;
left: 500%;
transition: all 0.5s ease-in;
transition-delay: 0.2s;
}
.card__collection .cards--three__circle {
width: 220px;
height: 220px;
border-radius: 50%;
background: #fff;
position: absolute;
top: -15%;
left: 50%;
opacity: 0.9;
transform: scale(0);
transition: all 0.3s ease;
}
.card__collection .cards--three__circle:before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #9b1308;
border-radius: 50%;
transform: scale(0);
transition: all 0.3s ease;
transition-delay: 0.2s;
}
.card__collection .cards--three__list {
list-style: none;
position: absolute;
top: -9px;
right: 7px;
padding-top: 60px;
transition: all 0.4s ease;
}
.card__collection .cards--three__list li {
display: inline-block;
margin: 4px;
color: #fff;
width: 25px;
height: 25px;
border-radius: 50%;
background: rgba(87, 204, 253, 0.9);
text-align: center;
line-height: 1.7rem;
font-size: 12px;
transition: all 0.3s ease;
transform: translateX(500%);
}
.card__collection .cards--three__list li:nth-child(1) {
transition-delay: 0.2s;
}
.card__collection .cards--three__list li:nth-child(2) {
transition-delay: 0.3s;
}
.card__collection .cards--three__list li:nth-child(3) {
transition-delay: 0.4s;
}
/* end cards from codepen */
/* section activities */
.wrapper {
display: flex;
width: 100%;
justify-content: space-around;
background: orange;
}
.card {
width: 280px;
height: 360px;
border-radius: 15px;
padding: 1.5rem;
background: white;
position: relative;
display: flex;
align-items: flex-end;
transition: 0.4s ease-out;
box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
}
.card:hover {
transform: translateY(20px);
}
.card:hover:before {
opacity: 1;
}
.card:hover .info {
opacity: 1;
transform: translateY(0px);
}
.card:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 15px;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
transition: 0.5s;
opacity: 0;
}
.card img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
border-radius: 15px;
}
.card .info {
position: relative;
z-index: 3;
color: white;
opacity: 0;
transform: translateY(30px);
transition: 0.5s;
}
.card .info h1 {
margin: 0px;
font-size: 30px;
}
.card .info p {
letter-spacing: 1px;
font-size: 15px;
margin-top: 8px;
}
.card .info button {
padding: 0.6rem;
outline: none;
border: none;
border-radius: 3px;
background: white;
color: black;
font-weight: bold;
cursor: pointer;
transition: 0.4s ease;
}
.card .info button:hover {
background: dodgerblue;
color: white;
}
/* .experiences-a {
margin: 0;
padding: 0;
text-decoration: none;
color: black;
} */
/* .experiences-a:hover {
background: #0083b4;
transition: background 1s;
} */
.lineup-h2 {
margin: 30px;
padding: 40px;
text-decoration: none;
color: black;
--c: #1095c1;
line-height: 1.2em;
background:
conic-gradient(from -135deg at 100% 50%, var(--c) 90deg, #0000 0) 0 var(--p, 0%)/var(--s, 0%) 200% no-repeat,
conic-gradient(from -135deg at 7em 50%, #0000 90deg, var(--c) 0) 100% var(--p, 0%)/var(--s, 0%) 200% no-repeat;
transition: .4s ease-in, background-position 0s;
}
.lineup-h2:hover {
--p: 100%;
--s: calc(50% + 3.5em);
color: white;
}
/* .lineup-h2 {
color: red;
background-clip: text;
color: linear-gradient(60deg, #E21143, #FFB03A);
color: transparent;
color: linear;
transition: 2s;
} */
.experiences-title {
height: 10rem;
width: 100%;
margin: 0;
background: #295b9e;
text-align: center;
/* font-size: 50px; */
}
.experiences-title h1 {
font-size: 60px;
}
.experiences-title p {
font-size: 25px;
margin: 0;
}
.experiences-a {
margin: 0;
padding: 0;
text-decoration: none;
color: black;
--c: #1095c1;
line-height: 1.2em;
background:
conic-gradient(from -135deg at 100% 50%, var(--c) 90deg, #0000 0) 0 var(--p, 0%)/var(--s, 0%) 200% no-repeat,
conic-gradient(from -135deg at 1.2em 50%, #0000 90deg, var(--c) 0) 100% var(--p, 0%)/var(--s, 0%) 200% no-repeat;
transition: .4s ease-in, background-position 0s;
}
.experiences-a:hover {
--p: 100%;
--s: calc(50% + 3.5em);
}
.experiences-a h2:hover {
/* color: red; */
background-clip: text;
color: linear-gradient(60deg, #E21143, #FFB03A);
/* color: transparent; */
/* color: linear; */
transition: 2s;
}
/* end section activities */
/* ------------------------------------------------------------------ */
/* Start Section tickets */
#tickets {
background: #585454a2;
}
.cta-button {
font-size: 48px;
background: #949292;
text-decoration: none;
text-align: center;
color: black;
padding: 0 0 45px 0;
}
/* End Section tickets */
/* Start Festival info, Sponsors, asociations etc */
#info {
background: #283e56;
}
/* End festival info section */
/* not permanent style code */
h2 {
text-align: center;
padding-top: 10px;
}
h4 {
text-align: center;
}
p {
text-align: center;
}
/* Respoonsive image gallery */
.gallery a {
padding: 0;
box-shadow: 10px 10px 20px rgba(200, 125, 76, 0.2);
background-color: #f5ebe4;
}
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
background-color: #f5ebe4;
}
div.desc {
padding: 15px;
text-align: center;
}
footer {
/* background: linear-gradient(87.4deg, rgb(255, 241, 165) 1.9%, rgb(200, 125, 76) 49.7%, rgb(83, 54, 54) 100.5%); */
background: #444;
}
.logo :hover {
text-align: right;
}
/* footer accordion from codepen */
/* */
/* html {
line-height: 1;
} */
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th,
td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q,
blockquote {
quotes: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
@font-face {
font-family: 'Genericons';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.woff')format('woff'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.eot')format('truetype')
}
.container {
/* margin: 50px auto; */
width: 100%;
}
.accordion {
background: #444;
width: 100%;
min-width: 600px;
display: block;
list-style-type: none;
overflow: hidden;
height: 200px;
font-size: 0;
}
.tab {
display: inline-block;
background-color: #444;
border-right: #333 solid 1px;
width: 80px;
height: 200px;
overflow: hidden;
position: relative;
margin: 0;
transition: all 0.5s ease-in-out 0.1s
}
.tab:hover {
width: 450px;
}
.tab:hover .social a:before {
margin-left: -100px;
}
.tab:hover .social a:after {
margin-left: -5px;
}
.tab .content {
background: #fff;
width: 360px;
height: 200px;
margin-left: 80px;
position: relative;
padding: 50px 0 0 15px;
}
.tab .content h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.tab .content p {
font-size: 0.85rem;
line-height: 1.4rem;
padding-right: 30px
}
.social a:before,
.social a:after {
transition: all 0.4s ease-in-out 0.1s;
width: 80px;
height: 200px;
position: absolute;
text-indent: 0;
padding-top: 90px;
padding-left: 25px;
display: block;
font: normal 30px Genericons;
color: #fff;
}
.social a:after {
font-size: 48px;
padding-left: 20px;
padding-top: 80px;
margin-left: 85px;
}
/*Add Icons */
.linkedin a:before,
.linkedin a:after {
content: '\f208'
}
.linkedin a::after {
background-color: #00a9cd;
}
.youtube a:before,
.youtube a:after {
content: '\f213'
}
.youtube a::after {
background-color: #ff0000;
}
.twitter a:before,
.twitter a:after {
content: '\f202'
}
.twitter a::after {
background-color: #6dc5dd;
}
.facebook a:before,
.facebook a:after {
content: '\f204'
}
.facebook a::after {
background-color: #3b5998;
}
.instagram a:before,
.instagram a:after {
content: '\f215'
}
.instagram a:after {
background-color: #6dc993;
}
.github a:before,
.github a:after {
content: '\f200'
}
.github a:after {
background-color: #6e5494;
}
.codepen a:before,
.codepen a:after {
content: '\f216'
}
.codepen a:after {
background-color: #6e5494;
}
/* END ACCORDION */
.copywrite p {
width: 100%;
margin: 0;
background: #283e56;
color: white;
}
/* antes estaba como un comentario y lo he puesto activo */
/* * {
box-sizing: border-box;
} */
/* lo de arriva estaba como comentario y lo he puesto activo */
/* .responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
} */
/* media queries 500px */
@media only screen and (max-width: 500px) {
* {
margin: 0;
padding: 0;
}
.navbar li {
width: 100%;
}
.navbar {
width: 100%;
float: none;
}
.wrapper {
display: flex;
flex-direction: column;
align-content: center;
}
.responsive {
width: 100%;
}
.accordion {
width: 100%;
overflow: hidden;
}
.container {
width: 100%;
}
}```and what i’m asking is;
I’m trying to set the media query for max-width 500px but when the screen arrives to the size of 820px the website doesn’t fit to the screen.
well, that’s the think, I assumed that is the all website what is a mess 
so what i dont understand is, why the navbar keeps the size, say responsive, and the rest of the body has that… don’t know how to call it… white band on the rigth side of the body.
I’ve being trying different ways to just make the photos or the text smaller but no success.
I don’t see a white bar on the side , but what I do see is oversized text. You can set the size of the text to a percentage instead of a set value if that helps.
ah, thats probably the size of your image. did you set the size of your image?
I think I have done it before just to see, how it work. let me try again and Ill come back in a min
What I did is to put the source of the images of the paralax effect on the CSS. Is that correct or is better to put the source of the picture on the HTML ?
h2 {
font-size: 125px;
}
.section-background {
background-attachment: fixed;
background-position: center;
background-size: cover;
height: 100vh;
width: 100%;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
}
.parallax {
background-image: url(./images/desert.jpg);
}
.parallax1 {
background-image: url(./images/mountain.jpg);
}
.parallax2 {
background-image: url(./images/sea.jpg);
}
.parallax3 {
background-image: url(./images/galaxy.jpg);
}
.text-bloc p {
margin: 70px;
font-size: 22px;
}
Try putting the source in the HTML and seeing if the result is different. I think it’s because background-image in CSS is very finicky.
what you mean with finicky.
well, they haven’t been nice to use in my experience.