Joomla Templates Club 406,261 posts

[avnorthmedia Friend avnorthmediaJoin date: March 2011Posts: 13Downloads:0Uploads:2 Thanked: 1 times in 1 posts]

#175566

Hello – I am trying to display 6 small custom-html mods in this position. The top 3 always resize and adjust no matter what size the window is. But the 2nd row jumps around and drops a mod to a 3rd row if the window is too small. How can I keep this from happening? The site is http://www.canadianbusinessresources.ca

Great Templates!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#446349

Greetings:

The CSS rule you can try to modify is

<blockquote>#ja-current-content, #ja-main {
float: right;
}

</blockquote>[FONT=arial]

remove the “float: right;” property altogether – save changes – clear your cache – refresh page and resize window

If you would like for me to assist you in identifying the exact file path and line number, [/FONT]please set “Optimize CSS” to “No” within your Template Manager–General Settings[FONT=arial]

[/FONT]

[avnorthmedia Friend avnorthmediaJoin date: March 2011Posts: 13Downloads:0Uploads:2 Thanked: 1 times in 1 posts]

#446360

Thank you for writing Tom. I removed float:right; from #ja-current-content, #ja-main { } in layout.css & cleared the cache. The bottom row is still jumping around. I have set “Optimize CSS” to “No”

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#446376

I believe the issue is the height of the modules relative to the content within them. For example, the content within your “sole proprietorship” module is a bit longer than the others and, as such, is causing the “push down” of the others at smaller screen size.

To fix this, you can set a specified height parameter for the modules

Try this . . . .

Within file path –> /templates/ja_business/css/template.css

at about line 812, change “float: left;” to “float: right;” and set a height property – for example . . .

<blockquote>[FONT=arial].ja-mass-top div.ja-moduletable {
background: url(“../images/right-bg.png”) no-repeat scroll left top transparent;
border: 0 none;
float: left;
height: 300px;
margin-top: 0;
width: 33%;
}
[/FONT]</blockquote>

You can, of course, play around with the pixel value for the module height …. but let me know if this works for you.

[avnorthmedia Friend avnorthmediaJoin date: March 2011Posts: 13Downloads:0Uploads:2 Thanked: 1 times in 1 posts]

#446382

Setting the float:left; and the height:250px; worked beautifully. You Rock!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#446384

<em>@avnorthmedia 311050 wrote:</em><blockquote>Setting the float:left; and the height:250px; worked beautifully. You Rock!</blockquote>
Most Welcome . . . All the best with your continuing site development

[Author]

Posts