Маржа для предмет Div не работает над мобильным просмотром ⇐ CSS

[Anonymous]

Я работаю над обновлением (довольно старого) веб -сайта, чтобы отобразить слайд -шоу вместо изображения. Он работает хорошо и отображает все правильно на рабочем столе, поэтому я пошел вперед, чтобы загрузить его на сервер, но я только что понял, что одна и та же страница на мобильном мобильном телефоне смещена: Margin: Auto и Margin-left: 20px оба не появляются на мобильных устройствах. Также добавили тег! На веб-сайте нет никаких изменений, которые будут лучше отображаться на мобильных устройствах (я знаю, не очень удобно, но я скоро работаю над этим), и @Media также не используется, поэтому не имеет смысла для меня, почему маржа работает на рабочем столе, но не на мобильный экран. Спасибо!
Слева - это просмотр рабочего стола, а справа - это скриншот от моего мобильного телефона:


Here is my code, sorry if this is not the right way to display code on here:

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

    /* MIDDLERIGHT MIDDLERIGHT MIDDLERIGHT MIDDLERIGHT  */

#middle .right {
width: 342px;
margin-left: 8px;
height: 300px;
float: left;
}

#middle .right .top {
width: 344px;
height: 50px;
margin: 0px;
background: #000;
float: left;
}

#middle .right .top p {
font-family: 'Century Gothic', sans-serif;
font-size: 24px;
font-weight: bold;
color: #fff;
text-align: left;
text-decoration: none;
margin: 15px 0px 0px 20px;
}

#middle .right .mid {
height: 245px;
width: 342px;
background: #fff;
float: left;
border-width: 1px;
border-style: dotted;
border-color: #000;
}

#middle .right .bottomline {
width: 342px;
}

/*      container for slideshow*/
#middle .right .mid .slideshow {
max-width: 300px;
max-height: 130px;
margin: auto;
margin-top: 10px;
justify-items: center;
}
#middle .right .mid .slideshow .slidesImg img {
max-height: 130px;
object-fit: cover;
}

#middle .right .mid .slideshow .prevBttn, .nextBttn {
cursor: pointer;
position: absolute;
margin-top: -80px;
background-color: rgba(0,0,0,0.03);
padding: 5px;
}

#middle .right .mid .slideshow .prevBttn img, .nextBttn img{
width: 15px;
height: 15px;
}

#middle .right .mid .slideshow .prevBttn {
margin-left: -14px;
}
#middle .right .mid .slideshow .nextBttn {
margin-left: 289px;
}
#middle .right .mid .slideshow .prevBttn:hover, .nextBttn:hover {
background-color: rgba(0,0,0,0.1);
}

#middle .right .mid .dotContainer {
text-align: center
}

#middle .right .mid .dotContainer .dot {
cursor: pointer;
height: 7px;
width: 7px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.5s ease;
}

#middle .right .mid .dotContainer .dot:hover, #middle .right .mid .dotContainer .active {
background-color: rgb(0,0,0);
}

/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1s;
}

@keyframes fade {
from {
opacity: .4
}

to {
opacity: 1
}
}

#middle .right .mid .image1 {
height: 130px;
width: 280px;
float: left;
margin-left: 30px;
margin-top: 10px;
}

#middle .right .mid .image1 img{
width: 100%;
}

#middle .right .mid .text1 .newsDesc {
height: 38px;
width: 320px;
float: left;
margin-left: 15px;
margin-top: 10px;
}

#middle .right .mid .text1 p {
font-family: 'Myriad Roman', sans-serif;
font-size: 14px;
text-align: left;
text-decoration:  none;
line-height: 15px;
color: #000;
}

#middle .right .mid .readmore1 a {
height: 25px;
width: 110px;
background: url('images/readmore.png') no-repeat;
float: right;
margin-top: 20px;
margin-right: 10px;
}

#middle .right .mid .readmore1 a:hover {
background: url('images/readmorehover.png') no-repeat;
font-weight: none;
}

#middle .right .mid .readmore1 p {
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
font-weight: normal;
color: white;
text-align: center;
text-decoration: none;
margin-top: 2px;
}

#middle .right .bottomline {
height: 20px;
margin: 0px;
background: #;
float: left;
}

#btmspacer {
width: 800px;
height: 23px;
float: left;
margin-top: 30px;
margin-left: 30px;
}< /code>



Home
























News



setInterval(function () {
plusSlides(1)
}, 3000);



[img]https://i.postimg.cc/bwkpNpM7/semicon-india-2025.png[/img]

[img]https://i.postimg.cc/CxqLBjZ6/2025-taiwan-banner-white.jpg[/img]


[img]https://i.postimg.cc/8cNWHMnT/left-arrow.png[/img]


[img]https://i.postimg.cc/pLXCxbCP/right-arrow.png[/img]









var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
let i;
let slides = document.getElementsByClassName("slidesImg");
let dots = document.getElementsByClassName("dot");

if (n >  slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}

slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}

Подробнее здесь: https://stackoverflow.com/questions/797 ... obile-view