Results 1 to 2 of 2

Thread: Trouble keeping the rows and columns line up

  1. #1
    Join Date
    Nov 2016
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Trouble keeping the rows and columns line up

    I am having trouble keeping the rows and columns line up

    1) When is desktop mode maximum columns should be three.
    When I click on “Cell Three” works fine but when I click on ”Cell Two” it does loose the three column order.
    2) When Tablet maximum columns should be two all the time.
    When I click on "Cell Two" works fine but when I click on "Cell Three" it does loose the two column order.
    When Mobile maximum is one column.
    3) It does work fine

    I paste the whole code in one file hoping it will be easier to follow, my apologies if is hard to read
    Let me know if I am clear with my explanation plz, in advance thank you for your help!

    Code:
    <!DOCTYPE html>
        <!-- include bootstrap -->
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <style>
    /* centered columns styles */
    .row-centered {
        text-align:center;
    }
    .col-centered {
        display:inline-block;
        float:none;
        /* reset the text-align */
        text-align:left;
        /* inline-block space fix */
        margin-right:-4px;
        vertical-align: top;
    }
    .col-fixed {
        /* custom width */
        width:320px;
    }
    .col-min {
        /* custom min width */
        min-width:320px;
    }
    .col-max {
        /* custom max width */
        max-width:320px;
    }
    .item {
        width:100%;
        height:100%;
    	border:1px solid #cecece;
        padding:16px 8px;
    	background:#ededed;
    	background:-webkit-gradient(linear, left top, left bottom,color-stop(0%, #f4f4f4), color-stop(100%, #ededed));
    	background:-moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
    	background:-ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
    }
    /* content styles */
    .item {
    	display:table;
    }
    .content {
    	display:table-cell;
    	vertical-align:middle;
    	text-align:center;
    }
    .content:before {
        font-family:sans-serif;
        font-size:12px;
        letter-spacing:1px;
        color:#747474;
    }
    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border-top: none;
    }
    </style>
    <div class="container">
        <div class="row row-centered">
    <!-- Cell One -->
            <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell One</div></div></div>
    <!-- Cell Two -->        
            <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content"><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'ImageMngt')">Cell Two</a></div></div></div>        
             <div id="ImageMngt" class="tabcontent">       
                    <b>Content Cell Two</b><br />
                    Content Cell Two Content Cell Two Content Cell Two Content Cell Two Content Cell Two Content Cell Two Content Cell Two
            </div>
    <!-- Cell Three -->              
            <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content"><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'ImageOff')">Cell Three</a></div></div></div>
                <div id="ImageOff" class="tabcontent"><b>Content Three</b><br />
                    Content Three Content Three Content Three Content Three Content Three Content Three Content Three Content Three Content Three
                </div>
    <!-- Cell Four-->  
            <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell Four</div></div></div>
    <!-- Cell Five-->
             <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell Five</div></div></div>
    <!-- Cell Six -->        
             <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell Six</div></div></div>
    </div>
    </div>
    <script>
    function openTab(evt, tabName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }
    </script>

  2. #2
    Join Date
    Nov 2016
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

Similar Threads

  1. Replies: 1
    Last Post: 08-17-2010, 07:52 AM
  2. Replies: 1
    Last Post: 01-16-2009, 04:47 PM
  3. How can I get my columns to line up in css?
    By reddiestorm in forum CSS
    Replies: 1
    Last Post: 12-16-2008, 02:35 PM
  4. Help with CSS rows and columns
    By kibosh in forum CSS
    Replies: 4
    Last Post: 03-07-2008, 06:19 PM
  5. Replies: 3
    Last Post: 03-04-2006, 08:22 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •