{"CACHEDAT":"2026-04-14 02:13:07","SLUG":"v-04-WhpyHEblFd","MARKDOWN":"/\\* ===================================================== SIDE-BY-SIDE LAYOUT FIX - HIGH SPECIFICITY VERSION ===================================================== \\*/\n\n/\\* Override Bootstrap flex on question-container \\*/ #limesurvey .question-container.row { display: block !important; }\n\n/\\* Question title - fixed width on the left \\*/ #limesurvey .question-container.row > .question-title-container.col-12 { width: 220px !important; float: left !important; clear: left !important; flex: none !important; max-width: 220px !important; margin-bottom: 10px; }\n\n/\\* Answer container - fills remaining space \\*/ #limesurvey .question-container.row > .answer-container.col-12 { width: calc(100% - 230px) !important; float: right !important; flex: none !important; max-width: calc(100% - 230px) !important; }\n\n/\\* Hide help and valid containers properly \\*/ #limesurvey .question-container.row > .question-help-container.col-12, #limesurvey .question-container.row > .question-valid-container.col-12 { display: none !important; }\n\n/\\* Clearfix \\*/ #limesurvey .question-container.row::after { content: \"\"; display: table; clear: both; }\n\n/\\* Text-box questions stay full width (stacked) \\*/ #limesurvey .question-container.row.text-box > .question-title-container.col-12, #limesurvey .question-container.row.text-box > .answer-container.col-12 { width: 100% !important; max-width: 100% !important; float: none !important; clear: both !important; }\n\n/\\* Mobile - stack vertically \\*/ @media only screen and (max-width: 767px) { #limesurvey .question-container.row > .question-title-container.col-12, #limesurvey .question-container.row > .answer-container.col-12 { width: 100% !important; max-width: 100% !important; float: none !important; clear: both !important; } }\n\n/\\* Medium screens - narrower label \\*/ @media only screen and (min-width: 768px) and (max-width: 1023px) { #limesurvey .question-container.row > .question-title-container.col-12 { width: 180px !important; max-width: 180px !important; }\n\n```\n#limesurvey .question-container.row > .answer-container.col-12 {\n    width: calc(100% - 190px) !important;\n    max-width: calc(100% - 190px) !important;\n}\n```\n\n}","HTML":"<style>.scilmi-outline-content h1,.scilmi-outline-content h2{font-weight:700}.scilmi-outline-content .badge-scilmi{background:#0d6efd;color:#fff;padding:2px 8px;border-radius:99px;}</style><p>/\\<em> ===================================================<mark class=\"scilmi-highlight\"> SIDE-BY-SIDE LAYOUT FIX - HIGH SPECIFICITY VERSION </mark>=================================================== \\</em>/</p>\n<p>/\\<em> Override Bootstrap flex on question-container \\</em>/ #limesurvey .question-container.row { display: block !important; }</p>\n<p>/\\<em> Question title - fixed width on the left \\</em>/ #limesurvey .question-container.row &gt; .question-title-container.col-12 { width: 220px !important; float: left !important; clear: left !important; flex: none !important; max-width: 220px !important; margin-bottom: 10px; }</p>\n<p>/\\<em> Answer container - fills remaining space \\</em>/ #limesurvey .question-container.row &gt; .answer-container.col-12 { width: calc(100% - 230px) !important; float: right !important; flex: none !important; max-width: calc(100% - 230px) !important; }</p>\n<p>/\\<em> Hide help and valid containers properly \\</em>/ #limesurvey .question-container.row &gt; .question-help-container.col-12, #limesurvey .question-container.row &gt; .question-valid-container.col-12 { display: none !important; }</p>\n<p>/\\<em> Clearfix \\</em>/ #limesurvey .question-container.row::after { content: &quot;&quot;; display: table; clear: both; }</p>\n<p>/\\<em> Text-box questions stay full width (stacked) \\</em>/ #limesurvey .question-container.row.text-box &gt; .question-title-container.col-12, #limesurvey .question-container.row.text-box &gt; .answer-container.col-12 { width: 100% !important; max-width: 100% !important; float: none !important; clear: both !important; }</p>\n<p>/\\<em> Mobile - stack vertically \\</em>/ @media only screen and (max-width: 767px) { #limesurvey .question-container.row &gt; .question-title-container.col-12, #limesurvey .question-container.row &gt; .answer-container.col-12 { width: 100% !important; max-width: 100% !important; float: none !important; clear: both !important; } }</p>\n<p>/\\<em> Medium screens - narrower label \\</em>/ @media only screen and (min-width: 768px) and (max-width: 1023px) { #limesurvey .question-container.row &gt; .question-title-container.col-12 { width: 180px !important; max-width: 180px !important; }</p>\n<pre><code>&#x23;limesurvey .question-container.row &gt; .answer-container.col-12 &#x7b;&#xa;    width&#x3a; calc&#x28;100&#x25; - 190px&#x29; &#x21;important&#x3b;&#xa;    max-width&#x3a; calc&#x28;100&#x25; - 190px&#x29; &#x21;important&#x3b;&#xa;&#x7d;</code></pre>","UPDATEDAT":"2026-01-14T16:08:05.956Z","ID":"2b9b5a98-2b4e-4434-b9b8-05b9196ad107","TITLE":"v 04"}