Mehrdad Yousefi

مشکل در طراحی

5 پست در این موضوع قرار دارد

سلام

من یه قسمت از سایتم به این شکل کد نویسی شده


<header>
<div class="masthead">
<div class="masthead-body">
<div class="email"><i class="fa fa-envelope" style="color:#758594; margin:13px 0px 0px 30px;"></i><p>Email : info@mihanwordpress.com</p></div>
<div class="phone"><i class="fa fa-phone-square" style="color:#758594; margin:13px 0px 0px 30px;"></i><p>Phone : +98 21 66 240 209</p></div>
</div>
</div>
</header>

و استایلش هم به این صورت هستش


header {
width: 100%;
height: auto;
background: #34495e;
overflow:hidden;
border-bottom: solid 2px #000000;
border-image: url(img/Freebie-Page-Atech_02.png) 30 30 round;
-moz-border-image: url(img/Freebie-Page-Atech_02.png) 30 30 round; /* Firefox */
-webkit-border-image: url(img/Freebie-Page-Atech_02.png) 30 30 round; /* Safari and Chrome */
-o-border-image: url(img/Freebie-Page-Atech_02.png) 30 30 round; /* Opera */
}
.masthead {
width: 100%;
height: 40px;
background: #2c3e50;
float: right;
margin: 15px 0px 0px 0px;
}
.masthead-body {
width: 1300px;
height: auto;
margin: 0 auto;
}
.email {
float: left;
width: auto;
height: auto;
margin: 0 auto;
}
.email p {
color: #758594;
font: 12px Segoe, "Segoe UI";
float: left;
margin: 13px 0px 0px 10px;
}
.phone {
float: left;
width: auto;
height: auto;
margin: 0 auto;
}
.phone p {
color: #758594;
font: 12px Segoe, "Segoe UI";
float: left;
margin: 13px 0px 0px 10px;
}

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

overflow:hidden; رو حذف میکنم و float که میدم اسکرول به سمت چپ و راست میده ولی دیگه طول 100% از کار میفته و به مشکل میخوره و بخش شماره و ایمیل میریزه

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

زمپ هم تست کردم ولی درست نشد

rzcmu2fl5v5mjz8lnuif.png

w1wje22823l0aaxqapiq.png

0

به اشتراک گذاری این پست


لینک به پست

.masthead {
min-width: 100%;
overflow:hidden;
height: 40px;
background: #2c3e50;
float: none;
margin: 15px 0px 0px 0px;
}

2

به اشتراک گذاری این پست


لینک به پست


.masthead {
min-width: 100%;
overflow:hidden;
height: 40px;
background: #2c3e50;
float: none;
margin: 15px 0px 0px 0px;
}

سلام متاسفانه باز مشکل پابرجاس هستش

با سپاس

0

به اشتراک گذاری این پست


لینک به پست

سلام

آدرس آنلاین بزارید

1

به اشتراک گذاری این پست


لینک به پست

چیزی که الان تو تصاویر شما مشخصه اینه که زوم صفحه رو بالا بردید اگر اینطوره که کارتون اشتباهه و با زیاد کردن زوم نمی شه حالت دیوایس های دیگه رو فهمید برای مشاهده درست این افزودنی رو به گوگل کرومتون اضافه کنید و از طریقش سایت رو بررسی کنید

https://chrome.google.com/webstore/detail/responsive-website-tester/eopndgnmfpbhfamlgcfcfedcabbfnkhn?utm_source=chrome-app-launcher-info-dialog

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری