Веб-сайт не работает должным образом на разных устройствах и проблемы с отзывчивостью [закрыто] ⇐ CSS

[Anonymous]

У меня возникли проблемы с тем, что мой сайт некорректно работает на разных устройствах. После внесения нескольких изменений сайт появляется с элементами, помеченными «элемент 0», «элемент 1» и т. д. после нижнего колонтитула. Кроме того, некоторые пользователи, которых я попросил протестировать сайт, даже не могут его открыть.
Я внес некоторые изменения в CSS и JavaScript с помощью ИИ, но я Я все еще сталкиваюсь с проблемами. Буду признателен за любую помощь в устранении этих проблем и улучшении отзывчивости сайта на всех устройствах.

Это CSS
#spinner {
opacity: 0;
visibility: hidden;
transition: opacity 0.8s ease-out, visibility 0s linear 0.5s;
z-index: 99999;
}
#spinner.show {
transition: opacity 0.8s ease-out, visibility 0s linear 0s;
visibility: visible;
opacity: 1;
}
.back-to-top {
position: fixed;
right: 30px;
bottom: 30px;
display: flex;
width: 58px;
height: 58px;
align-items: center;
justify-content: center;
z-index: 99;
background-color: #a50808;
color: #fff;
transition: background-color 0.5s, color 0.5s;
}
.back-to-top:hover {
background-color: #0056b3;
color: #fff;
}
.btn {
text-transform: uppercase;
font-weight: 500;
transition: 0.5s;
}
.btn.btn-primary {
box-shadow: inset 0 0 0 0 #083be2;
}
.btn.btn-primary:hover {
box-shadow: inset 200px 0 0 0 #083be2 !important;
color: #fff !important;
}
.btn.btn-dark {
box-shadow: inset 0 0 0 0 #083be2;
}
.btn.btn-dark:hover {
box-shadow: inset 200px 0 0 0 #025e33;
color: #225202 !important;
}
.navbar .navbar-nav {
padding: 15px 0;
}
.navbar .navbar-nav .nav-link {
padding: 15px;
color: var(--bs-white);
font-weight: 500;
font-size: 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
outline: 0;
transition: 0.5s;
}
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:hover {
color: #0f4aee;
transition: 0.5s;
}
@media (max-width: 768px) {
.navbar-brand img {
width: 75px;
height: 75px;
}
}
.navbar-toggler {
background: var(--bs-secondary);
color: var(--bs-light) !important;
padding: 5px 12px;
border: 2px solid #083be2 !important;
}
.carousel-item {
position: relative;
}
.carousel-item::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
background: rgba(0, 0, 0, 0.377);
}
.carousel-caption {
height: 100%;
display: flex;
align-items: center;
text-align: start;
z-index: 1;
}
.carousel-control-prev {
width: 80px;
height: 60px;
position: absolute;
top: 50%;
left: 0;
background: #083be2;
border-radius: 0 30px 30px 0;
transition: 0.5s;
opacity: 1;
}
.carousel-control-next {
width: 80px;
height: 60px;
position: absolute;
top: 50%;
right: 0;
background: #083be2;
border-radius: 30px 0 0 30px;
transition: 0.5s;
opacity: 1;
}
#carouselId .carousel-indicators li {
width: 24px;
height: 24px;
background: var(--bs-dark);
border: 2px solid #083be2;
border-radius: 24px;
margin: 0 10px 30px 10px;
}
#carouselId .carousel-indicators li.active {
background: #04ff64 !important;
}
@media (max-width: 768px) {
.carousel-item {
width: 100%;
height: 400px;
}
.carousel-item img {
height: 400px;
}
.carousel-control-next,
.carousel-control-prev {
display: none;
}
}
.about-img {
width: 100%;
height: 70%;
position: relative;
padding: 30px;
overflow: hidden;
}
.about-img::before {
content: "";
width: 100%;
height: 40%;
background: #2341ec;
position: absolute;
top: 0;
left: 0;
z-index: 1;
border-radius: 10px;
}
.about-img::after {
content: "";
width: 100%;
height: 70%;
background: #1f5e37;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
border-radius: 10px;
}
.about-img img {
position: relative;
z-index: 2;
border-radius: 10px;
}
@keyframes mymove {
from {
top: -202px;
}
to {
top: 102%;
}
}
.about-item h5 {
margin-bottom: 20px;
padding: 10px 20px;
background-color: #f8f9fa;
border-radius: 5px;
display: inline-block;
}
.about-item h1 {
margin-bottom: 20px;
}
.about-item p {
margin-bottom: 20px;
line-height: 1.6;
}
.about-item .row {
margin-top: 30px;
}
@media (max-width: 768px) {
.about-img,
.about-item {
text-align: center;
}
.about-img img {
width: 100%;
height: auto;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row .col-3 {
flex: 1 1 45%; /* Ajuste a largura conforme necessário */
margin-bottom: 20px;
}
}
.contact-link a h5,
.contact-link a i,
.contact-link a.h5 {
transition: 0.5s;
}
.contact-link a h5:hover,
.contact-link a i:hover,
.contact-link a.h5:hover {
color: #083be2 !important;
}

.footer {
background: linear-gradient(rgba(3, 67, 110, 0.945), rgba(0, 14, 8, 0.7)), url(https://zedacalmacalçadas.pt/img/fotoprincipal.webp) center center no-repeat;
background-size: cover;
color: rgba(255, 255, 255, 0.7);
margin-top: 6rem;
}

.footer-item,
.footer-item a {
color: rgba(255, 255, 255, 0.7);
text-transform: capitalize;
}
.copyright .copyright-btn {
display: flex;
align-items: center;
justify-content: center;
}
.copyright .copyright-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.whatsapp-icon {
background-color: #25d366;
color: #fff;
}
.whatsapp-icon:hover {
background-color: #0b682d;
color: #fff;
}
.email-icon {
color: #007bff;
background-color: transparent;
}
.email-icon:hover {
color: #0056b3;
}
.back-to-top {
background-color: #a50808;
color: #fff;
}
.back-to-top:hover {
background-color: #0056b3;
color: #fff;
}
.navbar-bg {
background-color: #a76e58;
}
.email-icon {
font-size: 1.5em;
background-color: transparent;
}
.email-container {
margin-top: 1px;
}
.email-text {
margin-left: 15px;
}
.copyright .text-md-end small {
font-size: 0.6em;
}
.about-item h5 {
margin-bottom: 20px;
padding: 10px 20px;
background-color: #f8f9fa;
border-radius: 5px;
display: inline-block;
}
.about-item h1 {
margin-bottom: 20px;
}
.about-item p {
margin-bottom: 20px;
line-height: 1.6;
}
.about-item .row {
margin-top: 30px;
}

@font-face {
font-family: 'FontAwesome';
src: url('https://cdnjs.cloudflare.com/ajax/libs/ ... -900.woff2') format('woff2'),
url('https://cdnjs.cloudflare.com/ajax/libs/ ... d-900.woff') format('woff');
font-display: swap;
}

@font-face {
font-family: 'FontAwesomeBrands';
src: url('https://cdnjs.cloudflare.com/ajax/libs/ ... -400.woff2') format('woff2'),
url('https://cdnjs.cloudflare.com/ajax/libs/ ... s-400.woff') format('woff');
font-display: swap;
}

.animated {
animation-fill-mode: both;
}

.footer {
position: relative;
z-index: 1;
}

One of the pages html -



x



[*]




























{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "x",
"image": "https://x/img/logotipofinalv2.png",
"@id": "https://x/index.html",
"url": "https://x",
"telephone": "+x",
"description": "x"
}



.navbar-brand img {
width: 75px;
height: auto;
}

@media (max-width: 768px) {
.navbar-brand img {
width: 75px;
height: auto;
}
}

.footer-item img {
width: 175px;
height: auto;
}

@media (max-width: 768px) {
.footer-item img {
width: 100%;
height: auto;
}
}

img {
max-width: 100%;
height: auto;
}















src="img/logotipofinalv2.webp" alt="Logotipo da Empresa" width="75" height="75" style="height: auto;" srcset="img/logotipofinalv2.webp 1x, img/logotipofinalv2@2x.webp 2x, img/logotipofinalv2@3x.webp 3x">







Home
Acerca
Serviços
Contatos

• 
  

Transformando ruas em passarelas
Saiba mais..







x
Porque até o chão merece um upgrade!
Saiba mais..







x
x
Saiba mais..







Previous



Next
















Cada pedra é cortada com dedicação e precisão.

Links úteis

Acerca
Contatos
Serviços

Contate-me

+111

[url=mailto:11]

[/url]
x











x

Designed By HTML Codex
Distributed By ThemeWagon










WhatsApp Modal


Conteúdo do modal.

Fechar





















and for ending the Javascript - (function ($) {
"use strict";

// Spinner
var spinner = function () {
setTimeout(function () {
if ($('#spinner').length > 0) {
$('#spinner').removeClass('show');
}
}, 1);
};
spinner();

// Back to top button
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('.back-to-top').fadeIn('slow');
} else {
$('.back-to-top').fadeOut('slow');
}
});
$('.back-to-top').click(function () {
$('html, body').animate({scrollTop: 0}, 300, 'easeInOutExpo');
return false;
});

new WOW().init();

// Código adicional
document.addEventListener('DOMContentLoaded', function() {
const servicosContainer = document.getElementById('servicos');
const servicoSelect = document.getElementById('servico-select');
const tipoMetrosSelect = document.getElementById('tipo-metros');
const metrosInput = document.getElementById('metros');
const calcularButton = document.getElementById('calcular');
const resultado = document.getElementById('resultado');

if (servicosContainer && servicoSelect && tipoMetrosSelect && metrosInput && calcularButton && resultado) {
const fatoresDeConversao = {
'Vidraço 4x4': 17,
'Vidraço 5x7': 12,
'Vidraço 10x11': 9 // Adicione o fator de conversão para o novo serviço
};

const atualizarServicos = () => {
servicoSelect.innerHTML = Array.from(servicosContainer.querySelectorAll('.servico'))
.map(servico => {
const titulo = servico.querySelector('.card-title').textContent;
return `${titulo}`;
}).join('');
};

const calcularPreco = () => {
const servicoSelecionado = servicoSelect.value;
const tipoMetrosSelecionado = tipoMetrosSelect.value;
const metros = parseFloat(metrosInput.value);
if (isNaN(metros) || metros servico.querySelector('.card-title').textContent === servicoSelecionado);

if (servico) {
let precoPorMetro = parseFloat(servico.querySelector('.preco').textContent);
const unidadePreco = servico.querySelector('.card-text').textContent.includes('m²') ? 'm2' : 'm3';
const fatorDeConversao = fatoresDeConversao[servicoSelecionado];
let total;

if (tipoMetrosSelecionado === 'm3') {
if (unidadePreco === 'm2') {
precoPorMetro = precoPorMetro * fatorDeConversao;
}
total = metros * precoPorMetro;
} else if (tipoMetrosSelecionado === 'm2') {
if (unidadePreco === 'm3') {
precoPorMetro = precoPorMetro / fatorDeConversao;
}
total = metros * precoPorMetro;
}

resultado.textContent = `Total: ${total.toFixed(2)}€`;
}
};

atualizarServicos();
calcularButton.addEventListener('click', calcularPreco);
}

// Código para exibir a mensagem de erro 404
if (document.title === '404') {
var errorMessage = document.getElementById('error-message');
if (errorMessage) {
errorMessage.style.display = 'block';
errorMessage.innerHTML = 'Oops! Página não encontrada.
Desculpe, mas a página que você está procurando não existe. Voltar para a página inicial
';
}
}
});

const contactForm = document.getElementById('contactForm');
if (contactForm) {
contactForm.addEventListener('submit', function(event) {
event.preventDefault();

var formData = new FormData(this);

fetch('contact.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
document.getElementById('formMessage').innerHTML = data;
})
.catch(error => {
console.error('Error:', error);
});
});
}

document.addEventListener('DOMContentLoaded', () => {
const whatsappLink = document.getElementById('whatsapp-link');
const whatsappModal = new bootstrap.Modal(document.getElementById('whatsappModal'));

if (whatsappLink && whatsappModal) {
whatsappLink.addEventListener('click', (event) => {
event.preventDefault();
whatsappModal.show();
});
}
});

document.addEventListener('DOMContentLoaded', () => {
try {
const shareButton = document.querySelector('.tui-image-editor-main-container .tui-image-editor-download-btn');
if (shareButton) {
shareButton.addEventListener('click', (event) => {
// Código do evento
});
} else {
console.warn('Elemento não encontrado: .tui-image-editor-main-container .tui-image-editor-download-btn');
}
} catch (error) {
console.error('Erro ao adicionar evento:', error);
}
});

document.addEventListener("DOMContentLoaded", function() {
const observer = lozad(); // lazy loads elements with default selector as '.lozad'
observer.observe();
});

})(jQuery);


Подробнее здесь: https://stackoverflow.com/questions/793 ... onsiveness