پوریا
2 سال پیش توسط پوریا مطرح شد
2 پاسخ

سوال در بخش رسپانسیو

سلام خسته نباشید
در حال طراحی یک صفحه سایت هستم اومدم با تگmidea@ یک حالتی ایجاد کنم که اگر از 760 پیکسل یزرگ تر بشه سایت بره روی حالت دیگگه سایت
اما وقتی انجام دادم مارجینی که به صفحه داده بودم از بین رفت.
 تصویر

این هم کد همون قسمت
 تصویر
 تصویر

اینم کد html


ثبت پرسش جدید
محمدجوکار
تخصص : دانشجوی برنامه‌نویسی
@mjokarr 2 سال پیش مطرح شد
0

سلام پویا جان
من خودم به شخصه css رو نمیتونم اینطوری بررسی کنم.
کاش کدهات رو یا کپی میکردی برامون یا ضمیمه میکردی؛‌ اینطوری بهتر میتونیم بهت کمک کنیم.


پوریا
تخصص : طراح سایت
@pootak 2 سال پیش مطرح شد
0

بفرمایید این کد های من اگر میشه از لحاظ رسپانسیو بودنش توی نمایش گر کوچیک تر میشه برسیش کنید

<!doctype html>
<html>
    <head>
        <title>test1</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta  name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style/style.css">
        <link rel="stylesheet" href="fonts/vazir.css">
    </head>
    <body dir="rtl">
     <div class="dede cliarfix">
        <a href="#"><h1>راکت نیوز</h1></a>
     </div>

     <header class="he1 cliarfix">
     <h2>همراه ما باشید با راکت</h2>
      </div>
     </header>
     <nav class="cliarfix">
        <!-- <a href="#"><img src="img/images (1).jfif"></a> -->
        <a href="#" class="a1">پنل کاربری</a>
        <div>
            <input class="search-box" type="text" name="" placeholder="جستجو کنید">
        </div>
     </nav>
    </body>
</html>
html{
    font-size: 100%;
    font-family: vazir;
}
 body{
    background-color: rgb(255, 255, 255);
    color: white;
    margin: 0%;
 }
 .dede{
   border: 2px solid;
   margin: auto;
   margin-top: 1rem;
   border-radius: 10px;
   box-shadow:1px 2px 3px rgb(95, 255, 202);
   border-color: rgb(0, 33, 141);
 }
 .dede h1{
   margin-right: 1rem;
   color: aqua;    
 }
 .dede a{
   text-decoration: none;
 }
 header{
  width: 100%;
  display: inline-block;
 }
 @media(min-width:760px){
   header{
    width:calc(50% - 12rem);
    margin-right: 12rem;
   }
 }
 header{
  margin-top: 1rem;
  margin-right: 12rem;
 }
 h2{
  color: aqua;
 }

nav{
  width: 100%;
  margin: auto;
}
@media(min-width:760px){
 nav{
  width:calc(35% - 13rem);
  margin-left: 13rem;
 }
}
 nav{
   float:left;
   display:inline-block;
   margin-top: .5rem;
 }
 nav img{
  float: left;
  width:5rem;
  border-radius: 100%;
  margin: .5rem;

 }
 .cliarfix::after,
 .cliarfix::before{
    content: "";
    display: table;

}
 .cliarfix::after{
  clear: both;
 }

 .dede{
  width: 100%;
  display: inline-block;
 }
 @media(min-width:760px){
    .dede{
      width: 80%;
      margin-right: 10%;
    }
 }
 @media (min-width:760px){
  body{
    background-color: rgb(2, 5, 56);
  }
 }
 .a1{
  text-decoration: none;
  float: left;
  margin-top: 1.5em;
  padding: 10px 30px;
  font-size: larger;
  font-family: vazir;
  color: rgb(255, 255, 255);
  border-radius: 0.5em;
  font-weight: bold;
  box-shadow:10px 10px rgba(0, 255, 255, 0.212);
  background-color: rgb(7, 216, 216);
 }
 .dodi{
  position: absolute;
  top: 18%;
  right: 13%;
 }
 .search-box{
    margin-top: 1.5em;
    padding: 10px 30px;
    font-size: larger;
    font-family: vazir;
    color: rgb(65, 65, 65);
    border-radius: 0.5em;
    font-weight: bold;
    background-color: rgb(255, 255, 255);
    border: none;
 }

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام