এলিমেন্টরে মোবাইল রেসপন্সিভ ডিজাইন করতে প্রতিটি সেটিংয়ের পাশে থাকা ডিভাইস আইকন ব্যবহার করে ট্যাবলেট ও মোবাইলের জন্য আলাদা মান দিন: কনটেইনারের Direction মোবাইলে Column, ফন্ট সাইজ ছোট, প্যাডিং কম, আর কোনো উপাদানের নির্দিষ্ট (fixed) প্রস্থ নয়। ডেস্কটপের সেটিং নিচে নেমে আসে, তাই মোবাইলে শুধু যা আলাদা দরকার তা বদলান। শেষে আসল ফোনে পরীক্ষা করুন।
- বেশিরভাগ ভিজিটর ফোনে আসে, তাই মোবাইল সবচেয়ে গুরুত্বপূর্ণ।
- ডিভাইস আইকন চেপে মোবাইলের মান আলাদা দিন।
- কনটেইনার মোবাইলে Column।
- নির্দিষ্ট প্রস্থ ও বড় প্যাডিং এড়িয়ে চলুন।
- আলাদা মোবাইল সেকশন বানিয়ে লুকানোর চেয়ে একটি রেসপন্সিভ সেকশন ভালো।
মোবাইলে কোন সমস্যা বেশি হয়?
| লক্ষণ | কারণ | সমাধান |
|---|---|---|
| পেজ পাশের দিকে স্ক্রল হয় | কোনো উপাদান স্ক্রিনের চেয়ে চওড়া | মোবাইলে প্রস্থ ১০০% বা Auto |
| কলাম চেপে ছোট হয়ে যায় | Direction মোবাইলেও Row | মোবাইলে Column করুন |
| অনেক ফাঁকা জায়গা | ডেস্কটপের বড় প্যাডিং | মোবাইলে প্যাডিং কমান |
| শিরোনাম অদ্ভুতভাবে ভাঙে | ফন্ট সাইজ বড় | মোবাইলে ছোট সাইজ |
আপনার নিজের সাইটে সরাসরি ওয়ার্ডপ্রেস ও এলিমেন্টর লেসন, $40 থেকে। প্রতিটি লেসন রেকর্ড করা থাকে। একদম নতুনদেরও স্বাগত।
ধাপে ধাপে কীভাবে ঠিক করবেন?
- এলিমেন্টরের নিচের মেনু থেকে Responsive Mode চালু করে মোবাইল ভিউ বাছুন।
- পেজের উপর থেকে নিচে স্ক্রল করে যেখানে ভাঙছে সেখানে থামুন।
- Navigator থেকে উপাদানটি নির্বাচন করুন।
- Width, Padding, Margin আর Position দেখুন; ফোন আইকন চেপে মোবাইলের মান দিন।
- প্যারেন্ট কনটেইনারের Direction ও Gap দেখুন।
- সেভ করে আসল ফোনে পরীক্ষা করুন।
একটি উদাহরণ
ধরুন একটি রেস্টুরেন্টের মেনু সেকশনে প্রতিটি আইটেমের প্রস্থ ডেস্কটপে ৬০০ পিক্সেল দেওয়া। ফোনে পুরো পেজ পাশের দিকে সরে যায়। মোবাইলে প্রস্থ ১০০% দিলেই সব আইটেম ঠিক হয়ে যায়। আরও বিস্তারিত দেখুন রেসপন্সিভ ব্রেকপয়েন্ট ও কনটেইনার টিউটোরিয়াল (ইংরেজি)।
একজন শিক্ষকের সাথে সরাসরি শিখতে চান?
আমি জুম বা গুগল মিটে ওয়ান-টু-ওয়ান ওয়ার্ডপ্রেস ও এলিমেন্টর শেখাই, আপনার নিজের সাইটে, আপনার গতিতে। বাংলা বা ইংরেজি, যেটায় আপনি স্বচ্ছন্দ। প্রতিটি লেসন রেকর্ড করা থাকে, পরে আবার দেখতে পারবেন, আর লেসনের পর একটি ছোট চেকলিস্ট পাবেন। লেসন শুরু $40 থেকে। লেসন ও দাম দেখুন অথবা ফ্রি পরিচিতি কল বুক করুন।
Frequently asked questions
এলিমেন্টরে শুধু মোবাইলের জন্য সেটিং কীভাবে দেব?
সেটিংয়ের পাশের ডিভাইস আইকনে মোবাইল বেছে মান দিন।
মোবাইলে পেজ পাশের দিকে স্ক্রল হয় কেন?
কোনো উপাদানের প্রস্থ স্ক্রিনের চেয়ে বেশি; মোবাইলে প্রস্থ ১০০% বা Auto দিন।
আলাদা মোবাইল সেকশন বানানো কি ভালো?
সাধারণত না; একটি রেসপন্সিভ সেকশন হালকা ও সহজে সামলানো যায়।
কলাম মোবাইলে নিচে নিচে আসে না কেন?
কনটেইনারের Direction মোবাইলেও Row আছে; Column করুন।
Sources
আপনার নিজের সাইটে সরাসরি ওয়ার্ডপ্রেস ও এলিমেন্টর লেসন, $40 থেকে। প্রতিটি লেসন রেকর্ড করা থাকে। একদম নতুনদেরও স্বাগত।
More WordPress guides
Rather have an expert run your WordPress site?
Tanvir H is a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience, 650+ projects and a 4.9 client rating. New websites, redesigns, fixes, speed, security and SEO, handled by one expert who explains everything in plain English and works with clients worldwide.
