ওয়ার্ডপ্রেস ওয়েবসাইটে ব্লগ গ্রিড ডিজাইন করার সময় একটি কমন সমস্যা হলো পোস্ট কার্ডের হাইট সমান না থাকা। এই সিএসএস সিস্টেমটি আপনার ব্লগকে ক্লিন এবং কনসিস্টেন্ট করতে সাহায্য করবে।
এই CSS Snippet কী কাজ করে?
Fixed Image Height
ইমেজগুলোকে সুন্দরভাবে ক্রপ করে নির্দিষ্ট হাইটে ফিট করে।
Equal Card Height
সবগুলো ব্লগ কার্ডকে লেআউটে সমান হাইট প্রদান করে।
Text Line Limit
টাইটেল এবং এক্সসার্প্ট টেক্সটকে ৩ লাইনে লিমিট করে দেয়।
কোথায় ব্যবহার করবেন?
- ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে FluentSnippets প্লাগইনে কোডটি যুক্ত করতে পারেন।
- আপনার ব্যবহৃত থিমের Stylesheet অথবা Custom CSS সেকশনে এটি কাজ করবে।
- এলিমেন্টরের কন্টেইনারে ক্লাস নেম হিসেবে নিচের ক্লাসটি ব্যবহার করুন।
Elementor Class:
equal-blog
সারসংক্ষেপ (Summary)
টাইটেল ছোট-বড় যাই হোক না কেন, এই সিএসএস স্নিপেটটি আপনার পুরো ব্লগ গ্রিডকে একটি সুশৃঙ্খল এবং প্রফেশনাল লুক দেবে। এটি পোর্টফোলিও বা নিউজ সাইটের জন্য অত্যন্ত জরুরি একটি সলিউশন।
/* ===== SCOPED (ROW REMOVED, CLASS SAME) ===== */
.equal-blog .row > .col-12.col-lg-4 {
display: flex !important;
flex-direction: column !important;
}
.equal-blog .trm-blog-card {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
.equal-blog .trm-blog-card > div {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
.equal-blog .trm-card-descr {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
}
.equal-blog .trm-card-data {
margin-top: auto !important;
}
.equal-blog .trm-blog-card .art-port-cover img {
height: 220px !important;
object-fit: cover !important;
width: 100% !important;
display: block !important;
}