মিডিয়াউইকি:Common.css: সংশোধিত সংস্করণের মধ্যে পার্থক্য
অবয়ব
সম্পাদনা সারাংশ নেই ট্যাগ: পুনর্বহালকৃত |
সম্পাদনা সারাংশ নেই ট্যাগ: পুনর্বহালকৃত |
||
৩ নং লাইন: | ৩ নং লাইন: | ||
.worldbox-container { | .worldbox-container { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | |||
align-items: flex-start; | align-items: flex-start; | ||
} | } | ||
/* worldbox ইনফোবক্স - উইকিপিডিয়ার মতো ডান পাশে ফ্লোট করবে */ | |||
.worldbox { | .worldbox { | ||
width: | width: 300px; /* উইকিপিডিয়ার মতো নির্দিষ্ট প্রস্থ */ | ||
float: right; /* | float: right; | ||
margin: 0 0 10px 15px; /* ডান পাশে ইনফোবক্স ফিক্স করা */ | |||
clear: right; | |||
} | } | ||
/* কনটেন্ট বাম পাশে থাকবে */ | |||
.worldbox-content { | .worldbox-content { | ||
flex-grow: 1; | |||
max-width: calc(100% - 320px); /* ইনফোবক্সের পাশে ফিট হবে */ | |||
} | } | ||
/* worldbox ইনফোবক্স নিচে গেলে ফুল-উইডথ হবে */ | |||
/* worldbox | |||
.worldbox:after { | .worldbox:after { | ||
content: ""; | content: ""; | ||
৩০ নং লাইন: | ২৯ নং লাইন: | ||
} | } | ||
/* মোবাইল ভিউতে worldbox নিচে আসবে */ | |||
@media (max-width: 1023px) { | @media (max-width: 1023px) { | ||
.worldbox-container { | .worldbox-container { |
১৫:২৭, ২ মার্চ ২০২৫ তারিখে সংশোধিত সংস্করণ
/* CSS placed here will be applied to all skins */
@media (min-width: 1024px) {
.worldbox-container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
/* worldbox ইনফোবক্স - উইকিপিডিয়ার মতো ডান পাশে ফ্লোট করবে */
.worldbox {
width: 300px; /* উইকিপিডিয়ার মতো নির্দিষ্ট প্রস্থ */
float: right;
margin: 0 0 10px 15px; /* ডান পাশে ইনফোবক্স ফিক্স করা */
clear: right;
}
/* কনটেন্ট বাম পাশে থাকবে */
.worldbox-content {
flex-grow: 1;
max-width: calc(100% - 320px); /* ইনফোবক্সের পাশে ফিট হবে */
}
/* worldbox ইনফোবক্স নিচে গেলে ফুল-উইডথ হবে */
.worldbox:after {
content: "";
display: table;
clear: both;
}
}
/* মোবাইল ভিউতে worldbox নিচে আসবে */
@media (max-width: 1023px) {
.worldbox-container {
display: block; /* মোবাইলে ব্লক ফরম্যাট */
}
.worldbox-special-section {
order: 1; /* প্রথমে থাকবে */
}
.worldbox {
width: 100%; /* মোবাইলে পুরো পেজে দেখাবে */
order: 2;
}
.worldbox-content {
width: 100%;
order: 3;
}
}