Как я могу исправить положение кнопок на моем веб-сайте html, css, js, php? ⇐ Html

[Anonymous]

У меня есть веб-сайт, на котором есть изображения и кнопки. Проблема в том, что когда я идеально выровнял кнопки, их положение меняется в разных разрешениях, и для меня это выглядит хорошо, но для кого-то на ноутбуке это выглядит ужасно. То же самое и при попытке сделать это для мобильного разрешения (все просто портится).Хорошее размещение
Плохое размещениеНа мобильных устройствах размещение еще хуже

Код: Выделить всё

document.addEventListener('DOMContentLoaded', function() {

// Array of background elements
var backgroundElements = [
'bg_png', 'bg_png3', 'bg_png4',
];

// Function to set background styles
function setBackgroundStyles(elementId, imageUrl, zIndex) {
var bgElement = document.getElementById(elementId);
bgElement.style.position = 'absolute';
bgElement.style.top = '0';
bgElement.style.left = '0';
bgElement.style.width = '100%';
bgElement.style.height = '100%';

bgElement.style.backgroundImage = 'url("' + imageUrl + '")';
bgElement.style.backgroundSize = 'cover';
bgElement.style.backgroundPosition = 'center top';
bgElement.style.zIndex = zIndex;
}

// Hide the GIF after a delay (e.g., 3 seconds)
setTimeout(function() {
setBackgroundStyles('bg_png1', 'https://i.imgur.com/IlmUjKY.png', '-15');
setBackgroundStyles('bg_png3', 'https://i.imgur.com/NsTp7fS.png', '-15');
setBackgroundStyles('bg_png4', 'https://i.imgur.com/5ymR224.png', '-16'); // Lower z-index for bg_png4
// Repeat for the remaining elements

}, 3000);  // Adjust the delay as needed
});

Код: Выделить всё

/* Resetting default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

#gifContainer {
display: none;
z-index: 2;
}

body,
html {
height: 100%;
font-family: "Poppins", sans-serif;
font-weight: 900;
font-style: normal;
}

button {
font-family: inherit;
font-weight: inherit;
font-style: inherit;
}

/* General background layer styles */
.background-layer {
position: absolute;
width: 100%;
height: 100%;
}

.mobile-message {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
color: white;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
display: none;
/* initially hidden */
}

@media (max-width: 768px) {
.mobile-message {
display: flex;
}

.background-layer,
#content {
display: none;
}
}

#bg_png {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #282828;
z-index: -17;
}

/* Content layer styles */
#content {
position: relative;
z-index: 1;
}

/* Styling the navbar and buttons */
#navbar {

position: absolute;
top: 20px;
right: 20px;
}

#learnmore {
position: absolute;
top: 690px;
right: 430px;
}

.nav-button {
/* Text Styles */
margin-right: 22px;
color: #ff4e00;
font-size: 20px;
text-decoration: none;
font-weight: bold;
padding: 10px 20px;
border: none;
border-radius: 25px;
position: relative;
overflow: hidden;

/* Dark Purple Background */
background: #FFFFFF;

/* Shadow Effect */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

/* Transition for Hover Effect */
transition: background 1s ease;
cursor: pointer;
top: -3px;
width: 150px;
height: 45px;
}

.nav-button:hover {
/* Hover Effect: Lighter Background */
background: #282828;

/* Hover Effect: Lift Button */
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.nav-button2 {
/* Text Styles */
margin-right: 50px;
right: 3px;
color: #ff4e00;
font-size: 20px;
text-decoration: none;
font-weight: bold;
padding: 10px 20px;
border: none;
border-radius: 25px;
position: relative;
overflow: hidden;

/* Dark Purple Background */
background: #FFFFFF;

/* Shadow Effect */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

/* Transition for Hover Effect */
transition: background 1s ease;
cursor: pointer;
top: -3px;
width: 150px;
height: 45px;
}

.nav-button2:hover {
/* Hover Effect: Lighter Background */
background: #282828;

/* Hover Effect: Lift Button */
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.nav-button3 {
/* Text Styles */
margin-right: 50px;
right: 32px;
color: #FFFFFF;
font-size: 20px;
text-decoration: none;
font-weight: bold;
padding: 10px 20px;
border: none;
border-radius: 25px;
position: relative;
overflow: hidden;

/* Dark Purple Background */
background: #ff4e00;

/* Shadow Effect */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

/* Transition for Hover Effect */
transition: background 1s ease;
cursor: pointer;
top: -3px;
width: 150px;
height: 45px;
}

.nav-button3:hover {
/* Hover Effect: Lighter Background */
background: #282828;

/* Hover Effect: Lift Button */
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.nav-button4 {
/* Text Styles */
right: 32px;
top: 620px;
color: #ff4e00;
font-size: 20px;
text-decoration: none;
font-weight: bold;
padding: 10px 20px;
border: none;
border-radius: 25px;
position: relative;
overflow: hidden;

/* Dark Purple Background */
background: #FFFFFF;

/* Shadow Effect */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

/* Transition for Hover Effect */
transition: background 1s ease;
cursor: pointer;
top: -3px;
width:  175px;
height: 45px;
}

.nav-button4:hover {
/* Hover Effect: Lighter Background */
background: #282828;

/* Hover Effect: Lift Button */
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
.dropdown-content {
width: 80%;
/* On smaller screens, the dropdown takes a larger percentage of the width */
}
}

Код: Выделить всё

  

We are sorry. This site is currently unavailable on mobile.

SUPPORT[/b][b]    ABOUT[/b][b]


LEARN MORE[/b]

Я пробовал разные положения: абсолютное, относительное, добавление @media чтобы исправить это для разных разрешений, и у меня ничего не получилось. Надеюсь, вы, ребята, поможете мне добиться этого.

Подробнее здесь: https://stackoverflow.com/questions/779 ... hp-website