FIX FOR VBA CMPS MODULES TO WORK ON MOBILE

This fix will work for ANY template that is responsive, not just mobile templates.

For this fix to fully work, any images in the posts used in the vBa modules must have responsive CSS code added inline manually (shown below) to the img tag or any large images will cause the module to expand to fit the image off the screen (which we don't want). I'm not sure how to do this globally for only images within posts without creating a special class for those images which is far above my head right now. I'm sure someone could create a mod that could do all these changes automatically. And for anyone critiquing this fix, if you can do it better, it's no skin off my nose. I was just tired that there has been no fix for using CMPS with mobile, and it appears that it was far simpler than we thought and could have been done a long time ago by anyone who knows CSS better than me. This fix is now in place at one of the boards I manage using the Debutant theme and vBA CMPS ver. 4.3.0, vBulletin ver. 4.2.3. Musclechemistry.com. (Though we are still testing to see which modules will work the best, and I may be creating mobile CSS for any module we want to use but doesn't work with this fix.)

You will also need to change your layout to use only ONE column for whatever your widgets are, plus the information the module contains must be responsive. Some modules work better than others. Modules that contain posts work like the News and the Welcome modules work well for example. Didn't say this fix was perfect, but it works.

For anyone who knows CSS really well, it appears like it's only a matter of having a full set of CSS rules for mobile for each module. Again, the vBa people could have done this a long time ago.


Image code within posts that appear in modules will need CSS code similar to below added inline:

Code:
style="width: 100%;"
Or some kind of @media query on it:

Code:
style="@media screen and (max-width: 480px) {img {width: 100%;}}"
In the vBa CMPS template below, I added width: 100%; into the style tags in both div tags in this template.

adv_portal_module_wrapper

Code:
{vb:raw mods.formcode}

<div class="collapse" style="padding-bottom: {vb:raw vba_style.portal_vspace}px; width: 100%;">
	<h2 class="blockhead">
		<strong>{vb:raw vba_style.portal_blockbullet} <vb:if condition="$mods['link']"><a href="{vb:raw mods.link}">{vb:raw mods.title}</a><vb:else />{vb:raw mods.title}</vb:if></strong>
		<vb:if condition="$vba_style['portal_collapsemods']">
			<a class="collapse" id="collapse_module{vb:raw mods.collapse}" href="{vb:raw relpath}#top" style="top: 6px"><img src="{vb:stylevar imgdir_button}/collapse_40b{vb:raw mods.collapseimg}.png" alt="" /></a>
		</vb:if>
	</h2>
	
	<div class="vba_module blockbody" id="module{vb:raw mods.collapse}"<vb:if condition="($mods['useshell'] & $vba_shellint['collapse'])"> style="display: none; width: 100%;"</vb:if>>
		<vb:if condition="$show['table']">
			<table align="center" border="0" cellpadding="0" cellspacing="0" class="blockbody" width="100%">
				{vb:raw modulehtml}
			</table>
		<vb:elseif condition="$mods['inctype'] == 'bb_code'" />
			<blockquote class="postcontent blockrow restore">
				<div class="bbcode_container" style="margin: 0;">
					{vb:raw modulehtml}
				</div>
			</blockquote>
		<vb:elseif condition="$show['divrow']" />
			<div class="blockrow">
				{vb:raw modulehtml}
			</div>
		<vb:else />
			{vb:raw modulehtml}
		</vb:if>
	</div>
</div>
<vb:if condition="$show['endform']"></form></vb:if>
In the vBa CMPS CSS template below, I added two lines (shown by the comments).

adv_portal.css

Code:
.vba_module {
	border: {vb:stylevar threadbit_border};
        width: 100%;  /* Added this line */
}

.vba_spacer {
	border-bottom: {vb:stylevar threadbit_border};
}

.vba_news {
	margin-top: 4px;
        width: 100%;  /* Added this line */
}

.vba_rating1 {
	background-image:url({vb:stylevar imgdir_rating}/rating-trans-15_1.png);
	background-repeat: no-repeat;
	background-position: top {vb:stylevar right};
	padding-{vb:stylevar right}:{vb:math 75 / 5 * 1}px;
}
.vba_rating2 {
	background-image:url({vb:stylevar imgdir_rating}/rating-trans-15_2.png);
	background-repeat: no-repeat;
	background-position: top {vb:stylevar right};
	padding-{vb:stylevar right}:{vb:math 75 / 5 * 2}px;
}
.vba_rating3 {
	background-image:url({vb:stylevar imgdir_rating}/rating-trans-15_3.png);
	background-repeat: no-repeat;
	background-position: top {vb:stylevar right};
	padding-{vb:stylevar right}:{vb:math 75 / 5 * 3}px;
}
.vba_rating4 {
	background-image:url({vb:stylevar imgdir_rating}/rating-trans-15_4.png);
	background-repeat: no-repeat;
	background-position: top {vb:stylevar right};
	padding-{vb:stylevar right}:{vb:math 75 / 5 * 4}px;
}
.vba_rating5 {
	background-image:url({vb:stylevar imgdir_rating}/rating-trans-15_5.png);
	background-repeat: no-repeat;
	background-position: top {vb:stylevar right};
	padding-{vb:stylevar right}:{vb:math 75 / 5 * 5}px;
}

#forumrules .rules_link {
	padding-{vb:stylevar left}: 40px;
}

.threadbit .threadstats li {
	margin-{vb:stylevar right}: 5px;
}