Span Class Wrong Size

  • I am having issues with the bootstrap shortcut class span. When looking at the row-fluid div in the inspector it shows 100% of the row. However, the spans are filling in a smaller area than they should. Meaning, a span1 is 1/12 of the row, which is 8.333% width. I am seeing 5.982% width. This ends up shoving all of the spans over to the left of the row-fluid div. This then leaves a large blank space to the right of the 12th span.

    This is the block I am talking about. 

    <div class="row-fluid">
			<div class="span1 cs_label"><span title="Prebuilt characters players can use to play the Fyxt RPG.">PC</span></div>
			<div class="span1 cs_stat"><?php echo $pcCount ?></div>
			<div class="span1 cs_label"><span title="Prebuilt enemies Game Masters can use in their Fyxt RPG games.">Minion</span></div>
			<div class="span1 cs_stat"><?php echo $minionCount ?></div>
			<div class="span1 cs_label"><span title="Prebuilt enemies Game Masters can use in their Fyxt RPG games.">Grunt</span></div>
			<div class="span1 cs_stat"><?php echo $gruntCount ?></div>
			<div class="span1 cs_label"><span title="Prebuilt enemies Game Masters can use in their Fyxt RPG games.">Specialist</span></div>
			<div class="span1 cs_stat"><?php echo $specialistCount ?></div>
			<div class="span1 cs_label"><span title="Prebuilt enemies Game Masters can use in their Fyxt RPG games.">Champion</span></div>
			<div class="span1 cs_stat"><?php echo $championCount ?></div>
			<div class="span1 cs_label"><span title="Prebuilt enemies Game Masters can use in their Fyxt RPG games.">Boss</span></div>
			<div class="span1 cs_stat"><?php echo $bossCount ?></div>
		</div>

    How can I fix this? I am not sure why but all spans are too small and being smashed to the left. Is there a style overwrite I could do or something?

    I would like to have as much control as Bootstrap has but loading Bootstrap seems to break this themes widget areas. I am using Customizr classic version.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi IIllc,

    Would you mind providing us with the link to your site and a little more clarification of your problem? So that we can offer you with a possible solution.

    Thank you!

    Thread Starter IILLC

    (@iillc)

    The problem is on a development server so unfortunately I can’t link it.
    When inspecting the row-fluid I see this for width. Which looks right.
    width: 870px;
    100% .row-fluid tc_common.min?ver=4.1.3:15

    Then when I inspect the span1 directly under it I get:
    width: 52.0469px;
    5.98290598% .row-fluid .span1 tc_common.min?ver=4.1.3:15
    Which is wrong, this should be bigger. (8.3%)

    I am just not sure how or why this is coming up with this number.

    I tried enqueueing Bootstrap and just going that route. But when Bootstrap is enqueued it breaks the right sidebar of the theme placing it after the content. Is there a trick to safely enqueueing bootstrap with Customizr? I would prefer the control it offers over the span system implemented.

    Thanks for your help and suggestions.

    Thread Starter IILLC

    (@iillc)

    OK published the website so you can see what I am talking about.

    https://fyxtrpg.com/fyxt-rpg-tools/fyxt-items-gear-search/

    If you look at the row under “Filter Fyxt RPG Items” you can see that there is a fluid-row with spans that equal 12 parts.

    The row is calculated at 864 px.
    The first span is calculated at 45 px. But is should be 72 px. This difference compounds with each span across the page to leave a large gap on the right instead of filling the row.

    Hope this helps. Thanks!

    • This reply was modified 6 years, 11 months ago by IILLC.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Span Class Wrong Size’ is closed to new replies.