My website scales dynamically on desktop without creating scrollbars perfectly, but when I try using safari or google chrome on a mobile device to use it, it seems it may be fitting to the full device length (including under the address bar) rather than just the usable viewing space.
I've uploaded it to this domain-
http://asterisk.best/
index.js
import styles from '../styles/sliderpage.module.css'
import Head from 'next/head'
import './api/mouseListener'
import './api/colorChange'
export default function Home() {
return (
<div className={styles.slide_wrap}>
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, user-scalable=no" />
<div className={styles.main}>
<Head>
<title>Asterisk Digital Consulting</title>
<meta name="description" content="Site under construction." />
<link rel="icon" href="/favicon.svg" />
</Head>
<div id="left-side" className="side">
<h2 className="title">
Asterisk Digital <br />will
<span className="fancy"> brb.</span>
</h2>
</div>
<div id="right-side" className="side">
<h2 className="title">
Asterisk Digital <br />will
<span className="fancy"> brb.</span>
</h2>
</div>
</div>
</div>
)
}
globals.css
#import url('https://fonts.googleapis.com/css2?family=Lobster&family=Rubik&display=swap');
:root {
--dark: rgb(20, 20, 20);
--yellow: rgb(253, 216, 53);
--blue: rgb(98, 0, 234);
--c1: rgb(18, 39, 6);
--c2: rgb(131, 204, 124);
--left-color: var(--c1);
--right-color: var(--c2);
}
body {
background-color: var(--dark);
margin: 0px;
}
.side {
display: grid;
height: 100vh;
overflow: hidden;
place-items: center;
position: absolute;
width: 100%;
}
.side .title {
font-family: "Rubik", sans-serif;
font-size: 8vw;
margin: 0px 10vw;
width: 80vw;
}
.side .fancy {
font-family: "Lobster", cursive;
font-size: 1.3em;
line-height: 0.8em;
}
#left-side {
background-color: var(--left-color);
width: 60%;
z-index: 2;
}
#left-side .title {
color: white;
}
#left-side .fancy {
color: var(--right-color);
}
#right-side {
background-color: var(--right-color);
}
#right-side .title {
color: var(--dark);
}
#right-side .fancy {
color: white;
}
sliderpage.module.css
#import url('https://fonts.googleapis.com/css2?family=Lobster&family=Rubik&display=swap');
.slide_wrap {
--dark: rgb(20, 20, 20);
--c1: rgb(6, 21, 39);
--c2: rgb(124, 145, 204);
--left-color: var(--c1);
--right-color: var(--c2);
}
.main {
background-color: var(--dark);
margin: 0px;
}
I tried using a viewport meta tag suggested elsewhere
if you want to disable scroll completely , add overflow hidden to your body tag such as
body {
overflow: hidden;
text-align: center;
}
For my website I want to make a responsive design for stacking elements under each other. I made this work for the first section (class named withwithout1), but I can't make it work for the class named withwithout2. Keep in mind I want to keep the elements the same way I made them for the larger screen size option.
In short: How can I manage to place the elements under each other in the order I want them to (So text first than the image).
/* Withwithout styling */
.withwithout {
height:58rem;
position: relative;
}
.withwithout1 {
display: grid;
grid-template-columns:repeat(2,minmax(0,1fr));
}
.withwithout1left {
text-align: center;
margin-top: 8rem;
}
.withwithout1left h4 {
color: var(--color-withwithout);
}
.withwithout1left h2 {
margin: 0.2rem 0rem 1rem;
}
.withwithout1right {
text-align: center;
}
.withwithout1right img {
max-width: 65%;
}
.withwithout2 {
display: grid;
margin-top: 2rem;
position: relative;
grid-template-columns:repeat(2,minmax(0,1fr));
}
.withwithout2left {
text-align: center;
}
.withwithout2left img {
max-width: 60%;
}
.withwithout2right {
text-align: center;
margin-top: 2rem;
}
.withwithout2right h4 {
color: var(--color-withwithout);
}
.withwithout2right h2 {
margin: 0.2rem 0rem 1rem;
}
#media screen and (max-width: 1070px) {
.startingbackground_div p {
font-size: 0.93rem;
}
.startingbackground_div h1 {
font-size: 2rem;
}
.startingbackground2_left h2 {
font-size:1.59rem;
}
.startingbackground2_left p {
font-size:0.93rem;
width:100%;
margin-left:3rem;
}
.withwithout1left h2{
font-size: 1.75rem;
}
}
#media screen and (max-width: 890px) {
.nav_menu {
display:none;
}
.login_nav {
display:none;
}
.hamburger {
display:flex;
}
.nav_container {
padding-left: 0.3rem;
margin-left: auto;
}
.startingbackground_container {
display:block;
margin-top: 9rem;
}
.startingbackground_div p {
font-size: 1.1rem;
}
.startingbackground_div h1 {
font-size: 2.8rem;
}
.startingbackground {
height: 90vh;
}
.solutions {
margin-top: 2rem;
overflow:hidden;
}
.solutions_right img {
display:flex;
margin:auto;
margin-top:5rem;
width:77%;
height:auto;
}
.startingbackground2 {
height:18rem;
}
.startingbackground2 h2 {
margin-top: 4rem;
font-size:1.04rem;
}
.startingbackground2 p {
font-size:0.79rem;
}
.startingbackground2_right {
margin-top:4.5rem;
max-width: 70%;
}
.withwithout {
height:100rem;
}
.withwithout1 {
position: relative;
display: inline-block;
text-align: center;
}
.withwithout1left h2 {
font-size:1.4rem;
}
.withwithout1right {
max-width: 60%;
margin-top: 3rem;
margin-left: 7rem;
}
.withwithout2 {
position: relative;
display: inline-block;
text-align: center;
}
.withwithout2right {
margin-top:-35rem;
}
.withwithout2left {
margin-top:16rem;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DraftFlex</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Font-families -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;500;600&display=swap" rel="stylesheet">
<!-- Animations -->
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
<!-- Fontawesome Icon -->
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<!-- Iconscout CDN -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<section class="withwithout">
<div class="container withwithout_container">
<div class="withwithout1">
<div class="withwithout1left">
<h4>Without Draftflex</h4>
<h2>Many tools can be required for the <br> draft-to-deal proces</h2>
<p>In many projects, all kinds of tools can be helpful. <br> However, the combination of these application is what <br> is desired. Using many different tools can interfere <br> with an easy workflow and may decrease efficiency <br> and productivity.</p>
</div>
<div class="withwithout1right">
<img src="/Icons/replaces.png" alt="replaces">
</div>
</div>
<div class="withwithout2">
<div class="withwithout2left">
<img src="/Icons/replaces2.png" alt="replaces2">
</div>
<div class="withwithout2right">
<h4>Without Draftflex</h4>
<h2>An integration of these tools is <br> what improves the workflow</h2>
<p>By the use of DraftFlex, the combined <br> process of all these applications is used. <br> This helps boost the performance <br> and competence. An easy workflow is key <br> in every business, and this is what DraftFlex <br> stimulates. </p>
</div>
</div>
</div>
</section>
You can use separate divs instead of making them as nested divs.
then manage their positions
Hello I have a problem.
Why my css doesn't work on my head page in html?
Someone can help me the link of my code if you to see the result on run: https://jsfiddle.net/02kf1msd/`.
I use bulma for the style.
I want to have the logo and the menu in the same header line: logo on left and menu nav on right.
HTML Code:
<head>
<meta charset="utf-8">
<title>Oumar Pathe SOW Portfolio </title>
<!--css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css">
<link rel="stylesheet" href="src/css/main.css">
<!--css-->
<!--font-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<!--font-->
</head>
<!--head-->
<!--body-->
<body>
<!--head-->
<div class="block">
<head class="header">
Oumar Pathé SOW Portfolio
<nav class="header-menu">
Accueil
Apropos
Réalisations et Expériances
Contact
</nav>
</head>
</div>
<!--head-->
CSS Code:
.header header {
width: 100%;
margin-left: 0;
margin-right: 0;
height: 70px;
line-height: 70px;
background-color: rgba( 0 , 0 , 0, 0);
position:fixed;
top: 0;
z-index: 999;
}
.header .header-logo {
color: #FFFFFF;
font-family: 'Montserrat', sans-serif;
float: left;
margin-left: 30px;
}
.header .header-menu{
float: right;
margin-right: 30px;
}
.header .header-menu a {
margin-right: 15px;
color: #FFFFFF;
}
.header .header-menu a:hover {
color: #3498db;
}
Why my access doesn't apply on this code?
sometimes Bulma style overrides your CSS codes so you will need to use !important after some of your CSS attributes.
second use navbar-end and navbar-start classes to make the logo on left and menu nav on right,
https://bulma.io/documentation/components/navbar/
I am currently having trouble with a project that I am currently working on, where i have to create a quote machine with 5 quotes. I need to have a forward and backward button for the quotes. i currently have it mostly all done but when i push the forward button and reach the last quote, if i keep clicking, I get undefined written in my element which i just want it to stop at the last one or loop back to the first one, and the same thing happens when i push the back button.
please help.
Here is my code.
var quoteArray = ["If you're already a front-end developer, well, pretend you're also wearing a pirate hat. - Ethan Marcotte, Responsive Web Design",
"Website without visitors is like a ship lost in the horizon. - Dr. Christopher Dayagdag",
"If there's one thing you learn by working on a lot of different Web sites, it's that almost any design idea--no matter how appallingly bad--can be made usable in the right circumstances, with enough effort.” - Steve Krug, Don't Make Me Think: A Common Sense Approach to Web Usability",
"The true ENTREPRENEUR is a risk taker, not an excuse maker. - VDEXTERS",
"Being first in the search result organically in Google is the dream of all website owners. ― Dr. Chris Dayagdag"];
var i = 0;
var backButton = document.getElementById("back");
var forwardButton = document.getElementById("forward");
document.querySelector(".quote")
.innerHTML = quoteArray[0];
setInterval(function() {
document
.querySelector(".quote")
.innerHTML = quoteArray[i++];
if (i == quoteArray.length) i = 0;
},5000);
backButton.addEventListener("click", function() {
document
.querySelector(".quote")
.innerHTML = quoteArray[i--];
if(quoteArray.length == -1) {
document
.querySelector(".quote")
.innerHTML = quoteArray[4];
}
})
forwardButton.addEventListener("click", function() {
document
.querySelector(".quote")
.innerHTML = quoteArray[i++];
if(quoteArray.length == 5) {
document
.querySelector(".quote")
.innerHTML = quoteArray[0];
}
})
body {
width: 100%;
height: 100%;
}
a, .hero{
color: rgb(255, 255, 255);
}
#back, #forward {
font-size: 30px;
}
.nav {
display: flex;
justify-content: space-between;
align-items:center;
color: rgb(255, 255, 255);
width: 100%;
}
.hero {
background-image: linear-gradient(
rgb(0, 0, 0, 0.3) 10%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.3) 80%
),
url(./images/landscape-3969127_1280.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
height: 400px;
}
.row {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 70%;
}
#back, #forward {
padding-left: 10px;
padding-right: 10px;
}
.buttons {
padding: 20px;
}
.quote {
font-size: 18px;
font-weight: bold;
}
.logo {
margin: 0 50px;
}
ul {
display: flex;
justify-content: center;
margin-right: 50px;
padding: 0px;
}
ul a {
padding-left: 30px;
padding-right: 30px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
li {
list-style: none;
}
.nav a {
color: rgb(255, 255, 255)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="hero">
<div class="nav">
<div class="logo"><h1>Logo</h1></div>
<ul>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
</div>
<div class="row">
<div class="quote"></div>
</div>
<div class="buttons">
<i id="back" class="far fa-arrow-alt-circle-left"></i></i>
<i id="forward" class="far fa-arrow-alt-circle-right"></i></i>
</div>
</div>
<script src="./quote.js"></script>
</body>
</html>
% is your friend. You're getting undefined because you try accessing an element outside of the list. Let i go up as high as you want and as low as you want and just implement these calculations
increasing:
quoteArray[i++ % quoteArray.length]
decreasing:
i = (i - 1 + quoteArray.length) % quoteArray.length;
quoteArray[i]
var quoteArray = ["If you're already a front-end developer, well, pretend you're also wearing a pirate hat. - Ethan Marcotte, Responsive Web Design",
"Website without visitors is like a ship lost in the horizon. - Dr. Christopher Dayagdag",
"If there's one thing you learn by working on a lot of different Web sites, it's that almost any design idea--no matter how appallingly bad--can be made usable in the right circumstances, with enough effort.” - Steve Krug, Don't Make Me Think: A Common Sense Approach to Web Usability",
"The true ENTREPRENEUR is a risk taker, not an excuse maker. - VDEXTERS",
"Being first in the search result organically in Google is the dream of all website owners. ― Dr. Chris Dayagdag"];
var i = 0;
var backButton = document.getElementById("back");
var forwardButton = document.getElementById("forward");
document.querySelector(".quote")
.innerHTML = quoteArray[0];
setInterval(function() {
document
.querySelector(".quote")
.innerHTML = quoteArray[i++ % quoteArray.length];
}, 5000);
backButton.addEventListener("click", function() {
i = (i - 1 + quoteArray.length) % quoteArray.length;
document
.querySelector(".quote")
.innerHTML = quoteArray[i];
})
forwardButton.addEventListener("click", function() {
document
.querySelector(".quote")
.innerHTML = quoteArray[i++ % quoteArray.length];
})
body {
width: 100%;
height: 100%;
}
a, .hero{
color: rgb(255, 255, 255);
}
#back, #forward {
font-size: 30px;
}
.nav {
display: flex;
justify-content: space-between;
align-items:center;
color: rgb(255, 255, 255);
width: 100%;
}
.hero {
background-image: linear-gradient(
rgb(0, 0, 0, 0.3) 10%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.3) 80%
),
url(./images/landscape-3969127_1280.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
height: 400px;
}
.row {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 70%;
}
#back, #forward {
padding-left: 10px;
padding-right: 10px;
}
.buttons {
padding: 20px;
}
.quote {
font-size: 18px;
font-weight: bold;
}
.logo {
margin: 0 50px;
}
ul {
display: flex;
justify-content: center;
margin-right: 50px;
padding: 0px;
}
ul a {
padding-left: 30px;
padding-right: 30px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
li {
list-style: none;
}
.nav a {
color: rgb(255, 255, 255)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="hero">
<div class="nav">
<div class="logo"><h1>Logo</h1></div>
<ul>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
</div>
<div class="row">
<div class="quote"></div>
</div>
<div class="buttons">
<a><i id="back" class="far fa-arrow-alt-circle-left"></i></a>
<a><i id="forward" class="far fa-arrow-alt-circle-right"></i></a>
</div>
</div>
<script src="./quote.js"></script>
</body>
</html>
I use the slick framework that allows me to have a carousel.
The problem is that on the second page of my carousel there is a css effect that starts. (code below)
The problem is that the css effect starts when the site is opened. So when I scroll the
caroussel the effect is already "past". I want the effect to start after clicking on one of the two
arrows (right and left).
I import the slick framework through url and saw that the button code is on
one of the url so I modify myself the button in my code (javascript).
After doing that nothing happens.
I do not understand !
Looking forward to an answer from you for my two problems.
Cordially.
/*(function() {
var slideContainer = $('.slide-container');
slideContainer.slick({
//id added to execute the function below
//https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js
//In this url you can see that prevArrow and nextArrow are the buttons
prevArrow: '<button id="prev" type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>',
nextArrow: '<button id="nex" type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>',
});
$("#prev, #nex").click(function() {
$(".expand").addClass("myeffect2");
});
*/
$(".slide-container").slick({
});
body {
background-color: black;
color: #9E9E9E;
}
.slide-container {
margin: auto;
width: 600px;
text-align: center;
}
.wrapper {
padding-top: 100px;
padding-bottom: 40px;
}
.wrapper:focus {
outline: 0;
}
.card {
background: white;
width: 300px;
display: inline-block;
margin: auto;
border-radius: 19px;
position: relative;
text-align: center;
-webkit-box-shadow: -1px 15px 30px -12px black;
box-shadow: -1px 15px 30px -12px black;
}
/***** Effect *****/
.expand-bg {
background: none repeat scroll 0 0 #e6e6e6;
border-radius:16px;
height: 16px;
margin-bottom: 5px;
}
.expand {
border-radius: 13px;
height: 12px;
margin: 2px;
position: absolute;
}
.myeffect2 {
width:90%;
background:#000000;
-moz-animation:myeffect 8s ease-out;
-webkit-animation:myeffect 8s ease-out;
}
#-moz-keyframes myeffect2 {
0% {
width:0px;
}
100% {
width:90%;
}
}
#-webkit-keyframes myeffect {
0% {
width:0px;
}
100% {
width:90%;
}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="slide-container">
<!--page1-->
<div class="wrapper">
<div class="card profile">
<div class="card__level card__level--profile">
<p>My name</p>
</div>
</div>
</div>
<!--end page1-->
<!--page2-->
<div class="wrapper">
<div class="card skills">
<div class="card__unit-name"</div>
</br>
<h3>My effect</h3>
<div class="expand-bg"> <div class="expand myeffect2"> </div> </div>
</div>
</div>
<!--end page2-->
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Scope the myeffect2 class or any class with an animation that you don't want to run unless the slide is active to the slick-active class.
Slick adds the "slick-active" class to slides that are in view.
.slick-active .myeffect2 {
width:90%;
background:#000000;
-moz-animation:myeffect 8s ease-out;
-webkit-animation:myeffect 8s ease-out;
}