قراره بهتون تضمین موفقیت در برنامه‌نویسی و کلی آفر ویژه بدیم 😎 (برای شروع کلیک کن 👉)
۰ ثانیه
۰ دقیقه
۰ ساعت
۲ سحر پاشائی
weather forecast
جامعه Html & CSS ایجاد شده در ۰۵ خرداد ۱۴۰۲

درود. وقت بخیر

1-من می‌خوام تصویر دختر یه مقدار بزرگ‌تر شه ولی نهایتا می‌تونم عرضشو به اندازه 4 ستون تعیین کنم!

2-وقتی ریسایز می‌کنم سرجاش واینمیسته دختره :) جا به جا می‌شه

3-بخش میانی که به 3 قسمت مساوی تقسیم شده، می‌خواستم قسمت دما و آیکون ابرو details ستون‌های کم‌تری اشغال کنن و عکسم ستون‌های بیشتری اما اینجوری بی نظم می‌شه تو سایز کوچیک مثلا جای این که کل دما بیاد پایین فقط واحدش میاد...

4-الان کل body رو 12 قسمت در نظر گرفته یا همون قسمتی که آب و هوا رو توش پیاده سازی کردم؟

5-چجوری می‌شه weather-forecast افقی هم وسطِ viewport قرار بگیره؟

این چند خط رو به کلاسش اضافه می‌کنم افقی میره وسط عمودی بهم می‌ریزه!

    position: absolute;

  top: 50%;

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

https://codepen.io/Sahar_Pashaei/pen/bGmZXKa

درود

1- به این دلیل هست که تصویر رو در یک col-4 قرار دادید. این نهایت پهنای همون بخش رو میتونه بگیره. اگر میخواید بیشتر بشه میتونید بجای سه تا col-4 از یک col-4 و مثلا یک col-6 و یک col-2 استفاده کنید. در هر صورت دقت کنید که مجموع ستونها بشه 12.

2- تا یه جایی سرجاش هست و بعد که دیگه خیلی کوچک میشه میره بالاتر... این موارد رو باید با @media و... مدیریت کنید اغلب پیش میاد و نمیشه قطعی به کتابخونه‌ها اعتماد کرد.

3- اینم به همون روش مورد 1 که توضیح دادم و استفاده از مدیاکوئری حل میشه.

4- الان اگر با اینسپکتور چک کنید اون پنل سفید که بوردر صورتی رو داره 12 گرفته و به سه بخش تقسیم کرده. اما کلا این ساختار بسته به تعریف خودتون میتونه درختی باشه. یعنی کل صفحه رو 12 بگیرید و توش چهارتا 3 بندازید، بعد تو دوتای وسط اون مربع بزرگه رو بگیرید و توش دوباره 12 تعریف کنید و براین اساس پیش برید.

5- الان وسط هست.... متوجه نشدم که یعنی دقیقا میخواید بین دختره و اون مقادیر روز فعلی در یک خط قرار بگیره؟

درضمن صفحه قشنگی طراحی کردید :)

نازنین کریمی مقدم ۰۹ خرداد ۱۴۰۲، ۱۵:۳۹

ممنونم :)


5-منظورم این بود که می‌خوام هم افقی وسطِ viewport قرار بگیره هم عمودی

یکیش با margin: 0 auto اوکی شد، عمودی اما نمیاد وسط

https://s8.uupload.ir/files/untitled_vfjz.png

سحر پاشائی ۱۰ خرداد ۱۴۰۲، ۰۶:۴۷