0

I'm building my whole site using UIKit framework. I am having a lot of trouble getting the responsive grid to work, my code is attached.

I want the grid to stack on top of each other at all screens smaller than the medium break point. It works wonderfully when I resize the browser window, but doesn't work at all when I use chrome to test it in responsive test. Also it is worth noting that when I test the page locally without uploading it to the server, the responsive grid works just fine, but the responsive height and width class doesn't work

Thanks in advance

<section id="past">
  <h1 class="uk-responsive-width uk-responsive-height">What Have I Done?</h1>
  <div class="uk-grid" data-uk-grid-margin>
    <div id="ccb" class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-3">
      <a href="#ccb_des" data-uk-modal="{center:true}">
        <img id="ccb_thumbnail" src="img/ccb_thumbnail_resize.jpg" alt="Cranbrook Culture Book" class="uk-border-rounded">
      </a>
    </div>

    <div id="cfc" class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-3">
      <a href="#cfc_des" data-uk-modal="{center:true}">
        <img id="cfc_thumbnail" src="img/cfc_thumbnail_resize.jpg" alt="Cranes for Change" class="uk-border-rounded">
      </a>
    </div>

    <div id="trombetta" class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-3">
      <a href="#trombetta_des" data-uk-modal="{center:true}">
        <img width="300" height="200" id="trombetta_thumbnail" src="img/trombetta_thumbnail.jpg" alt="Trombetta Intern" class="uk-border-rounded">
      </a>
    </div>
  </div>
</section>
Chris Wang
  • 327
  • 4
  • 16
  • Make some codepen with your example ,so we can debug together. Classes uk-responsive-height/width should be used for media/video images rather than typography. And basically if you want to stack divs on smaller viewports - uk-width-medium-1-2 is enough. Also there can be problem with attaching scripts needed, show some of your html document. Another problem can be that you've harcoded width and height of img. – cssBlaster21895 Aug 19 '16 at 19:29
  • @cssBlaster21895 apologize for the noobiness, but how do I codepen? Also, if I don't hardcode my image's height and width, would I have to use photoshop to make their dimension smaller? My concern with that is it will make the image quality MUCH lower... – Chris Wang Aug 20 '16 at 07:32
  • codepen is easy, just add external sources from https://cdnjs.com/libraries/uikit and you are ready to go – cssBlaster21895 Aug 20 '16 at 21:18
  • @cssBlaster21895 Cool resource! I created a pen: http://codepen.io/chrisw53/pen/vKrroQ – Chris Wang Aug 21 '16 at 07:00
  • Add external resources inside pen settings, not inside body , I've made a fork of your pen -take a look http://codepen.io/anon/pen/qNGWjJ , also uikit needs jquery first. – cssBlaster21895 Aug 21 '16 at 17:43
  • @cssBlaster21895 Ahh cool! But this code still doesn't work... when you test the responsiveness by resizing the browser, it works. But if you take this code into real responsive testing aka chrome's dev tool or upload it to a server and open it with a smart phone, it doesn't work... My original problem remains... any insights? – Chris Wang Aug 22 '16 at 15:42
  • you can show your entire html file. Maybe your paths are not absolute and once they work within localhost - on the production environment - they don't. Also chome dev tools may be set to specific setting, maybe the emulation is on, just guessing. Maybe it can be also htaccess issue(you can show it). But it all smells like dev-production differences issue. – cssBlaster21895 Aug 22 '16 at 17:59
  • @cssBlaster21895 done (http://codepen.io/chrisw53/pen/qNGYYj). However I don't think it is a dev-production issue. Responsive here is handled by UIKit's js, which also handles smooth scroll and the animations, both of which works just fine. Chrome's responsive toolset is accurate, as I have the exactly the same behavior on my phone going onto my dev site. Speaking of htaccess, I did add this line: "AddHandler application/x-httpd-php5 .htm .html .php" awhile back for giggles (really just curious if it would work), but I don't think that's what's causing the issue here. – Chris Wang Aug 23 '16 at 09:37
  • images are mostly placeholders, I'm too lazy to find the url for all of them :p – Chris Wang Aug 23 '16 at 09:40
  • Responsivness lies in css mainly. And when I mean the path I mean css and js path, images are not so important. In codepen, you don't need to include html/body tags, they are already rendered. (take a look at bottom frame source). For now, no idea, your code within uk-grid looks ok. modals work. – cssBlaster21895 Aug 23 '16 at 12:56
  • @cssBlaster21895 damn it... Try it out in chrome's responsive test and you'll see what I mean :( – Chris Wang Aug 23 '16 at 14:30
  • I would, but ... ubuntu .... Getuikit is compatibile with chrome, I never even tested it, I take it for granted. You can create issue request on their repo or ask on gitter. – cssBlaster21895 Aug 23 '16 at 17:10

0 Answers0