Button center layout - javascript

There is a website
$(document).ready(function() {
$('.header__button').click(function(event){
$('.header__button').removeClass('lilac');
$(this).addClass('lilac');
event.target.style.color='#ffffff';
}
);
const getItem = `<div class="cardexample">
<div class="mobileimage">
<img class="mobiles" src="../img/mobileimage.png">
</div>
<div class="content__title">
Iphone 11, почему такой же как и Pro Max, может быть большим в 3 строки вот так
</div>
<div class="video__icon">
<span>
<button class="crashvideo">Краш видео</button>
</span>
<span>
<img class="youtube__icon-play" src="../img/Vector.png">
</span>
<span>
<button class="crashvideo" id="ex2">Краш видео</button>
</span>
</div>
<div class="content__text">
Видео разбор с ответами на самые часто задаваемые вопросы может быть большим в 3 строки, видео разбор с ответами на самые часто задаваемые
</div>
<div class="endlink">
Читать далее
</div>
</div>
`;
if (document.documentElement.clientWidth<640)
{
const getAllItems = () => {
let content = '';
for (let i=0; i<4; i++) {
content+=getItem;
}
return content;
}
const renderAllItems = () => {
document.getElementById('content').innerHTML=getAllItems();
}
renderAllItems();
console.log('Mobile');
}
if ((window.innerWidth>=640) && (window.innerWidth<=1023))
{
let blocks = document.querySelectorAll('.content__article');
for (let block of blocks)
{
block.innerHTML=getItem;
}
console.log('Tablet');
}
if (document.documentElement.clientWidth > 1023)
{
console.log('Desktop');
}
}
)
body {
margin: 0;
padding: 0;
}
:root {
--containerfullwidth: 768;
}
.globalcontainer {
margin-top: 0px;
margin-right: calc((39/var(--containerfullwidth)*100)*1%);
margin-bottom: 0px;
margin-left: calc((39/var(--containerfullwidth)*100)*1%);
}
.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__button {
width: 75px;
height: 30px;
border-radius: 4px;
border-color: #5f3ec0;
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;
overflow: hidden;
/*margin-right: 10%;*/
}
.content {
width: 100%;
}
.cardexample {
width: 100%;
}
.mobileimage img{
max-width: 100%;
height: auto;
}
.mobiles {
max-width: 100%;
}
.content__title {
font-family: TTNorms-Medium;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 21.6px;
margin: 0.3% 15px 0 15px;
}
.crashvideo {
width: 115px;
height: 30px;
border-radius: 4px;
margin-top: 15px;
background-color: #5f3ec0;
color: #ffffff;
}
.video__icon {
margin-left: 15px;
display: flex;
flex-direction: row;
align-items: center;
}
#ex2 {
display: none;
}
.youtube__icon-play {
margin-left: auto;
margin-right: auto;
margin-top: 20.5px;
width: 25px;
height: 18.75px;
align: center;
}
.content__text {
margin-top: 16px;
text-align: left;
margin-left: 15px;
margin-right: 90px;
font-family: TT Norms;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 150%;
/* or 22px */
/* Main text */
color: #cacaca;
}
.endlink {
margin-top: 20px;
margin-left: 15px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 100%;
color: #121212;
}
a {
text-decoration: none;
}
.endlink a {
color: #121212;
}
.endlink a:visited {
color: #800080;
}
.show__more {
width: 345px;
height: 50px;
padding: 40px auto 40px auto;
border-radius: 6px;
background-color: #5f3ec0;
color: #ffffff;
}
.content {
display: grid;
grid-template-areas: 'content__parttext content__parttext'
'content__parttext content__parttext'
'content__parttext content__parttext'
'content__parttext content__parttext';
grid-template-columns: 50% 50%;
}
.content__article {
grid-area: 'content__parttext';
}
<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">
<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="container">
<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" id="content">
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
</div>
</div>
<button class="show__more">Показать еще</button>
<!-- </div> -->
<div class="footer">
<div class="logo__company">
</div>
<div class="contacts">
<div class="contacts__title">
Контакты
</div>
<div class="contacts__telephones">
<div class="telephone1">
+7 (800) 333 32 24
</div>
<div class="telephone2">
+7 (812) 448 68 11
</div>
</div>
<button class="requestcall">
Заказать звонок
</button>
</div>
<div class="internetshop">
<div class="internetshop__title">
Интернет магазин
</div>
<div class="disclosure__arrow">
>
</div>
</div>
<div class="company">
<div class="company__title">
Компания
</div>
<div class="disclosure__arrow">
>
</div>
</div>
<div class="help__to__the__buyer">
<div class="help__to__the__buyer__title">
Помощь покупателю
</div>
<div class="disclosure__arrow">
>
</div>
</div>
<div class="socialnetworks__links">
<div class="socialnetworks__links__title">
Мы в соц. сетях
</div>
<div class="socialnetworks__links-images">
<div class="facebook-image">
<embed src="../img/facebook.svg">
</div>
</div>
</div>
<div class="allrights">
<div class="allrights__text">
© 2020 Все права защищены
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>
It displays as follows
Tell me how to achieve the correct display of the element .show__more. Should display as on https://www.figma.com/file/noqP1gzhrAlGAErPNBgknp/test?node-id=1%3A783 (tablet version)


display: block; margin: auto; should do the trick:
$(document).ready(function() {
$('.header__button').click(function(event){
$('.header__button').removeClass('lilac');
$(this).addClass('lilac');
event.target.style.color='#ffffff';
}
);
const getItem = `<div class="cardexample">
<div class="mobileimage">
<img class="mobiles" src="../img/mobileimage.png">
</div>
<div class="content__title">
Iphone 11, почему такой же как и Pro Max, может быть большим в 3 строки вот так
</div>
<div class="video__icon">
<span>
<button class="crashvideo">Краш видео</button>
</span>
<span>
<img class="youtube__icon-play" src="../img/Vector.png">
</span>
<span>
<button class="crashvideo" id="ex2">Краш видео</button>
</span>
</div>
<div class="content__text">
Видео разбор с ответами на самые часто задаваемые вопросы может быть большим в 3 строки, видео разбор с ответами на самые часто задаваемые
</div>
<div class="endlink">
Читать далее
</div>
</div>
`;
if (document.documentElement.clientWidth<640)
{
const getAllItems = () => {
let content = '';
for (let i=0; i<4; i++) {
content+=getItem;
}
return content;
}
const renderAllItems = () => {
document.getElementById('content').innerHTML=getAllItems();
}
renderAllItems();
console.log('Mobile');
}
if ((window.innerWidth>=640) && (window.innerWidth<=1023))
{
let blocks = document.querySelectorAll('.content__article');
for (let block of blocks)
{
block.innerHTML=getItem;
}
console.log('Tablet');
}
if (document.documentElement.clientWidth > 1023)
{
console.log('Desktop');
}
}
)
body {
margin: 0;
padding: 0;
}
:root {
--containerfullwidth: 768;
}
.globalcontainer {
margin-top: 0px;
margin-right: calc((39/var(--containerfullwidth)*100)*1%);
margin-bottom: 0px;
margin-left: calc((39/var(--containerfullwidth)*100)*1%);
}
.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__button {
width: 75px;
height: 30px;
border-radius: 4px;
border-color: #5f3ec0;
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;
overflow: hidden;
/*margin-right: 10%;*/
}
.content {
width: 100%;
}
.cardexample {
width: 100%;
}
.mobileimage img{
max-width: 100%;
height: auto;
}
.mobiles {
max-width: 100%;
}
.content__title {
font-family: TTNorms-Medium;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 21.6px;
margin: 0.3% 15px 0 15px;
}
.crashvideo {
width: 115px;
height: 30px;
border-radius: 4px;
margin-top: 15px;
background-color: #5f3ec0;
color: #ffffff;
}
.video__icon {
margin-left: 15px;
display: flex;
flex-direction: row;
align-items: center;
}
#ex2 {
display: none;
}
.youtube__icon-play {
margin-left: auto;
margin-right: auto;
margin-top: 20.5px;
width: 25px;
height: 18.75px;
align: center;
}
.content__text {
margin-top: 16px;
text-align: left;
margin-left: 15px;
margin-right: 90px;
font-family: TT Norms;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 150%;
/* or 22px */
/* Main text */
color: #cacaca;
}
.endlink {
margin-top: 20px;
margin-left: 15px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 100%;
color: #121212;
}
a {
text-decoration: none;
}
.endlink a {
color: #121212;
}
.endlink a:visited {
color: #800080;
}
.show__more {
width: 345px;
height: 50px;
display: block; /* added */
margin: auto; /* added */
/* cannot use auto in padding */
/* padding: 40px auto 40px auto; */
border-radius: 6px;
background-color: #5f3ec0;
color: #ffffff;
}
.content {
display: grid;
grid-template-areas: 'content__parttext content__parttext'
'content__parttext content__parttext'
'content__parttext content__parttext'
'content__parttext content__parttext';
grid-template-columns: 50% 50%;
}
.content__article {
grid-area: 'content__parttext';
}
<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">
<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="container">
<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" id="content">
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
</div>
</div>
<button class="show__more">Показать еще</button>
<!-- </div> -->
<div class="footer">
<div class="logo__company">
</div>
<div class="contacts">
<div class="contacts__title">
Контакты
</div>
<div class="contacts__telephones">
<div class="telephone1">
+7 (800) 333 32 24
</div>
<div class="telephone2">
+7 (812) 448 68 11
</div>
</div>
<button class="requestcall">
Заказать звонок
</button>
</div>
<div class="internetshop">
<div class="internetshop__title">
Интернет магазин
</div>
<div class="disclosure__arrow">
>
</div>
</div>
<div class="company">
<div class="company__title">
Компания
</div>
<div class="disclosure__arrow">
>
</div>
</div>
<div class="help__to__the__buyer">
<div class="help__to__the__buyer__title">
Помощь покупателю
</div>
<div class="disclosure__arrow">
>
</div>
</div>
<div class="socialnetworks__links">
<div class="socialnetworks__links__title">
Мы в соц. сетях
</div>
<div class="socialnetworks__links-images">
<div class="facebook-image">
<embed src="../img/facebook.svg">
</div>
</div>
</div>
<div class="allrights">
<div class="allrights__text">
© 2020 Все права защищены
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>

Related

how to loop so that when character reaches certain length it shifts up

I am trying to do a for loop so that when the character limit reaches 21 it shifts up.
The issues, I am running into are as follows:
input stops after a certain amount of presses, which is not what I want.
Every time a line shifts up the next line spaces get wider.
This is what I want the outcome to look like:
Expected result output of screen behaviour with for loop:
|---------------|
|111111111111111|
|111111111111111|
|111111111111111|
|111111111111111|
|---------------|
/*********************
Setting up varlaibles*
**********************/
let result;
let calculation;
let num1;
let num2;
/*****************************************
Function for numbers to display on-screen*
******************************************/
function buttonPress(numbers) {
result = document.querySelector('.answer');
let input = result.innerHTML += numbers
console.log(input)
if (input.length >= 21) {
for (let i = 0; i < input.length; i++) {
result.innerHTML += "\n";
document.querySelector('.answer').style.marginTop = "-1rem";
}
}
}
body {
margin: auto 15rem;
box-sizing: border-box;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.base {
margin-top: 2rem;
background-color: #0C1021;
width: 19.8rem;
height: 40rem;
border-radius: 1.5rem;
}
.header {
display: flex;
flex-direction: row;
}
.time {
font-size: 10px;
color: white;
margin-top: 1rem;
margin-left: 2rem;
}
.icons {
margin-left: 11.3rem;
margin-top: 0.2rem;
}
.icons img {
width: 13px;
margin-top: 10px;
padding-left: 5px;
}
.battery {
filter: brightness(0) invert(1);
}
span {
display: block;
width: 6%;
border-top: 3px solid white;
margin-left: 1rem;
margin-top: 2rem;
}
.hl {
margin-top: 3px;
}
.hl2 {
cursor: pointer;
margin-top: 2px;
}
.calc-header {
display: flex;
flex-direction: row;
}
.calc-header h2 {
position: absolute;
margin-left: 6rem;
color: white;
margin-top: -23px;
}
.screen {
margin-left: 0rem;
/* changed */
margin-top: 149px;
}
.calc {
width: 5px;
color: white;
}
.answer {
color: white;
font-size: 32px;
text-align: right;
/* added */
}
button {
border: none;
cursor: pointer;
}
.row {
margin-top: -359px;
position: absolute;
}
.col {
padding: 1px;
}
.col-op,
.col-op-end,
.col-num {
width: 75.3px;
height: 70px;
}
.col-eq-end {
width: 155px;
height: 68px;
}
.col-op,
.col-op-end {
background-color: #093A52;
color: #01A6CB;
}
.col-num {
background-color: #0B1A2C;
color: white;
}
#border-left {
border-radius: 0px 0px 0px 23px;
}
.col-eq-end {
background-color: #01A6CB;
color: white;
}
#border-right {
border-radius: 0px 0px 23px 0px;
}
<!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" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/main.js" defer></script>
<script src="js/time.js" defer></script>
<title>Calculator</title>
</head>
<body>
<header>
<div class="base">
<div class="header">
<div class="time"></div>
</div>
<div class="dummy-nav">
<span></span>
<span class="hl"></span>
<span class="hl2"></span>
</div>
<div class="calc-header">
<h2>Calculator</h2>
</div>
<div class="screen">
<div class="calc"></div>
<div class="answer"></div>
</div>
</header>
<main>
<div class="row">
<div class="col">
<button class="col-op clear" onclick="buttonPress('c')">C</button>
<button class="col-op" onclick="buttonPress('()')">()</button>
<button class="col-op" onclick="buttonPress('%')">%</button>
<button class="col-op" onclick="buttonPress('/')">/</button>
</div>
<div class="col">
<button class="col-num" onclick="buttonPress(1)">1</button>
<button class="col-num" onclick="buttonPress(2)">2</button>
<button class="col-num" onclick="buttonPress(3)">3</button>
<button class="col-op-end" onclick="buttonPress('x')">x</button>
</div>
<div class="col">
<button class="col-num" onclick="buttonPress(4)">4</button>
<button class="col-num" onclick="buttonPress(5)">5</button>
<button class="col-num" onclick="buttonPress(6)">6</button>
<button class="col-op-end" onclick="buttonPress('+')">+</button>
</div>
<div class="col">
<button class="col-num" onclick="buttonPress(7)">7</button>
<button class="col-num" onclick="buttonPress(8)">8</button>
<button class="col-num" onclick="buttonPress(9)">9</button>
<button class="col-op-end" onclick="buttonPress('-')">-</button>
</div>
<div class="col">
<button class="col-num" id="border-left" onclick="buttonPress(0)">0</button>
<button class="col-num" onclick="buttonPress('.')">.</button>
<button class="col-eq-end" id="border-right" onclick="buttonPress('=')">=</button>
</div>
</div>
</main>
</body>
</html>

Incorporate a function for all the buttons with specific class using vanilla JS

I want to put the function in a loop to show hide all buttons. It works if I use it without a loop on a particular button, but I cannot incorporate it in a loop properly.
It says: Uncaught TypeError: Cannot read properties of undefined (reading 'style')
//jshint esversion: 6
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toLocaleDateString('default', {
day: 'numeric',
month: 'long',
year: 'numeric'
});
var numberOfbuttons = document.querySelectorAll(".r").length;
console.log(numberOfbuttons);
for (i = 0; i < numberOfbuttons; i++) {
document.querySelectorAll(".r")[i].onmouseover = function() {
mouseOver([i]);
};
document.querySelectorAll(".r")[i].onmouseout = function() {
mouseOut([i]);
};
}
function mouseOut(key) {
document.querySelectorAll(".r")[key].style.opacity = 0;
}
function mouseOver(key) {
document.querySelectorAll(".r")[key].style.opacity = 1;
}
* {
margin: 0;
padding: 0;
}
body {
background: url(img/bg4.jpg);
background-size: cover;
}
img {
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 8px 8px 13px #222;
border: solid 3px #606f46;
}
span {
background: #beebb3;
border-color: #606f46;
border-radius: 22px 0 22px 0;
padding: 2px;
border-style: solid;
margin-top: 5px;
box-shadow: 4px 4px 13px #222;
width: 145px;
color: green;
}
h1 {
/* width: 580px; */
font-family: 'Sofia', cursive;
font-size: 3.4rem;
text-align: center;
margin: 10px auto;
padding-top: 15px;
padding-bottom: 15px;
}
h2 {
font-family: 'Sofia', cursive;
font-size: 2rem;
}
#btn1 {
opacity: 0;
}
#btn2 {
opacity: 0;
}
.r {
background-image: url('img/refresh2.png');
background-size: contain;
}
.refresh {
outline: none;
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
right: 3px;
top: 108px;
}
#no1 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
}
#no2 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 9px;
}
#no3 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 8px;
}
#no4 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 9px;
}
.container1 {
width: 580px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
text-align: center;
margin: auto;
}
.container2 {
width: 700px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.container3 {
width: 1100px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.container4 {
width: 1300px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.tree {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
position: relative;
}
.white_bg {
background-color: white;
}
.container1_row4 {
display: flex;
justify-content: center;
margin-left: 240px;
position: relative;
right: 10px;
}
.container2_row4 {
display: flex;
justify-content: center;
margin-left: 35px;
margin-right: 150px;
position: relative;
right: 25px;
}
.container3_row4 {
display: flex;
justify-content: center;
margin-right: 240px;
}
.level1 {
height: 3px;
width: 110px;
border-style: hidden solid solid solid;
border-width: thick;
margin-left: 230px;
}
.oblique1 {
width: 88px;
transform: rotate(-30deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.oblique2 {
width: 88px;
transform: rotate(30deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.oblique_row {
display: flex;
margin-left: 200px;
margin-top: 17px;
}
.line_container2 {
display: flex;
}
.first_arrow_row2 {
position: relative;
right: 125px;
}
.second_arrow_row2 {
position: relative;
right: 150px;
}
.second_arrow_row2>.oblique_row>.oblique1 {
border-style: hidden;
}
.line_container3 {
display: flex;
}
.line2 {
width: 45px;
transform: rotate(90deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.first_arrow_row3 {
position: relative;
right: 165px;
}
.second_arrow_row3 {
position: relative;
right: 295px;
}
.third_arrow_row3 {
position: relative;
right: 295px;
}
.third_arrow_row3>.oblique_row>.line2 {
position: relative;
left: 70px;
}
.second_arrow_row3>.oblique_row>.line2 {
position: relative;
left: 70px;
}
.first_arrow_row3>.oblique_row {
position: relative;
right: 25px
}
.first_arrow_row3>.level1 {
position: relative;
left: 60px
}
.first_arrow_row3>.oblique_row>.oblique1 {
width: 155px;
transform: rotate(344deg);
}
.first_arrow_row3>.oblique_row>.oblique2 {
width: 155px;
transform: rotate(16deg);
}
#datetime {
text-align: center;
}
<link rel="shortcut icon" href="img/family-tree.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css">
<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=Sofia&display=swap" rel="stylesheet">
<div class="container1">
<h1>_ _ _ Family tree _ _ _</h1>
<div id="no1">
<div class="tree homer">
<img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
<button id="btn1" class="refresh r"> </button>
<span>
Homer Simpson
</span>
</div>
<div class="tree marge">
<img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
<button id="btn2" class="refresh r"></button>
<span>
Marge Simpson
</span>
</div>
</div>
<div class="line_container1">
<div class="level1"></div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
</div>
<div class="container2">
<div id="no2">
<div class="tree">
<img src="https://openpsychometrics.org/tests/characters/test-resources/pics/S/2.jpg">
<button id="btn3" class="refresh r"></button>
<span>
Bart Simpson
</span>
</div>
<div class="tree">
<img src="https://mella187.github.io/Cartoon-Hero/img/lisa-avatar.jpg">
<button id="btn4" class="refresh r"></button>
<span>
Lisa Simpson
</span>
</div>
<div class="tree">
<img src="https://i.pinimg.com/originals/e5/4a/bc/e54abc44b68d6b2770696b789b20dafa.png">
<button id="btn5" class="refresh r"></button>
<span>
Abraham Simpson
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://icons.iconarchive.com/icons/jonathan-rey/simpsons/256/Maggie-Simpson-icon.png">
<button id="btn6" class="refresh r"></button>
<span>
Maggie Simpson
</span>
</div>
</div>
<div class="line_container2">
<div class="first_arrow_row2">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
<div class="second_arrow_row2">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
</div>
</div>
<div class="container3">
<div id="no3">
<div class="tree">
<img class="white_bg" src="https://cdn.quotesgram.com/img/7/98/1464708000-Ned_Flanders.png">
<button id="btn7" class="refresh r"></button>
<span>
Ned Flanders
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://i.pinimg.com/originals/b7/4f/ae/b74faea8de35d22b703b6ae32f891a92.png">
<button id="btn8" class="refresh r"></button>
<span>
Elizabeth Hoover
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/3/3a/Seymour_Skinner.png/revision/latest/top-crop/width/360/height/360?cb=20200804144332&path-prefix=protagonist">
<button id="btn9" class="refresh r"></button>
<span>
Seymour Skinner
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://www.personality-database.com/profile_images/20160.png">
<button id="btn10" class="refresh r"></button>
<span> Edna Krabappel
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/b/b4/Barnild_Gumble.png/revision/latest/top-crop/width/360/height/360?cb=20160402113506&path-prefix=protagonist">
<button id="btn11" class="refresh r"></button>
<span>
Barney Gumble
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/simpsons/images/d/d5/Patty_Bouvier1.png/revision/latest/top-crop/width/360/height/360?cb=20201222215313">
<button id="btn12" class="refresh r"></button>
<span>
Selma Bouvier
</span>
</div>
</div>
<div class="line_container3">
<div class="first_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="line2"></div>
<div class="oblique2"></div>
</div>
</div>
<div class="second_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="line2"></div>
</div>
</div>
<div class="third_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="line2"></div>
</div>
</div>
</div>
</div>
<div class="container4">
<div id="no4">
<div class="container1_row4">
<div class="tree">
<img src="https://www.canncentral.com/wp-content/uploads/2019/09/Kent_Brockman-Cannabis-1.jpg">
<button id="btn13" class="refresh r"></button>
<span>
Kent Brockman
</span>
</div>
<div class="tree">
<img src="https://untappd.akamaized.net/site/beer_logos_hd/beer-1158277_7220b_hd.jpeg">
<button id="btn14" class="refresh r"></button>
<span>
Mayor Quimby
</span>
</div>
<div class="tree">
<img src="https://i.pinimg.com/474x/8e/a1/2b/8ea12bd79870a03994fbf65f63baaa92--school-pictures-sideshow.jpg">
<button id="btn15" class="refresh r"></button>
<span>
Sideshow Bob
</span>
</div>
</div>
<div class="container2_row4">
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/8/81/Wiggum_with_coffee.png/revision/latest/top-crop/width/360/height/360?cb=20160322214733&path-prefix=protagonist">
<button id="btn16" class="refresh r"></button>
<span>
Clancy Wiggum
</span>
</div>
</div>
<div class="container3_row4">
<div class="tree">
<img src="https://www.kindpng.com/picc/m/394-3940977_los-simpson-nikki-mckenna-hd-png-download.png">
<button id="btn17" class="refresh r"></button>
<span>
Nikki McKenna
</span>
</div>
<div class="tree">
<img src="https://topicimages.mrowl.com/large/owl/thesimpsons/characters/milhousevanhou_1.jpg">
<button id="btn18" class="refresh r"></button>
<span>
Milhouse Van Houten
</span>
</div>
</div>
</div>
</div>
<div class="datetime">
<h2 id="datetime"></h2>
</div>
<!-- script loaded here -->
I want to put the function in a loop to show hide all buttons. It works if I use it without a loop on a particular button, but I cannot incorporate it in a loop properly.
It says: Uncaught TypeError: Cannot read properties of undefined (reading 'style')

your calling it by mouseOut([i]); instead of mouseOut(i); (no need to wrap it as an array)
and the i changes in the loop each time, so at the end you have i == 18. and when the event callback is called the i is still 18. you can do something like document.querySelectorAll(".r")[i].onmouseover = mouseOver.bind(null, i);
Probably if you convert the NodeList to a proper Array the code is cleaner and less prone to errors. something like:
Array.from(document.querySelectorAll(".r"))
.forEach(el => {
// I'd rather user el.addEventListener("mouseover",...
el.onmouseover = () => el.style.opacity = 0;
el.onmouseout = () => el.style.opacity = 1;
});

z index 1 doesn't stop modal from pushing down index 0 content

Hi all I have a modal that I made, I set it to have a z-index of 1 and the component its inside of has a z-index of 0 however the modal still stretches the component when it pops up even though it sits ontop of the content like you see in the image below
I would like to make the modal overlay without stretching this component down as it pushes all the other content down which I want to avoid I'm not sure of the best way to accomplish this because the component in purple is reused across multiple views inside my `vue router. I will show the code for my component :) any suggestions on how to accomplish this are appreciated
<template>
<div id="topbarContainer" v-bind:class="{ modalbackground: modal }">
<!-- TOPBAR -->
<div class="topbar">
<h6 id="dashboard">{{name}}</h6>
<div class="searchContainer">
<b-icon-search></b-icon-search>
<small>search</small>
<input class="searchbar" type="text" />
<small class="searchbtn">H</small>
</div>
<div id="topbarRightdiv">
<img class="topbarButtons" src="../assets/superdash/chat-1.png" width="30px" height="30px" />
<img class="topbarButtons" src="../assets/superdash/notifications.png" width="30px" height="30px" />
<img class="topbarButtons" src="../assets/superdash/photo.png" width="30px" height="30px" />
<p id="profileName" #click="showModal">Hemlin <small id="profileArrow">▼</small></p>
</div>
<!--modal -->
<div v-if="this.modal==true" class="modal-content">
<section class="modalSection ModalsectionHeader">
<img class="modalImg" src="../assets/topbar/profile_icons-2.svg"/> <p id="darkmodeText">Dark Mode</p> <img class="modalImg" src="../assets/topbar/togle.svg" #click="toggleDarkmode" v-if="darkmode==true"/> <img class="modalImg" src="../assets/topbar/togle.svg" #click="toggleDarkmode" v-if="darkmode==false"/>
</section>
<section class="modalSection">
<img class="modalImg" src="../assets/topbar/profile_icons.svg"/> <p>Profile</p> <small>></small>
</section>
<section class="modalSection">
<img class="modalImg" src="../assets/topbar/profile_icons-1.svg"/> <p>Wallet</p> <small>></small>
</section>
<section class="modalSection">
<img class="modalImg" src="../assets/topbar/profile_icons-3.svg"/> <p>Saved</p> <small>></small>
</section>
<section class="modalSection">
<img class="modalImg" src="../assets/topbar/profile_icons-4.svg"/> <p>Get Reports</p> <small>></small>
</section>
</div>
</div>
<!-- TOPBAR -->
</div>
</template>
<script>
export default {
name: 'Topbar',
props: ['name'],
data:function(){
return{
modal: false,
darkmode: false,
}
},
methods:{
showModal(){
console.log("clicked")
this.modal = !this.modal
}
,toggleDarkmode(){
console.log('darkmode')
this.darkmode = !this.darkmode
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#topbarContainer{
z-index: 0;
}
.modalbackground{
background-color: rgba(128, 0, 128, 0.555);
}
.topbar{
display: flex;
font-size: 12px;
font-family: 'Noto Sans JP', sans-serif;
}
#topbarRightdiv{
display: flex;
margin-left: 9em;
}
#topbarRightdiv p{
display: flex;
}
#profileName{
font-size:14px;
padding-top: 1em;
}
#profileName:hover{
cursor: pointer;
}
#profileArrow{
color: #39b3fac5;
}
#profileArrow:hover{
color: #39d3fa;
cursor: pointer;
}
#dashboard{
margin-top: 1em;
padding-left: 1em;
margin-right: 5em;
}
.searchContainer{
margin-top:1em;
margin-left: 1em;
margin-right:3em;
width: 60%;
border-style: none;
border-radius: 13px;
background-color: white;
height: 2em;
box-shadow: 0 1px 2px #88888877;
}
.searchbar{
border-style: none;
border-radius: 13px;
width: 85%;
padding-right: 1em;
}
.searchbtn{
margin-left: .5em;
color: rgb(73, 79, 90);
border-left: 1px rgb(185, 187, 204) solid;
padding-left:1em;
}
.topbarButtons{
margin: 1em;
border-radius: 100%;
background-color: #87b9fa1a;
}
/* Modal Content/Box */
.modal-content {
z-index: 1;
position: relative;
right: 50px;
width: 30em;
height: 20em;
background-color: #fefefe;
padding: 20px;
border: 1px solid #888;
}
.modalSection{
padding-top: .5em;
display: flex;
width: 100%;
justify-content: space-between;
}
.ModalsectionHeader{
padding-bottom: 1em;
margin-bottom: 1em;
border-bottom: 1px solid rgba(97, 95, 95, 0.267);
}
#darkmodeText{
margin: .2em
}
.modalImg{
width: 25px;
height: 25px;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>

Try to change the position to absolute :
.modal-content {
z-index: 1;
position: relative; <---HERE to absolute
new Vue({
el:'#demo',
props: ['name'],
data:function(){
return{
modal: false,
darkmode: false,
}
},
methods:{
showModal(){
console.log("clicked")
this.modal = !this.modal
},
toggleDarkmode(){
console.log('darkmode')
this.darkmode = !this.darkmode
}
}
})
#topbarContainer{
z-index: 0;
}
.modalbackground{
background-color: rgba(128, 0, 128, 0.555);
}
.topbar{
display: flex;
font-size: 12px;
font-family: 'Noto Sans JP', sans-serif;
}
#topbarRightdiv{
display: flex;
margin-left: 9em;
}
#topbarRightdiv p{
display: flex;
}
#profileName{
font-size:14px;
padding-top: 1em;
}
#profileName:hover{
cursor: pointer;
}
#profileArrow{
color: #39b3fac5;
}
#profileArrow:hover{
color: #39d3fa;
cursor: pointer;
}
#dashboard{
margin-top: 1em;
padding-left: 1em;
margin-right: 5em;
}
.searchContainer{
margin-top:1em;
margin-left: 1em;
margin-right:3em;
width: 60%;
border-style: none;
border-radius: 13px;
background-color: white;
height: 2em;
box-shadow: 0 1px 2px #88888877;
}
.searchbar{
border-style: none;
border-radius: 13px;
width: 85%;
padding-right: 1em;
}
.searchbtn{
margin-left: .5em;
color: rgb(73, 79, 90);
border-left: 1px rgb(185, 187, 204) solid;
padding-left:1em;
}
.topbarButtons{
margin: 1em;
border-radius: 100%;
background-color: #87b9fa1a;
}
/* Modal Content/Box */
.modal-content {
z-index: 1;
position: absolute;
right: 50px;
width: 30em;
height: 20em;
background-color: #fefefe;
padding: 20px;
border: 1px solid #888;
}
.modalSection{
padding-top: .5em;
display: flex;
width: 100%;
justify-content: space-between;
}
.ModalsectionHeader{
padding-bottom: 1em;
margin-bottom: 1em;
border-bottom: 1px solid rgba(97, 95, 95, 0.267);
}
#darkmodeText{
margin: .2em
}
.modalImg{
width: 25px;
height: 25px;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
<div id="topbarContainer" v-bind:class="{ modalbackground: modal }">
<!-- TOPBAR -->
<div class="topbar">
<h6 id="dashboard">{{name}}</h6>
<div class="searchContainer">
<b-icon-search></b-icon-search>
<small>search</small>
<input class="searchbar" type="text" />
<small class="searchbtn">H</small>
</div>
<div id="topbarRightdiv">
<img class="topbarButtons" src="https://picsum.photos/30" width="30px" height="30px" />
<img class="topbarButtons" src="https://picsum.photos/30" width="30px" height="30px" />
<img class="topbarButtons" src="https://picsum.photos/30" width="30px" height="30px" />
<p id="profileName" #click="showModal">Hemlin <small id="profileArrow">▼</small></p>
</div>
<!--modal -->
<div v-if="this.modal==true" class="modal-content">
<section class="modalSection ModalsectionHeader">
<img class="modalImg" src="https://picsum.photos/30"/> <p id="darkmodeText">Dark Mode</p> <img class="modalImg" src="https://picsum.photos/30" #click="toggleDarkmode" v-if="darkmode==true"/> <img class="modalImg" src="https://picsum.photos/30" #click="toggleDarkmode" v-if="darkmode==false"/>
</section>
<section class="modalSection">
<img class="modalImg" src="https://picsum.photos/30"/> <p>Profile</p> <small>></small>
</section>
<section class="modalSection">
<img class="modalImg" src="https://picsum.photos/30"/> <p>Wallet</p> <small>></small>
</section>
<section class="modalSection">
<img class="modalImg" src="https://picsum.photos/30"/> <p>Saved</p> <small>></small>
</section>
<section class="modalSection">
<img class="modalImg" src="https://picsum.photos/30"/> <p>Get Reports</p> <small>></small>
</section>
</div>
</div>
<!-- TOPBAR -->
</div>
</div>

You have an error on writing toggleDarkMode(), you wrote ,toggleDarkMode(). Move up the comma (,).

How to Change button color on the click?

There is a website like this :
It is necessary that when you click on one button, the color of this button becomes lilac, and the previously selected buttons become white.
$(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', changeColor);
});
}
)
body {
margin: 0;
padding: 0;
}
.globalcontainer {
margin-top: 0px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 15px;
}
.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 {
border-radius: 3px;
background-color: #fff;
}
<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>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>
But as a result, after clicking the mouse, the button color does not change to lilac. Tell me how to change the color of the button on click.

$(document).ready(function() {
$('.header__button').click(function(){
$('.header__button').removeClass('lilac');
$(this).addClass('lilac');
});
});
body {
margin: 0;
padding: 0;
}
.globalcontainer {
margin-top: 0px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 15px;
}
.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 {
border-radius: 3px;
background-color: #fff;
}
.lilac {
background-color: #5f3ec0;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<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>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
</div>
</div>

Aligning a youtubeicon to the center

There is a page Site view. There is a code (I want to center the image <img class="youtube__icon-play" src="../img/Vector.png">)
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%;*/
}
.content {
width: 100%;
}
.cardexample {
width: 100%;
}
.mobileimage img{
max-width: 100%;
height: auto;
}
.mobiles {
max-width: 100%;
}
.content__title {
font-family: TTNorms-Medium;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 21.6px;
margin: 0.3% 15px 0 15px;
}
.crashvideo {
width: 115px;
height: 30px;
border-radius: 4px;
margin-top: 15px;
background-color: #5f3ec0;
color: #ffffff;
}
.youtube__icon-play {
margin-left: 30.5px;
margin-top: 20.5px;
align: center;
}
<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 class="mobiles" src="../img/mobileimage.png">
</div>
<div class="content__title">
Iphone 11, почему такой же как и Pro Max, может быть большим в 3 строки вот так
<span class="video__icon">
<span>
<button class="crashvideo">Краш видео</button>
</span>
<span>
<img class="youtube__icon-play" src="../img/Vector.png">
</span>
</span>
</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>
It is displayed as in the picture below (I want to center the image <img class="youtube__icon-play" src="../img/Vector.png">)
Youtube icon
How to achieve the display as on the 1st link? (I want to center the button)

Your images are not showing so its hard to tell exactly.. but to center the icon in line with the button inside video_icon try this
.video__icon {
display: flex;
align-items: center;
}

Consider changing from:
.youtube__icon-play {
margin-left: 30.5px;
margin-top: 20.5px;
align: center;
}
To:
.youtube__icon-play {
margin-left: auto;
margin-right: auto;
margin-top: 20.5px;
width: 50%;
align: center;
}

Categories