به هم ریختگی صفحه هنگام کوچک کردن

[eskafild]

سلام
در حالت معمولی سایتم درست نشون میده:

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

چطور حلش کنم؟
سپاس

[سعید حمزه زاده]

قالبتون ریسپانسیو نیست

[eskafild]

درسته ولی اگه قالب ریسپانسیو نباشه باید نمای کلی رو درست نشون بده که متاسفانه اون لوگو کار رو بهم میریزه، چطور محل اون رو هم ثابت کنم؟

[Reza Ganji]

برای این منظور باید سی اس اس اضافه کنید مثلا برای نمایشگرهای 720 یا 520 که در نت آموزشش هست.

کد اچ تی ام ال و سی اس اس رو براتون میزارم :

کد: (انتخاب همه)

<!-- Separate CSS File -->
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

سی اس اس :

کد: (انتخاب همه)

/* @media Rule */
@media all and (max-width: 1024px) {...}

/* @import Rule */
@import url(styles.css) all and (max-width: 1024px) {...}

سایت زیر رو هم یک نگاه بکنید برای توضیحات البته انگلیسی هست.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

[eskafild]

ممنون آقای گنجی فقط یه سوال نوشتید کد اچ تی ام ال، اون رو دقیقا کدوم ور باید بزنم؟ معمولا اچ تی ام ال ها خالی اند و فقط کد رنگ دارند!

[Reza Ganji]

ببینید اون برای گذاشتن در فایل ایندکس دات اچ تی ام ال و لینک دادن به سی اس اس مخصوص نمایشگری هست که براش سی اس اس نوشتید.
میتونید در خود فایل سی اس اس عمومی هم بدون استفاده از اون کد استفاده کنید برای ایمپورت هم میتونید در سی اس اس بصورت زیر عمل کنید و بعد از اون سی اس اس بنویسید :

کد: (انتخاب همه)

@media all and (max-width: 1024px) {...}

هر سی اس اس که بعد از این داخل آکولاد بنویسید برای نمایشگرهایی تا 1024 پیکسل استفاده میشود.مثلا برای نمایشگرهای تا 240 میتونید در بالا بجای 1024 عدد 240 را وارد کنید.
کمی هم خودتون تحقیق کنید میتونید مشکل را برطرف کنید و لوگو کوچکتر برای نمایشگرهای کوچک بزارید و چینش ماژول هارو هم تغییر بدید.