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

[Anonymous]

Я работаю над обновлением (довольно старого) веб -сайта, чтобы отобразить слайд -шоу вместо изображения. Он работает и правильно отображается на рабочем столе, но я только что понял, что одна и та же страница на мобильном телефоне смещена. Также добавили тег! На веб-сайте нет никаких изменений, которые будут лучше отображаться на мобильных устройствах (я знаю, не очень удобно, но я скоро работаю над этим), и @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 ... on-desktop