I am having this trouble with my game in where the screen creates a small scroll bar and the page won't fit on one screen. When I try changing the height in my body and html tags it seems like nothing is happening and when I try overflow:hidden it just stops me from getting to my play again button and doesn't actually fit the game onto one single page.
Here is the game link
https://jobaa11.github.io/connect-4-project-1/
This is my CSS for my body and main
body {
margin: 0;
height: 100vh;
display: grid;
justify-content: stretch;
align-items: center;
background-color: var(--blue);
}
main {
display: grid;
justify-content: center;
margin: 0;
}
I've tried several different options, but that scrollbar has been very persistent. Any suggestions?
This is also my footer which holds my play-again button that keeps causing the scroll bar issue I believe.
footer {
display: flex;
justify-content: space-evenly;
font-family: 'Press Start 2P', sans-serif;
color: rgb(75, 57, 57);
}
footer>button {
margin-top: 10px;
outline-style: groove;
background-color: #FEDF49;
border-radius: 5%;
font-family: 'Press Start 2P', sans-serif;
font-size: small;
}
footer>button:hover {
transform: scale(1.1);
opacity: 80;
color: red
}
#replay-again-btn {
cursor: pointer;
}
add to your css :
body {
margin: 0;
height: 100vh;
overflow:hidden;
display: grid;
justify-content: stretch;
align-items: center;
background-color: var(--blue);
}
Related
How to start my progressbar counting when i will go to container section of my webpage.I think i have to change my javascript code a bit please help me.
HTML CODE
<div class="container">
<div class="circular-progress">
<span class="progress-value">100%</span>
</div>
<span class="text">HTML & CSS</span>
</div>
<!-- JavaScript -->
<script src="js/script.js"></script>
CSS CODE
/* Google Fonts - Poppins */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #7d2ae8;
}
.container{
display: flex;
width: 420px;
padding: 50px 0;
border-radius: 8px;
background: #fff;
row-gap: 30px;
flex-direction: column;
align-items: center;
}
.circular-progress{
position: relative;
height: 250px;
width: 250px;
border-radius: 50%;
background: conic-gradient(#7d2ae8 3.6deg, #ededed 0deg);
display: flex;
align-items: center;
justify-content: center;
}
.circular-progress::before{
content: "";
position: absolute;
height: 210px;
width: 210px;
border-radius: 50%;
background-color: #fff;
}
.progress-value{
position: relative;
font-size: 40px;
font-weight: 600;
color: #7d2ae8;
}
.text{
font-size: 30px;
font-weight: 500;
color: #606060;
}
Javascriptcode
let circularProgress = document.querySelector(".circular-progress"),
progressValue = document.querySelector(".progress-value");
let progressStartValue = 0,
progressEndValue = 90,
speed = 100;
let progress = setInterval(() => {
progressStartValue++;
progressValue.textContent = `${progressStartValue}%`
circularProgress.style.background = `conic-gradient(#7d2ae8 ${progressStartValue * 3.6}deg, #ededed 0deg)`
if(progressStartValue == progressEndValue){
clearInterval(progress);
}
}, speed);
When i load my page at first then progressbar is count value But i want to start the counting after i go to that section of that webpage.
You could use Intersection Observer. You choose an HTML element to observe and once this element is in view, that will trigger the start of the progress bar.
I've been stuck on this problem for hours.
This is my Header.js
<div className="navbar-inner">
<h2>Text1</h2>
<h3>Text2</h3>
</div>
This is my Header.css file:
.navbar-inner {
margin: 0 auto;
color: #fff;
display: flex;
width: 87vw;
background-color: red;
justify-content: space-between;
vertical-align: sub;
}
This is what is shown:
I would like Text1 and Text2 to be aligned on the same y-line:
You can give flex on h2 and h3 tag.
h2, h3 {
display: flex;
align-items: center;
}
align-items is what you need for vertically aligning text when using flex box.
I also removed the margin from the h2 and h3 elements (it is there by default).
.navbar-inner {
margin: 0 auto;
color: #fff;
display: flex;
width: 87vw;
background-color: red;
justify-content: space-between;
/* New styles */
align-items: flex-end;
padding: 5px;
}
h2, h3 {
margin: 0;
}
You will probably need to adjust the padding to align it how you actually want it in terms of how close the text should be to the edges.
I am trying to make the background image on a div change its scale as per the amount of page scrolled. Works well on desktop screens but on mobile screen, the BG image's height reduces and shrinks the image. This behaviour is apparent as I am trying to resize a sized cover image in % values. I have added a red background-color too to the div for better debugging. Any way to make it work flawlessly even on mob screens? The code is below as well as on Codepen.
HTML:
<main>
<div class="section_1">
<div class="welcome_message">
<div class="welcome_text">
<p class="welcome">Welcome to</p>
<h1>My</h1>
<p class="tagline">DIRECTORY</p>
</div>
</div>
</div>
</main>
CSS:
main{
min-height: 200vh;
}
.section_1{
position: relative;
width: 100%;
height: 90vh;
background: red url(https://images.pexels.com/photos/9467294/pexels-photo-9467294.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260) 40% 10%/cover no-repeat;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.section_1 .welcome_message{
width: 80%;
min-height: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
background: none;
padding: 0 1rem 10rem 0;
.welcome_text{
z-index: 3;
// color: white;
background-color: rgba(1, 55, 131, 0.5);
border-bottom: 0.5rem solid white;
padding: 1rem 2rem;
border-end-start-radius: 2rem;
}
.welcome{
color: white;
font-weight: 400;
}
h1{
font-size: 2rem;
color: white;
font-weight: 600;
margin-block: -0.3em;
}
.tagline{
color: white;
font-weight: 400;
}
}
JS:
let bg = document.querySelector('body .section_1')
document.addEventListener('scroll', () => {
let x = window.pageYOffset
bg.style.backgroundSize = (100 + x/10)+'% auto'
})
you almost made it instead of using auto use the calculated width and set the height to 100%
bg.style.backgroundSize = ''+(130 + x/10)+'% 100%'
Codepen :)
Because you scroll all the way top again, bg.style.backgroundSize = 'auto 130%', The value of bg.style.backgroundSize should null.
Hey so right now I'm learning Mainly JS but that also comes with HTML and CSS so I guess that too. I followed a great tutorial from Web Dev Simplified on how to make a snake game (https://www.youtube.com/watch?v=QTcIXok9wNY&t=1781s). so now I wanted to expand my knowledge and start adding features to the game. So I wanted to add a Score feature. The only thing is that when I change the the text-align or the font-size bigger then it already is, nothing changes, is there anything externally locking this data?
Index.html:
<style>
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: black;
}
#game-board {
background-color: white;
width: 100vmin;
height: 100vmin;
display: grid;
grid-template-rows: repeat(21, 1fr);
grid-template-columns: repeat(21, 1fr);
}
.snake {
background-color: hsl(216, 100%, 50%);
border: .25vmin solid black;
}
.food {
background-color: hsl(0, 100%, 50%);
border: .25vmin solid black;
}
#score {
color: white;
font-family: 'Source Sans Pro', sans-serif;
font-size: 60;
text-align: center;
text-align: top;
}
Main JS File:
import { update as updateSnake, draw as drawSnake, SNAKE_SPEED, getSnakeHead, snakeIntersection, scorefunc} from './snake.js'
import { update as updateFood, draw as drawFood } from './food.js'
import { outsideGrid } from './grid.js'
let lastRenderTime = 0
let gameOver = false
const gameBoard = document.getElementById('game-board')
function main(currentTime) {
if (gameOver) {
if (confirm('You lost. Press ok to restart.')) {
window.location = '/'
}
return
}
window.requestAnimationFrame(main)
const secondsSinceLastRender = (currentTime - lastRenderTime) / 1000
if (secondsSinceLastRender < 1 / SNAKE_SPEED) return
lastRenderTime = currentTime
update()
draw()
}
window.requestAnimationFrame(main)
function update() {
updateSnake()
updateFood()
checkDeath()
scorefunc()
}
function draw() {
gameBoard.innerHTML = ''
drawSnake(gameBoard)
drawFood(gameBoard)
}
function checkDeath() {
gameOver = outsideGrid(getSnakeHead()) || snakeIntersection()
}
All other files will be on my GitHub: https://github.com/CarsCanadian/snake-tutorial/
You forgot to add your HTML. Your javascript is unnecessary to show. Anyway, by following your link, I could locate where things went wrong. You need to add a unit to your font-size.
Your code.
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: black;
}
#score {
color: white;
font-family: 'Source Sans Pro', sans-serif;
font-size: 60;
text-align: center;
text-align: top;
}
<body>
<div id="game-board"></div>
<em id="score">123123</em>
</body>
Corrected code, using font-size: 60px.
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: black;
}
#score {
color: white;
font-family: 'Source Sans Pro', sans-serif;
font-size: 60px;
text-align: center;
text-align: top;
}
<body>
<div id="game-board"></div>
<em id="score">123123</em>
</body>
I have these screens:
Full desktop screen.
Small desktop screen.
Mobile screen.
The HTML is this:
html, body {
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
body > section, body > header {
width: 100vw;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
header {
display: flex;
flex-direction: column;
}
header > section {
display: flex;
flex-direction: row;
flex: 1;
}
header > section > figure {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
font-size: 300px;
}
header > h1 {
padding: 10px 20px;
font-size: 20px;
background: black;
color: white;
}
header > section > aside {
width: 300px;
display: flex;
background: red;
}
#media (orientation: portrait) {
header > h1 {
order: 1;
}
header > section {
order: 2;
}
header > section {
flex-direction: column;
}
header > section > aside {
width: auto;
height: 100px;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<header>
<section>
<figure>ð</figure>
<aside></aside>
</section>
<h1>The letter ð</h1>
</header>
</body>
</html>
I would like for the letter in the left to fit the following constraints:
Always be centered in its container. (This part is working).
Always have some padding around it. I would like for the padding to be at least 20px, but otherwise to be some percentage like 20%.
To accomplish the padding problem, the size of the font needs to scale down/up as the screen is resized.
Wondering how I can accomplish this.
Notice how in the "Small Desktop Screen" section the letter is clipped, and there is no padding around it. I would like in that case for the letter to be smaller so that there is at least 20px padding around it. In the "Full Desktop Screen" section, I would like for the letter to be a little bit bigger so the padding is about 20% around it.
If at all possible, I would like for there not to be any hardcoded explicit sizes (widths/heights/paddings/etc.) that are based on the width of the letter in this picture, because I might use different fonts, so it should handle any font ideally. If not possible, then however to get this one example to work is fine.
If it's not possible with CSS, then that would be good to know, then in that case a JavaScript solution sounds good. But CSS only is preferable if possible :)
Here is my solution,
I used vh (viewport height) as unit for the font size. This will scale your font size according to the height of the screen
header>section>figure {
...
...
font-size: 75vh; /* Can be changed as per your design */
}
If you want you can also experiment using vw(viewport width) unit for font size
html,
body {
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
body>section,
body>header {
width: 100vw;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
header {
display: flex;
flex-direction: column;
}
header>section {
display: flex;
flex-direction: row;
flex: 1;
}
header>section>figure {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
font-size: 75vh; /* Can be changed as per your design */
}
header>h1 {
padding: 10px 20px;
font-size: 20px;
background: black;
color: white;
}
header>section>aside {
width: 300px;
display: flex;
background: red;
}
#media (orientation: portrait) {
header>h1 {
order: 1;
}
header>section {
order: 2;
}
header>section {
flex-direction: column;
}
header>section>aside {
width: auto;
height: 100px;
}
}
<header>
<section>
<figure>ð</figure>
<aside></aside>
</section>
<h1>The letter ð</h1>
</header>