#آموزشی #css #ریسپانسیو

📑 ریسپانسیو کردن قالب وردپرس با استفاده از تگ‌ مدیا ( مدیا کوئری )

📝 پیشگفتار : شاید دوستانی که در این زمینه ( طراحی قالب ) فعالیت میکنن این تگ را بشناسند و یا شنیده باشند اما برای سایر دوستان و ممکن است جالب باشد! به آموزش میپردازیم :

🖌در این آموزش شما میتوانید با استفاده از یک مدیاکوئری کلاس موردنظر را در سایز صفحه مورد نظر به شکل مجزا تغییر دهید! بعنوان مثال داریم :
.houniya-info-box{
width : 200px;
}

میخواهیم این المان که به ایدی کلاس .houniya-info-box به آن استایل داده ایم در صفحه نمایش های حداقل و حداکثر تا سایز 410px بصورت تمام عرض نمایش داده شود! پس مینویسیم :

@media screen and(max-width:410px){
.houniya-box-info{
width:100%
}
}
دراین صورت ، در صفحه نمایش های پایینتر از ۴۱۰ پیکسل تا ۴۱۰ پیکسل المان ما بصورت تمام عرض نمایش داده خواهد شد.

📍 برای استایل دهی به برخی المان ها لازم است ای دی کلاس را بصورت مسیر مشخص واردکنید بعنوان مثال :
.testid .subclass h2 {
css codes
}

با اموزش های بیشتر و تخصصی تر با ما همراه باشید 🌹

قلب‌وردپرس را به دوستان خود معرفی کنید 😉
@wpheart
@wpheart
@wpheart

#طراحی #طرح_آماده
🔅طرح گرید نمایش مطالب سایت
🖌 دوستان زیادی درخواست آموزش طراحی این نوع گرید رو داشتند، این گرید رو براتون اماده کردیم میتونید از لینک زیر دانلود کنید.

#ریسپانسیو
#قابلیت_شخصی_سازی
#تبدیل_آسان_به_وردپرس

دانلود فایل 👇

https://t.me/filedlrbot?start=_NDETAMFMW

همراه ما باشید 🌹
@wpheart
instagram.com/codin.uni