www.webdeveloper.com
Results 1 to 6 of 6

Thread: Responsive Design

  1. #1
    Join Date
    Jun 2014
    Posts
    3

    Responsive Design

    I have a grey box that only to appears on mobile ( for desktop view minimize the browser) however i want the grey box to be responsive but it only becomes responsive when the it shrinks to smaller size... want to be responsive like the boxes below. Below is my code and the link... remember to minimize the browser the smaller size in order for grey box to appear

    Code:
    <a href="javascript:void(0);" id="displayText"> 
          
            <div class="col-md-4 col-xs-12 greyTab search-style visible-xs">
              
                    
                        <div class="col-xs-1">
                              <img style=" margin-bottom:30px;" class="flip" src="/frontimages/seach_img.png" name="magnifyingglassicon"     id="magnifyingglassicon"  width="15"> 
    
            
                        </div>
                
                    <div class="col-xs-11" style="white-space:nowrap">
    
                        <div >
                        <div style="line-height:17px"> Teaches: <?= ucwords($this->subject); ?> <br> </div>
                        <div style="line-height:17px"> Learning: <?php echo $this->advancedSearchLearn;?> <br> </div>
                        <div style="line-height:17px">Near: <?= $this->zip; ?>    <br> <br> </div> 
                        </div>
                    </div>
                   
        
                <div class="col-md-6">
                      <i class="fa fa-chevron-down fa-1x"></i> 
                
              </div>
          </div>  <!--END GREYTAB-->     
        </a>
    http://test01.lrngo.com/online-tutor...hool/n/trade/1

  2. #2
    Join Date
    Jun 2014
    Posts
    9
    This code is not working. Send another code to paste in the site.

  3. #3
    Join Date
    May 2014
    Posts
    936
    Do you mean the pink box?

    Generally speaking if you ask me, your whole layout isn't responsive, and it's mostly the fault of the train wreck of how not to build a website known as bootcrap. It's saddled you with uselessly vague classnames, broken methodology, and a markup that to be frank, I'd punch myself in the face before trying to deploy on a website.

    Likewise, the use of fixed measurements for fonts (aka pixels) is an inaccessible mess.

    My advice would be to pitch that entire mess in the trash and start over with semantic markup, separation of presentation from content, and no goofy "crutch" in the form of frameworks that are taking something simple -- responsive layout -- and turning it into a confusing bloated slow loading inaccessible wreck. You have an EXCELLENT example of everything wrong with bootcrap, and many "modern" development methods that just makes me go "modern? Really? Looks like 1997 to me!"

    Sorry if that seems harsh, but it's the truth of the matter; there isn't anything there I'd even waste a second on trying to salvage -- as evidenced by the 130k of markup to deliver 4.5k of plaintext and maybe a dozen content images... Easily ten times or more the code that should be needed on such a simple design.

    IF I have time later since insomnia has set in, I'll take a stab at a quick rewrite from scratch just to show you what I mean. It will likely swing an axe at 90%+ of your HTML, 75%+ of the CSS that's in use, and probably most all the "JS for nothing"... since there is no legitimate excuse for 300k of CSS or 1.3 megabytes of JS for THAT!
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Join Date
    May 2014
    Posts
    936
    Ooph, starting the rewrite I found stuff even worse -- like attributes that don't even exist on certain tags... for example Anchors do NOT have type or value attributes.

    It's a wreck.
    Java is to JavaScript as Ham is to Hamburger.

  5. #5
    Join Date
    Jun 2014
    Posts
    3
    Thanks you guys i got it working!

  6. #6
    Join Date
    Jun 2014
    Location
    New York, NY
    Posts
    30
    that is great..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles