This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

@media properties on new Jump Start child themes odd

  • Creator
    Topic
  • #11806
    askwpgirl
    Participant

    Hi Jason,

    I noticed all the Jump Start child themes acquired some new @media query properties. However, these are very odd as on Tablets, the max-width is set to around 400 pixels instead of the width of the device, so there’s huge amounts of white space around the content. Was this a mistake? I’m having to do a lot of recoding of the child theme’s @media CSS compared to previous iterations of the child themes because these sizes are all a bit wonky.

    http://tinypic.com/r/fvwwhi/5

    Thanks! Maybe I’m missing something.

    Angela

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #11808
    karlo
    Participant

    You must have missed last several updates because this change came about in Jump Start 1.0.1 🙂

    I still think it is bad default and was one of the reasons I decided to use only 1 CSS file for all Jump Start things. Or almost only 1. Slider CSS is in own file and only loaded when/if sliders are active, 18.5kb less to drag around. 1 file is much easier and also more effective as lots of CSS can be removed – per site setup is possible for example. Only issue is updates which must be applied manually – after changes are nailed down via programs showing them, like WinMerge http://winmerge.org/ A bit tedious when there are many changes but 100% mandatory. If used to code editor and basic file management not a big problem. Is only CSS 🙂

    #11828
    Jason Bobich
    Keymaster

    However, these are very odd as on Tablets, the max-width is set to around 400 pixels instead of the width of the device, so there’s huge amounts of white space around the content.

    This all depends on how large your tablet is, I guess. The viewport cut off is 767px; so this is the point where you’ll get most mobile devices, but these days, that can vary greatly. — Note that a portrait iPad is 768px. So you should only be getting the smaller container if you’re on a smaller than average tablet.

    Was this a mistake?

    This is most definitely not a mistake. I create several themes that I have to support with thousands of buyers, and one major thing I learned in 2012 was that responsive design is very tough when you try to account for every possible scenario in a theme where the user has so much control over the content.

    So, the approach I take in Jump Start and all my recently updated themes on ThemeForest — Akita, Alyeska, Swagger, and Barely Corporate — is to essentially pick a few different container widths that kick in at the appropriate viewport sizes, a sort of “snap” effect as many people like to call it. The down side is with a ton of devices out there, you get a variation of space around the container depending on the device, with things looking the best on the most popular devices. However, the pay off is that when you’re designing you can design for the three different sizes only, and not whatever theoretical variations are going to come in between.

    Trust me, take this approach to responsive web design and your life will be much easier, these days with all the devices that keep popping up with different sizes. You maybe can do more than three viewport sizes, if you want, but this “snap” effect is definitely becoming a popular, clean way to do things.

    As an example, check out these two examples in the web browser on your computer:

    Alyeska v2: http://themeblvd.com/demo/alyeska (scales naturally)
    Alyeska v3: http://demoblvd.com/themes/alyeska (uses the new “snap” effect concept)

    Notice how v2 scales down in your browser. Scale it very slowly and look at all the flaws you can get by putting the browser at the “in-between” viewport sizes.

    Now scale down v3, and notice how cleanly it scales. You can’t find a flaw at any viewport size. Maybe you get some extra space on some viewport sizes, but outside of that you can’t get a flaw.

    I’m having to do a lot of recoding of the child theme’s @media CSS compared to previous iterations of the child themes because these sizes are all a bit wonky.

    The container widths are all based on Bootstrap’s default viewport sizes and the most popular devices. But the great thing about Jump Start, is all of this that I’ve described above in your control from your child theme’s style.css. The default style.css of Jump Start is just a skin. Use it, don’t use it, modify it, do whatever works for you. The point is you have the control. Set the site up the best way that works for you. This is a luxury you don’t really have with my other themes.

    And as @karlo pointed out, it’s been this way for awhile, and I hopefully won’t be changing it any time soon. It’s tough to refrain from a lot of updates when you’re personally invested in a project, but I know when big CSS changes happen like that, it causes headaches for people updating. So, I’m trying to keep thing consistent, and this the approach I’ve decided to take in most places.

    #11845
    askwpgirl
    Participant

    Thanks, that makes more sense as a way to streamline all the many @media queries, but yes, funky padding issues on those devices between 979 and 720 – particularly the 800 and 600 widths on some tablets. And, having the button nav appear at a larger viewport size was new, but that is changed easily enough.

    I probably was using old Jump Start Stretch child for longer than I realized.

    #11860
    karlo
    Participant

    I still do not get it as I would think of hidden flaws plus cry over not used pixels. Personal preference I guess. Also not sure what is difficult but support department knows better of course.

    True that responsive “flaws” are all over the place. But this is where BS and some inspector work helps. They can be fixed. When I played with bbPress I wanted to add 2 bbPress widgets under forum, in 2 columns. In accordion/toggle rolled up state. A bunch of short codes in widget area (ads after content I think) and done. And they acted normal under any widths. Took like 2-3 minutes but I did already have a thingy to haul in widget to posts/pages. Still very easy. If any issues I would have fired up RWD design tool in Firefox, fixed it fast. Or used values from a tiny script showing widths/heights of window in real time. That way issue is always in the face. Rest is basic CSS.

    Try compare how columns react with Tadlocks theme http://locallylost.com/unique/plugins/columns/ vs. Jump Start http://www.demoblvd.com/themes/jumpstart/features/shortcodes/columns/ Yikes vs. yummy. Or check his grid posts on front page. Major failure. No offense to him as he probably assume user fix but that is crap out of the box. If wrong plugins/CSS is used responsive can be hell so if snap setup helps to hide issues I guess it make some sense.

    CSS-Tricks site is good but notice how he struggles with bbPress http://css-tricks.com/forums/ widgets too. bbPress only recently got some responsive CSS I think. Perfection is difficult even for him.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.