مشکل در قالب بندی سایت با html و css

Question

سلام، در مورد قالب بندی سایت چند مشکل دارم.

در کادری که تصویر و عکس کنلر هم قرار دارند، وقتی سایت رو کوچک میکنم چون سایت responsive هست متعاقبا کادر،عکس و متن هم کوچک میشن ولی مشکل اینجاست که میخوام موقع کوچک شدن متن زیر تصویر قرار بگیره.

دوم اینکه 4 عدد تگ div هست که هر دو عدد آنها یک بلوک رو اشغال میکنه. میخوام این 2 تا تگ که کنار هم هستن کوچکتر بشن. از width و height استفاده کردم و سایت داخل مرورگر کامپیوتر خوب هست ولی برای موبایل خوب نشون داده نمیشه. فاصله ای که هنگام کوچکتر شدن در سمت چپ و راست تصویر قرار میگیره باعث میشه سایت برای موبایل خوب نشون داده نشه.

و سوال سوم اینکه من متن های داخل این div ها رو justify کردم ولی وقتی صفحه کوچک میشه خیلی فاصله بین کلمات قرار میگیره. راهی برای حل این مشکل هست؟

Answer 1

پاسخ از لینکدین : 

بنظرم ایشون تازه کارن و پیشنهادم اینه که از بوت استرپ استفاده کنن. اگه میخوان خودشون کد بزنن، باید این لینک رو بررسی کنن و از مدیا کوئری استفاده کنن https://www.w3schools.com/css/css_rwd_mediaqueries.asp اینکه صرفا یه استایل بدن مشخصا برای یک محدوده دیوایس مناسب خواهد بود ولی با مدیا کوئری میتونن مشخص کنن که در ابعاد مختلف، چه واکنشی باید رخ بده اگه از بوت استرپ هم استفاده کنن که گرید رو باید رعایت کنن https://www.w3schools.com/bootstrap4/default.asp https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp سلامت و موفق باشید

Comments

از راهنمایی شما ممنونم. امروز بعدازظهر گرید و مدیا کوئری رو یاد گرفتم و کار با موفقیت انجام شد. چون اجازه استفاده از بوت استرپ در پروژه رو نداشتم.