আপনি কি Elementor ব্যবহার করে ওয়েবসাইট ডিজাইন করতে গিয়ে ফিক্সড ব্যাকগ্রাউন্ড ইস্যুতে পড়েছেন? বিশেষ করে মোবাইল ডিভাইসে ফিক্সড ব্যাকগ্রাউন্ড ঠিক মতো কাজ করে না!
Elementor-এ ফিক্সড ব্যাকগ্রাউন্ড সেট করা খুবই সহজ। কিন্তু সমস্যা হয় যখন আপনি মোবাইল ডিভাইসে চেক করেন; অনেক সময় মোবাইল ডিভাইসে ফিক্সড ব্যাকগ্রাউন্ড ঠিক মতো কাজ করে না, বা ব্যাকগ্রাউন্ড স্ক্রল হয়ে যায়। এটি ব্যবহারকারীর অভিজ্ঞতা খারাপ করে দেয়।
এই সমস্যার সমাধান করার জন্য আমরা CSS-এর @supports ফিচার এবং clip-path প্রপার্টি ব্যবহার করতে পারি। নিচের কোডটি দেখুন:
@supports (-webkit-clip-path: polygon(0 0, 0 10%, 10% 10%)) or (clip-path: polygon(0 0, 0 10%, 10% 10%)) {
selector {
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
overflow: hidden;
}
selector::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
pointer-events: none;
}
}
এই কোড কিভাবে কাজ করে?
@supports: এই CSS ফিচারটি ব্রাউজার সাপোর্ট চেক করে। যদি ব্রাউজারclip-pathসাপোর্ট করে, তাহলে এই স্টাইলগুলি অ্যাপ্লাই হবে।clip-path: এটি দিয়ে আমরা এলিমেন্টের একটি নির্দিষ্ট অংশ কেটে নিতে পারি। এখানে আমরা পুরো এলিমেন্টটিকে একটি বক্স হিসেবে রেখেছি।::beforepseudo-element: এই অংশটি ব্যবহার করে আমরা একটি ফিক্সড লেয়ার তৈরি করেছি, যা ব্যাকগ্রাউন্ড হিসেবে কাজ করে এবং মোবাইল ডিভাইসেও ফিক্সড থাকে।
কোডটি কিভাবে ব্যবহার করবেন?
- আপনার Elementor পেইজে যান।
- Custom CSS সেকশনে এই কোডটি পেস্ট করুন।
- সেভ করে মোবাইল ডিভাইসে চেক করুন।
এই পদ্ধতিটি ব্যবহার করে আপনি নিশ্চিত করতে পারবেন যে মোবাইল ডিভাইসেও আপনার ফিক্সড ব্যাকগ্রাউন্ড ঠিক মতো দেখাবে। এটি একটি ক্লিন এবং ইফেক্টিভ সমাধান, যা কোনো অতিরিক্ত প্লাগইন বা জাভাস্ক্রিপ্ট ছাড়াই কাজ করে। ওয়েব ডিজাইনে ছোট ছোট সমস্যাগুলোই অনেক সময় বড় ইস্যু হয়ে দাঁড়ায়। মোবাইল ডিভাইসে ফিক্সড ব্যাকগ্রাউন্ড ঠিক করা এমনই একটি সাধারণ সমস্যা, যার সমাধান জানা থাকলে আপনি আপনার ওয়েবসাইটের ইউজার এক্সপেরিয়েন্স অনেক উন্নত করতে পারবেন।