I have no idea why the scroll-snap-type CSS property isn't working as expected.
I just want the page to scroll down to each div smoothly and it doesn't want to work.
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (scroll) {
scroll.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
* {
box-sizing: border-box;
margin: 0px;
}
h1 {
font-family: 'Roboto', sans-serif;
margin-top: 1vh;
color: rgb(230,230,230);
}
a {
text-decoration:none;
font-family: 'Roboto', sans-serif;
color: rgb(230,230,230);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgb(24, 24, 24);
}
::-webkit-scrollbar-thumb {
background: rgb(170, 164, 164);
border-radius: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(56, 56, 56);
}
.navbar {
height: 6.7vh;
width: 100vw;
padding: 0px 2vw;
position: fixed;
top: 0;
background-color: rgb(32, 32, 32);
display: flex;
justify-content: space-between;
align-items: center;
}
.navbarLinks {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 30vw;
}
.mainContent {
height: 500vh;
width: 100%;
padding: 0px 2vw;
background-color: rgb(24, 24, 24);
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.sactionDiv {
padding-top: 6.7vh;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: center;
}
<!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">
<title>Project</title>
<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=Roboto:wght#500&display=swap" rel="stylesheet">
<link href="" rel="icon" type="image/x-icon" >
<link href="indexStyle.css" rel="stylesheet" >
<script src="indexJS.js" defer ></script>
</head>
<body>
<div id="navbar" class="navbar">
<div id="navbarLogo" class="navbarLogo" >
</div>
<div id="navbarLinks" class="navbarLinks" >
First Div
Second Div
Third Div
Fourth Div
Fifth Div
</div>
</div>
<div id="mainContent" class="mainContent">
<div id="firstDiv" class="firstDiv sactionDiv">
<div id="firstDivTitle" class="firstDivTitle">
<h1>First Div</h1>
</div>
</div>
<div id="secondDiv" class="secondDiv sactionDiv">
<div id="secondDivTitle" class="secondDivTitle">
<h1>Second Div</h1>
</div>
</div>
<div id="thirdDiv" class="thirdDiv sactionDiv">
<div id="thirdDivTitle" class="thirdDivTitle">
<h1>Third Div</h1>
</div>
</div>
<div id="fourthDiv" class="fourthDiv sactionDiv">
<div id="fourthDivTitle" class="fourthDivTitle">
<h1>Fourth Div</h1>
</div>
</div>
<div id="fifthDiv" class="fifthDiv sactionDiv">
<div id="fifthDivTitle" class="fifthDivTitle">
<h1>Fifth Div</h1>
</div>
</div>
</div>
</body>
</html>
The reason your code isn't working is because you are using the body/html's scroll bar. You should be using the .mainContent's scrollbar instead. So the following code will hide the scroll bar of body/html and add the scroll bar to the .mainContent element by setting it's height to 100vh.
See modified CSS code below:
* {
box-sizing: border-box;
margin: 0px;
}
h1 {
font-family: 'Roboto', sans-serif;
margin-top: 1vh;
color: rgb(230,230,230);
}
a {
text-decoration:none;
font-family: 'Roboto', sans-serif;
color: rgb(230,230,230);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgb(24, 24, 24);
}
::-webkit-scrollbar-thumb {
background: rgb(170, 164, 164);
border-radius: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(56, 56, 56);
}
html, body {
overflow: hidden;
}
.navbar {
height: 6.7vh;
width: 100vw;
padding: 0px 2vw;
position: fixed;
top: 0;
background-color: rgb(32, 32, 32);
display: flex;
justify-content: space-between;
align-items: center;
}
.navbarLinks {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 30vw;
}
.mainContent {
height: 100vh;
width: 100%;
padding: 0px 2vw;
background-color: rgb(24, 24, 24);
scroll-snap-type: y mandatory;
overflow: scroll;
}
.sactionDiv {
padding-top: 6.7vh;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: center;
}
<!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">
<title>Project</title>
<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=Roboto:wght#500&display=swap" rel="stylesheet">
<link href="" rel="icon" type="image/x-icon" >
<link href="indexStyle.css" rel="stylesheet" >
<script src="indexJS.js" defer ></script>
</head>
<body>
<div id="navbar" class="navbar">
<div id="navbarLogo" class="navbarLogo" >
</div>
<div id="navbarLinks" class="navbarLinks" >
First Div
Second Div
Third Div
Fourth Div
Fifth Div
</div>
</div>
<div id="mainContent" class="mainContent">
<div id="firstDiv" class="firstDiv sactionDiv">
<div id="firstDivTitle" class="firstDivTitle">
<h1>First Div</h1>
</div>
</div>
<div id="secondDiv" class="secondDiv sactionDiv">
<div id="secondDivTitle" class="secondDivTitle">
<h1>Second Div</h1>
</div>
</div>
<div id="thirdDiv" class="thirdDiv sactionDiv">
<div id="thirdDivTitle" class="thirdDivTitle">
<h1>Third Div</h1>
</div>
</div>
<div id="fourthDiv" class="fourthDiv sactionDiv">
<div id="fourthDivTitle" class="fourthDivTitle">
<h1>Fourth Div</h1>
</div>
</div>
<div id="fifthDiv" class="fifthDiv sactionDiv">
<div id="fifthDivTitle" class="fifthDivTitle">
<h1>Fifth Div</h1>
</div>
</div>
</div>
Related
I am currently learning HTML, CSS and JS, for my first project I am working on making a basic calculator using these languages and so far I have almost completed the UI of the calculator. It looks like this so far:
Image of calculator display (sorry I still cant posts pictures directly with questions)
My question is: that say the user inputs a large number, I want the display to expand and have the number split across 2 lines, but no matter what I have tried I can't seem to get it working. (I have tried: word-wrap: breakword, word-break: break-all, overflow-wrap: break-word etc.)
What the display looks like when a large number is hardcoded to appear
How I want large numbers to appear on the display (a screenshot from someone else's calculator)
Can anyone help me figure this out.
My code:
* {
padding: 0;
margin: 0;
}
#font-face {
font-family: "calcFont";
src: url(./Calculator.ttf);
}
.main-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.body {
display: flex;
flex-direction: column;
gap: 30px;
background-color: #ccc5be;
min-height: 40vh;
width: 20%;
border-radius: 20px;
padding: 30px 40px;
min-width: 300px;
}
.display {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #ebe6e1;
height: 100px;
border-radius: 20px;
padding: 0 15px;
word-wrap: break-word;
}
.buttons-container {
width: 100%;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: stretch;
gap: 10px;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
gap: 10px;
}
.button {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
border-radius: 5px;
text-align: center;
font-family: Helvetica;
color: white;
transition: all 0.2s ease-in-out;
flex-grow: 1;
}
.number {
/* background-color: #00b3ff; */
background-image: linear-gradient(to bottom left, #7ad7ff, #00b3ff);
}
.action {
background-color: #d16f24;
}
.operation {
background-color: black;
}
.button:hover {
/* background-color: white; */
background-image: linear-gradient(to bottom left, white, rgb(231, 231, 231));
}
.button.number:hover {
color: #00b3ff;
}
.button.operation:hover {
color: black;
}
.button.action:hover {
color: #d16f24;
}
.display-text {
/* white-space: normal; */
font-family: "calcFont", Helvetica;
font-size: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>MY CALC</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="calc.css" />
</head>
<body>
<div class="main-wrapper">
<div class="body">
<div class="display">
<h2 class="display-text">7,000000000145,236,450</h2>
</div>
<div class="buttons-container">
<div class="row">
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button action">DEL</div>
<div class="button action">AC</div>
</div>
<div class="row">
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button operation">X</div>
<div class="button operation">÷</div>
</div>
<div class="row">
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button operation">+</div>
<div class="button operation">-</div>
</div>
<div class="row">
<div class="button number">0</div>
<div class="button number">.</div>
<div class="button action">=</div>
</div>
</div>
</div>
</div>
</body>
</html>
I haven't actually added any JS yet because I'm just trying to make sure the UI is good first then I'll move on to it.
Any help would be much appreciated. Thanks!
You can try word-break: break-all; this break the numbers into a separate when overflowed
* {
padding: 0;
margin: 0;
}
#font-face {
font-family: "calcFont";
src: url(./Calculator.ttf);
}
.main-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.body {
display: flex;
flex-direction: column;
gap: 30px;
background-color: #ccc5be;
min-height: 40vh;
width: 20%;
border-radius: 20px;
padding: 30px 40px;
min-width: 300px;
}
.display {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #ebe6e1;
height: 100px;
border-radius: 20px;
padding: 0 15px;
word-wrap: break-word;
}
.buttons-container {
width: 100%;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: stretch;
gap: 10px;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
gap: 10px;
}
.button {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
border-radius: 5px;
text-align: center;
font-family: Helvetica;
color: white;
transition: all 0.2s ease-in-out;
flex-grow: 1;
}
.number {
/* background-color: #00b3ff; */
background-image: linear-gradient(to bottom left, #7ad7ff, #00b3ff);
}
.action {
background-color: #d16f24;
}
.operation {
background-color: black;
}
.button:hover {
/* background-color: white; */
background-image: linear-gradient(to bottom left, white, rgb(231, 231, 231));
}
.button.number:hover {
color: #00b3ff;
}
.button.operation:hover {
color: black;
}
.button.action:hover {
color: #d16f24;
}
.display-text {
/* white-space: normal; */
font-family: "calcFont", Helvetica;
font-size: 40px;
word-break: break-all;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>MY CALC</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="calc.css" />
</head>
<body>
<div class="main-wrapper">
<div class="body">
<div class="display">
<h2 class="display-text">7,000000000145,236,450</h2>
</div>
<div class="buttons-container">
<div class="row">
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button action">DEL</div>
<div class="button action">AC</div>
</div>
<div class="row">
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button operation">X</div>
<div class="button operation">÷</div>
</div>
<div class="row">
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button operation">+</div>
<div class="button operation">-</div>
</div>
<div class="row">
<div class="button number">0</div>
<div class="button number">.</div>
<div class="button action">=</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can use word-wrap: anywhere; to achieve this effect.
* {
padding: 0;
margin: 0;
}
#font-face {
font-family: "calcFont";
src: url(./Calculator.ttf);
}
.main-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.body {
display: flex;
flex-direction: column;
gap: 30px;
background-color: #ccc5be;
min-height: 40vh;
width: 20%;
border-radius: 20px;
padding: 30px 40px;
min-width: 300px;
}
.display {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #ebe6e1;
height: 100px;
border-radius: 20px;
padding: 0 15px;
word-wrap: break-word;
}
.buttons-container {
width: 100%;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: stretch;
gap: 10px;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
gap: 10px;
}
.button {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
border-radius: 5px;
text-align: center;
font-family: Helvetica;
color: white;
transition: all 0.2s ease-in-out;
flex-grow: 1;
}
.number {
/* background-color: #00b3ff; */
background-image: linear-gradient(to bottom left, #7ad7ff, #00b3ff);
}
.action {
background-color: #d16f24;
}
.operation {
background-color: black;
}
.button:hover {
/* background-color: white; */
background-image: linear-gradient(to bottom left, white, rgb(231, 231, 231));
}
.button.number:hover {
color: #00b3ff;
}
.button.operation:hover {
color: black;
}
.button.action:hover {
color: #d16f24;
}
.display-text {
font-family: "calcFont", Helvetica;
font-size: 40px;
word-wrap: anywhere;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>MY CALC</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="calc.css" />
</head>
<body>
<div class="main-wrapper">
<div class="body">
<div class="display">
<h2 class="display-text">7,000000000145,236,450</h2>
</div>
<div class="buttons-container">
<div class="row">
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button action">DEL</div>
<div class="button action">AC</div>
</div>
<div class="row">
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button operation">X</div>
<div class="button operation">÷</div>
</div>
<div class="row">
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button operation">+</div>
<div class="button operation">-</div>
</div>
<div class="row">
<div class="button number">0</div>
<div class="button number">.</div>
<div class="button action">=</div>
</div>
</div>
</div>
</div>
</body>
</html>
The website mobile version looks like this:desktop mobile view
But on my phone it looks like this: phone view
I make use of box-sizing, still don’t know why it’s having different scaling
Check what measurement unit you used. If it is Percent (%) or something else you should convert it to pixels, as Percent and other similar units are dependent on the screen size. If this is not the issue, please include the code for it so we can find the issue. Thanks!
If you set the width of the image in terms of the viewport size then you get a circle (at least on the tests I did on IOS).
Obviously you will want to set the vw amount to suit your particular requirement.
This snippet sets it to 10vw for this demo.
However, there is another factor. I think you are relying on the natural dimensions of the images to be square. If they aren't then things could look distorted so this snippet adds an object-fit: cover.This still relies on the faces being in a more or less central position in the overall image - but that would need correction depending on each individual image.
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.kill {
background: #1d1d1d;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.9);
-webkit-backdrop-filter: blur(4.9);
height: 100%;
color: white;
padding-top: 15px;
}
.navi {
width: 100%;
}
.nipp {
position: relative;
z-index: 33;
}
.rate {
background: transparent;
border: 0;
outline: none;
margin-right: 25px;
align-items: center;
}
.rell {
justify-content: end;
display: flex;
}
.mage {
width: 10vw;
height: 10vw;
object-fit: cover;
cursor: pointer;
}
.mage1 {
display: flex;
flex-direction: row;
justify-content: center;
}
.mage2 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: relative;
}
.mage4 {
border: 3px solid #5cb85c;
padding: 5px;
}
.butn {
border: 0;
outline: none;
background-color: transparent;
position: absolute;
left: 50px;
}
.txt {
margin-left: -10px;
}
#media screen and (max-width:992px) {
.kill {
background: #1d1d1d;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.9);
-webkit-backdrop-filter: blur(4.9);
height: 100%;
color: white;
padding-top: 15px;
}
.navi {
width: 100%;
}
.nipp {
position: relative;
z-index: 33;
}
.rate {
background: transparent;
border: 0;
outline: none;
margin-right: 25px;
align-items: center;
}
.rell {
justify-content: end;
display: flex;
}
.mage {
width: 10vw;
height: 10vw;
object-fit: cover;
cursor: pointer;
}
.mage1 {
display: flex;
flex-direction: row;
justify-content: center;
}
.mage2 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: relative;
}
.mage4 {
border: 3px solid #5cb85c;
padding: 5px;
}
.butn {
border: 0;
outline: none;
background-color: transparent;
position: absolute;
left: 50px;
}
.txt {
margin-left: -10px;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="kill">
<nav class="navbar navbar-expand-sm navbar-dark nipp navi">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="bi bi-whatsapp h2"></i> Whatsapp
</a>
<div class="rell">
<button class="rate text-light h2"> <i class="bi bi-search"></i></button>
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="" class="rounded-circle w-25">
</div>
</div>
</nav>
<section>
<div class="container pt-4">
<div class="mage1">
<div class="mage2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" class="rounded-circle mage ms-3 " alt="">
<h6 class="mt-2 txt">You</h6>
<button class="butn"> <i class="bi bi-plus-circle-fill"></i></button>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/men/6.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/women/18.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/men/14.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Incidentally, I'm not sure why you bother to repeat the styling und er the media query, for example for mage, but that doesn't affect your question so I've left it.
There is a code. I layout class content. You need to display a picture <img src="../img/mobileimage.png"></img>
$(document).ready(function() {
all__buttons = document.querySelectorAll('.header__button');
/*selected__button.click= function(){
selected__button.backgroundColor='#5f3ec0';
};*/
/*
function changeColor(inputbutton) {
inputbutton.style.backgroundColor='#5f3ec0';
}
*/
[].forEach.call(all__buttons, function(selected__button) {
selected__button.addEventListener('click', function(event) {
event.target.style.backgroundColor = '#5f3ec0';
event.target.style.color = '#ffffff';
});
});
})
body {
margin: 0;
padding: 0;
}
.globalcontainer {
margin-top: 0px;
margin-right: 4%;
margin-bottom: 0px;
margin-left: 4%;
height: 100%;
}
.header>.header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */
color: #000000;
}
/*
.header__buttons {
left: 0;
top: 193px;
}
*/
.header__button {
width: 75px;
height: 30px;
border-radius: 4px;
background-color: #fff;
margin-right: 1.75%;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
}
.header__buttons {
display: flex;
flex-direction: row;
align-items: center;
padding: 7px 15px 7px 0px;
/*margin-right: 10%;*/
}
.mobileimage {}
<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="globalcontainer">
<div class="header">
<div class="header__text">
Обзоры
</div>
<div class="header__buttons">
<!-- <span> -->
<button class="header__button">Все</button>
<button class="header__button">Видео</button>
<button class="header__button">Текст</button>
<button class="header__button">Обзоры</button>
<button class="header__button">Сравнения</button>
<button class="header__button">Краш видео</button>
<button class="header__button">Распаковка</button>
<!-- </span> -->
</div>
</div>
<div class="content">
<div class="cardexample">
<div class="mobileimage">
<img src="../img/mobileimage.png"></img>
</div>
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>
The page is displayed like this
[real view]
but it is necessary (It is necessary that the picture is displayed in full)
[neededview]
[Image from site]
It is necessary to display the entire drawing, not part of it. Quick help is required. The drawing used to scale normally earlier.
$(document).ready(function() {
all__buttons = document.querySelectorAll('.header__button');
/*selected__button.click= function(){
selected__button.backgroundColor='#5f3ec0';
};*/
/*
function changeColor(inputbutton) {
inputbutton.style.backgroundColor='#5f3ec0';
}
*/
[].forEach.call(all__buttons, function(selected__button) {
selected__button.addEventListener('click', function(event) {
event.target.style.backgroundColor = '#5f3ec0';
event.target.style.color = '#ffffff';
});
});
})
body {
margin: 0;
padding: 0;
}
.globalcontainer {
margin-top: 0px;
margin-right: 4%;
margin-bottom: 0px;
margin-left: 4%;
height: 100%;
}
.header>.header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */
color: #000000;
}
/*
.header__buttons {
left: 0;
top: 193px;
}
*/
.header__button {
width:100%;
height: 30px;
border-radius: 4px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
background-size:cover;
}
.header__buttons {
display: flex;
flex-direction: row;
align-items: center;
padding: 7px 15px 7px 0px;
/*margin-right: 10%;*/
}
img{
max-width:100%;
}
#back{
width:100%;
}
<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="globalcontainer">
<div class="header">
<div class="header__text">
Обзоры
</div>
<div class="header__buttons" id="back">
<!-- <span> -->
<button class="header__button">Все</button>
<button class="header__button">Видео</button>
<button class="header__button">Текст</button>
<button class="header__button">Обзоры</button>
<button class="header__button">Сравнения</button>
<button class="header__button">Краш видео</button>
<button class="header__button">Распаковка</button>
<!-- </span> -->
</div>
</div>
<div class="content">
<div class="cardexample">
<div class="mobileimage" id="back">
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fG1hbnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"></img>
</div>
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>
I have a problem where I have a lot of items I want to fit in my website's bottom banner, but when I try adding them they get messed up because of how I spaced them, now I really just want to know how I can fix this and what a good way could be for not doing this in any of my future projects. Here is an example of what I want:
I want to make the text in the center go left towards the icons and I want the pictures at the bottom left to go to the center-right. I tried messing with this before but the banner always became smaller or the images would get messed up and other things like that. Here is the code of my website:
<!DOCTYPE html>
<html>
<head>
<title>FAQ</title>
<!-- Novo Sans Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght#300&display=swap" rel="stylesheet">
<!-- Crimson Text Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght#1,600&display=swap" rel="stylesheet">
<!-- Architect's Daughter Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-align: center;
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.indicator {
margin-right: 50px;
float: left;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transition: 0.2s ease transform;
}
.collapsible {
color: black;
cursor: pointer;
padding: 18px;
width: 100%;
border: solid thin;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsible.active .indicator {
transform: rotate(45deg);
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
#div2 {
width: 100vw;
position: relative;
margin-top: 290px;
margin-left: -50vw;
height: 100%;
left: 50%;
background-color: rgb(173, 12, 7);
padding-top: 50px;
padding-bottom: 120px;
}
.contactInfo {
text-align: center;
color: white;
}
#cInfo {
padding-right: 1px;
}
#phoneInfo {
margin-top: 55px;
margin-right: 300px;
}
#phoneIcon {
float: left;
margin-top: 30px;
margin-left: 100px;
}
#emailInfo {
margin-top: 55px;
margin-right: 200px;
}
#emailIcon {
float: left;
margin-top: 30px;
margin-left: 100px;
}
#farmer {
float: left;
}
#littleShop {
float: left;
}
</style>
<body>
<div class="logo"><img src="CSS/logo.jpg" id="logo" width="250" height="150"></div>
<nav>
<div style="width: 750px; margin: 0 auto;">
<div id="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Store</li>
<li>FAQ</li>
</ul>
</div>
</div>
</nav>
<link rel="stylesheet" type="text/css" href="CSS/faq.css">
<link rel="stylesheet" type="text/css" href="CSS/new_main_css.css">
<h1>FAQ</h1>
<button class="collapsible" data-toggle=""><b>Questions and Answers</b><i class="arrow indicator"></i></button>
<div class="content">
<p>Lorem Ipsum</p>
</div>
<div id="div2">
<h1 class="contactInfo" id="cInfo">Contact information</h1>
<img src="CSS/phoneIconNew.png" width="40" height="40" id="phoneIcon">
<h2 class="contactInfo" id="phoneInfo">Business Contact: 072 000 000 0000</h2>
<img src="CSS/emailIconNew.png" width="40" height="40" id="emailIcon">
<h2 class="contactInfo" id="emailInfo">Busienss Email: exampleemail#example.com</h2>
<img src="CSS/littleshopnew.jpg" id="littleShop">
<img src="CSS/farmer.png" id="farmer">
</div>
</body>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</html>
JSfiddle link: https://jsfiddle.net/5309uzrd/
I have changed div2 from block to flex
Css
#div2 {
width: 100vw;
position: relative;
margin-top: 290px;
margin-left: -50vw;
height: 100%;
left: 50%;
background-color: rgb(173, 12, 7);
padding-top: 50px;
padding-bottom: 120px;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
#div2 .container{
width: 50%;
}
.contactInfo {
width: 100%;
text-align: center;
color: white;
}
Html
<div id="div2">
<h1 class="contactInfo" id="cInfo">Contact information</h1>
<div class="container">
<img src="CSS/phoneIconNew.png" width="40" height="40" id="phoneIcon">
<h2 class="contactInfo" id="phoneInfo">Business Contact: 072 000 000 0000</h2>
<img src="CSS/emailIconNew.png" width="40" height="40" id="emailIcon">
<h2 class="contactInfo" id="emailInfo">Busienss Email: exampleemail#example.com</h2>
</div>
<div class="container">
<img src="CSS/littleshopnew.jpg" id="littleShop">
<img src="CSS/farmer.png" id="farmer">
</div>
</div>
I'm trying to learn JavaScript + html + css and Python by myself and I'm practicing with a tab layout using divs with p elements inside working as a tab (I know that I can do it with buttons, but I'm proving myself that it can be done with p)
I made JavaScript code to when is clicked the div of every tab in the layout came upfront a div with content related to that tab, but when I click it, lost every style that I made in an external CSS stylesheet and I don't know the reason for that.
This is the html
function toggleMe(e, contenedor) {
var a = document.getElementsByClassName("cont");
var i;
for(i=0;i<a.length;i++) {
a[i].style.display = "none";
}
document.getElementById(contenedor).style.display = "block";
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#contenedor {
width: 800px;
height: 400px;
margin: 0 auto;
}
#tabs {
width: 100%;
display: flex;
border: 1px solid #ddd;
padding: 2px;
}
.tab {
padding: 15px;
cursor: pointer;
}
.tab:hover {
background: #ddd;
}
.cont {
width: 100%;
height: 200px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
border: 1px solid #ddd;
display: none;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/estilo-intento1.css">
<script src="intento1.js"></script>
</head>
<body>
<div id="contenedor">
<div id="tabs">
<div class="tab" onclick="toggleMe(this, 'cont1')"><p>TAB 1</p></div>
<div class="tab" onclick="toggleMe(this, 'cont2')"><p>TAB 2</p></div>
<div class="tab" onclick="toggleMe(this, 'cont3')"><p>TAB 3</p></div>
</div>
<div id="cont1" class="cont"><p>Contenido 1</p></div>
<div id="cont2" class="cont"><p>Contenido 2</p></div>
<div id="cont3" class="cont"><p>Contenido 3</p></div>
</div>
</div>
<script src="intento1.js"></script>
</body>
It looks like initially your cont class DIVs are set as display: flex but when making them visible again in JavaScript you set them as display: block.
You should change the JavaScript to something like this:
document.getElementById(contenedor).style.display = "flex";
Avoid manipulating styles in JS. Toggle a class and leave the styles to the CSS:
function toggleMe(e, contenedor) {
for (let item of document.querySelectorAll(".cont")) {
item.classList.toggle("active", item.id === contenedor);
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#contenedor {
width: 800px;
height: 400px;
margin: 0 auto;
}
#tabs {
width: 100%;
display: flex;
border: 1px solid #ddd;
padding: 2px;
}
.tab {
padding: 15px;
cursor: pointer;
}
.tab:hover {
background: #ddd;
}
.cont {
width: 100%;
height: 200px;
border: 1px solid black;
justify-content: center;
align-items: center;
text-transform: uppercase;
border: 1px solid #ddd;
display: none;
}
.cont.active {
display: flex;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/estilo-intento1.css">
<script src="intento1.js"></script>
</head>
<body>
<div id="contenedor">
<div id="tabs">
<div class="tab" onclick="toggleMe(this, 'cont1')"><p>TAB 1</p></div>
<div class="tab" onclick="toggleMe(this, 'cont2')"><p>TAB 2</p></div>
<div class="tab" onclick="toggleMe(this, 'cont3')"><p>TAB 3</p></div>
</div>
<div id="cont1" class="cont"><p>Contenido 1</p></div>
<div id="cont2" class="cont"><p>Contenido 2</p></div>
<div id="cont3" class="cont"><p>Contenido 3</p></div>
</div>
</div>
<script src="intento1.js"></script>
</body>