#1
  1. No Profile Picture
    Contributing User
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Dec 2004
    Posts
    3,015
    Rep Power
    376

    CSS tip/hint - mobile version


    Need some hint on how would I go about doing the mobile version of the following section:

    Screen Shot 2014-11-07 at 2.39.40 PM.png

    into this:

    Screen Shot 2014-11-07 at 2.39.47 PM.png

    The code for the first section is here:

    I don't need someone to do the code but just to guide me (suggest tips).. thanks

    Code:
    <!-- wrapper for the section -->
    <section class="bg-white video-component" >
    
    <!-- wrapper for the component -->
    <div class="content-wrap  " >
    
      <div class="row " >
        <!-- Left section container -->
        <div class="columns small-12 medium-8" >
          <!-- Left section heading-->
    
          <h2>This is a t Heading</h2>
          <p>This is a text</p>
    
          <iframe id="video-container" src="//player.vimeo.com/video/110908982?title=0&amp;byline=0" width="100%" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
          
          <h4>Video Heading</h4>
          <p>Video Description</p>
    
        </div>
    
        <!-- right section container -->
        <div class="columns small-12 medium-4" >
        <div class="carousel">
            <a class="nav prev">Previous</a>
            <div class="window">
                <ul class="clr">
                  
                    <li>
                      <a class="video-thumbnails" data-video-id="110908981">
                        <img src="https://i.vimeocdn.com/video/495328927_200x150.jpg"/>
                      </a>
                      <h4>Video heading1</h4>
                      <p>This is an awesome video.. Please click and watch &amp; enjoy!
    </p>
                    </li>
                  
                    <li>
                      <a class="video-thumbnails" data-video-id="110908980">
                        <img src="https://i.vimeocdn.com/video/495330365_200x150.jpg"/>
                      </a>
                      <h4>Video heading2</h4>
                      <p>This is an awesome video.. Please click and watch &amp; enjoy!
    </p>
                    </li>
                  
                    <li>
                      <a class="video-thumbnails" data-video-id="110908982">
                        <img src="https://i.vimeocdn.com/video/495328808_200x150.jpg"/>
                      </a>
                      <h4>Video heading 3</h4>
                      <p>This is an awesome video.. Please click and watch &amp; enjoy!
    </p>
                    </li>
                  
                    <li>
                      <a class="video-thumbnails" data-video-id="110908981">
                        <img src="https://i.vimeocdn.com/video/495328927_200x150.jpg"/>
                      </a>
                      <h4>Video heading 4</h4>
                      <p>This is an awesome video.. Please click and watch &amp; enjoy!
    </p>
                    </li>
                      
                </ul>
            </div> <!-- .window -->
            <a class="nav next">Next</a>
        </div> <!-- .carousel -->
        </div>
    
      </div>
    
    </div>
    
    </section>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    712
    Rep Power
    441
    As far as I can see, almost everything about those two is the same, except that the right column doesn't exist in the mobile version. The easiest way to handle that is to set display: none on the element that contains the right column.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Dec 2004
    Posts
    3,015
    Rep Power
    376
    thanks.

IMN logo majestic logo threadwatch logo seochat tools logo