Strange behavior with Magellan Fixed | Foundation 5

Question

I am trying to create a product summary (sidebar) like Apple's when you purchase a product. I am using Magellan and it seems to break the page at any width below 960 pxs. It may have something to do with the table. I am not sure any help or suggestions would be greatly appreciated. Like the photo below:

enter image description here .

<div data-magellan-expedition="fixed">
    <div class="large-2 columns right" >
        <div id="top">
            <h5>Summary</h5>
            <h4>Business Cards</h4>
        </div>

        <div id="summary">
            <table>
                <tbody>
                    <tr><td>Digital</td></tr>   
                    <tr><td>3.5 * 2</td></tr>     
                    <tr><td>Qty: 50,000</td></tr>
                    <tr><td>14 Point C2S</td></tr>
                    <tr><td>Color Front, Empty Back</td></tr>      
                    <tr><td>5 Business day turnaround</td></tr>    
                    <tr><td>5 Business day turnaround</td></tr>  
                    <tr><td>5 Business day turnaround </td></tr>
                </tbody>
             </table>

             <h5>Your Price:      $64.5</h5>
             <h5> Unit Cost:      $0.323</h5>
             <a href="#" class="small radius success button">Get Started</a>
        </div>
    </div>
</div>

jr.root.cs · Accepted Answer · 2014-02-10T12:56:08.427

The one problem witch could be the table width. Try to add #top table { width: 100%;}

As you are using F5 and it is not supporting old IE browser you can implement more HTML5 and CSS3 structure:

<data-magellan-expedition="fixed">
<section id='business' class='large-3 medium-12 columns right'>
    <header>
        <h1>Summary</h1>
        <p>Business Cards</p>
    </header>
    <article>
        <table class='debug'>
            <tbody>
                 <tr><td>Digital</td></tr>   
                 <tr><td>3.5 * 2</td></tr>     
                 <tr><td>Qty: 50,000</td></tr>
                 <tr><td>14 Point C2S</td></tr>
                 <tr><td>Color Front, Empty Back</td></tr>      
                 <tr><td>5 Business day turnaround</td></tr>    
                 <tr><td>5 Business day turnaround</td></tr>  
                 <tr><td>5 Business day turnaround </td></tr>
           </tbody>
       </table>
       <p class='price'>Your Price:      </p>
       <p class='price'> Unit Cost:      </p>
       <a href="#" class="small radius success button">Get Started</a>
    </article>
</section>
</div>

It is little more semantic and it have more logical outline. You can that target tags inside the #business:

#business table { width: 100% }
#business > header {}
#business > article {}
#business > header > h1 {}

Example markup to match you example:

.debug {border: 1px solid red;}
/* Bussines root modifiers */
#business table { width: 100%;}

/* Bussines #top */
#business > header {
    /* Target former #top */
}

#business > header > h1 {
    font-size: 2rem;
    margin: 0px;
    padding: 0px;
}

#business > header p {
    font-size: 2.5rem;
    margin: 0px;
    padding: 0px;
}

/* Business #summary */

#business > article {
    /* Target former summary */
}

/* Price specs */
.price {
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0px; padding: 0px;
}
.price:last-of-type {margin-bottom: .5rem;}

Github gist > https://gist.github.com/anonymous/8915089

If it's not solving your problem post more informations. Like whera are the checkboxes from image and so.

Also it uses F5 new medium grid. In testing magellan did't affect the section at all. — jr.root.cs, Feb 10 '14 at 12:47
Also it occured to me that Magellan is intended to be uses as "sticky-navigation" ... What you are trying to accomplish is Sidebar staying on trough scroll in view isn't it? If that's the case magellan will not help ... instead use position: fixed in your CSS — jr.root.cs, Feb 10 '14 at 13:05

Strange behavior with Magellan Fixed | Foundation 5

1 Answers1