i've been working on this website for sometime. and every once in a while i upload it on the server to check if everything is alright. after this upload the website is completely distorted on some devices but it works just fine on some other devices with the same monitor resolution and browser. here is the link to the website "a link" so you can check. its still under development but at least it should work on the resolution that i coded in wich is 1080p.
here's the HTML code:
<main><div class="mainup"><div class="background partition" name="خدماتغیرحضوری"><h2 class="Yekan headerback">خدماتغیرحضوری</h2><img class="transp" src="/desktop/Untitled-1.png" alt=""><p class="Yekan background quote">پرداتقبوضآبیکیازبدیهی‌ترینخدماتی‌ستکهبهصورتغیرحضوریوآنلاینقابلانجاماست</p></div><div class="background partition" name="خبرماه"><h2 class="Yekan headerback">خبرماه</h2><p class="background">آبشیرینكنكاشیكرتیجاسكبزودیواردمدارتولیدمی‌شود:عبدالحمیدحمزهپوربابیاناینکهاینپروژهدغدغهآبفارادراینمنطقهکمخواهدکرد،افزود: عملیاتاجراییاینپروژهتابستانسالگذشتهباحضوراستاندارهرمزگانکلنگزنیشدودرکمترازیکسالوپیشازفصلگرمابهپایانرسید. </p></div><div class="background partition" name="مسئولیتشهروندی"><h2 class="Yekan headerback">مسئولیتشهروندی</h2><p class="background">آبمجازیچیست؟آبمجازيآبياستكهدرفرآيندتوليديكمحصولكشاورزيياصنعتينهفتهاستوبهطورواقعياحساسنميشود؛بلكهبطورمجازيحسميشود. برايمثالبرايتوليديككيلوگرمگندمبههزارليترآبنيازداريم. پسآبمجازيهركيلوگرمگندمبرابرهزارليتراست. برايگوشتقرمزنيزبه 5 تا 10 برابربيشترآبنيازداريمآبمجازيآبياستكهدرفرآيندتوليديكمحصولكشاورزيياصنعتينهفتهاستوبهطورواقعياحساسنميشود؛بلكهبطورمجازيحسميشود. برايمثالبرايتوليديككيلوگرمگندمبههزارليترآبنيازداريم. پسآبمجازيهركيلوگرمگندمبرابرهزارليتراست. برايگوشتقرمزنيزبه 5 تا 10 برابربيشترآبنيازداريم</p></div></div><div class="maindown"><div class="background bilboard" name="بیلبورد" ><h2 class="Yekan headerback">بیلبورد</h2><img class="Art" src="/desktop/Clip.png" alt=""> </div><div class="lastpart"><div class="background partitiondown innerpart" name="پیامصرفهجویی"><h2 class="Yekan headerback">پیامصرفهجویی</h2><img class="transp1" src="/desktop/2.png" alt=""><p class="Yekan background quote">آبیکبحرانطبیعینیست. اینیکبحرانساختهدستبشراست. - ارنیبارنت</p></div><div class="background partitiondown innerpart" name="سوال"><h2 class="Yekan headerback">سوال</h2><h3 class="background"> آبمجازیچیست؟</h3><form class="background" action=""><input type="radio" id="option1" name="options" value="option1"><label class="background" for="option1">گزینه 1</label><br><input type="radio" id="option2" name="options" value="option2"><label class="background" for="option2">گزینه 2</label><br><input type="radio" id="option3" name="options" value="option3"><label class="background" for="option3">گزینه 3</label><br></form></div> </div></div></main>and here's the CSS:
*{ margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; /* Horizontally center the body */ align-items: center; /* Vertically center the body */ background-color: #e4e4e4;}body{ max-width: 80vw; /* Adjust the maximum width as needed */ margin: 0.5vh auto; /* Center the element horizontally */}main{ display: flex; flex-direction: column; justify-content: space-between; height: 64vh; width: 100%; gap: 1vh;}.mainup{ display: flex; flex-direction: row-reverse; justify-content: space-between; height: 35%; width: 100%;}.maindown{ display: flex; flex-direction: row-reverse; justify-content: space-between; height: 65%; width: 100%;}.bilboard { border-radius: 25px; width: 66.3%; height: 100%; position: relative; padding: 10px; /* Adjust the padding as needed */ box-sizing: border-box; /* Ensure padding is included in the total width */}.Art { background-color: #cacdda; object-fit: cover; /* Maintain aspect ratio and cover the container */ border-radius: 10px; width: 100%;}.lastpart{ height:100%; width: 32.5%; text-align: right; border-radius: 25px; position: relative; justify-content: space-between;}in the last upload with the same CSS attributes for scaling everything was fine on all devices.but its all distorted now.