No announcement yet.

Responsive theme question

  • Filter
  • Time
  • Show
Clear All
new posts

  • Responsive theme question

    As I am building my site, I have noticed that I HATE the fact that when in a PC browser the site will still re-size down to mobile level. Even if no one is really minimizing their window that much.

    Is there a way to tell the site NOT to re-size if its in a PC browser, and only to re-size itself on tablets and mobile devices?


  • #2
    Great point.
    As I understand it, the CSS is set up to look for screen size regardless of the the device. I hope one of the advanced coders would chime in.


    • #3
      I would be interested in this as well. Having a problem with the subcategory icons squishing up when the PC version gets resized.



      • #4
        There are two ways you can look at a situation like this.

        1) "yes - we should be able to customize by user agent so that everyone gets a super tailored experience"

        argument for -> a customized user experience tailored to one's device

        argument against -> the codebase can quickly get sloppy and the minute you try and make a chance or do maintenance - theres a good chance something will get missed.

        2) "no - user agent sniffing is bad - if you have to specifically target a device, theres a flaw in how your css is structured and you're barking up the wrong tree"

        argument for -> the title kinda says it all here. if you have to write a hack to sniff the user agent to fix a display issue.. theres a deeper display issue involved.

        argument against -> if you are not in full control of your codebase or frankly dont care about long term maintainability or code standards.. what's it going to hurt.


        ultimately, there is no css feature to do something like what you are asking to do. This was on purpose. Media queries were invented to make the website flexible across devices and give the designer the tools to make decisions based upon what screen resolution/width/whatever was at hand. When executed properly, this is all that is needed.

        What would need to happen in order for you to accomplish what you are asking needs to be done in conjunction with some javascript. The user agent can be detected using JS and at that point you could add a class to the html element indicating the user agent or even if it falls within a certain group that you determine. From there, using that class in the css (either .class-name to apply only to that class, or .other-class:not(.class-name) to apply to everything else besides a particular class.

        Personally, my argument is against doing such a thing. Whether or not your user is on a phone or a desktop, the results really should be consistent at a given resolution. Tweaking elements to perform correctly can be done in other ways.


        • #5
          Thank you jleclair for the clarification.


          • #6
            Thanks for the responses! Looks like there is no easy way to do it, and some of you even suggest against doing it. I guess I just personally don't like it, but other people may enjoy it. And like I stated before, not many people will be minimizing their windows to less than 500px, so they will probably never even see it! I appreciate the help. Now to post my next question!


            • #7
              Love the Responsive Sites!

              I will often have multiple things going on my monitor at once and I love how the responsive screen automatically fills to the size I choose. You can also check out how your site is looking without having to pull out a phone or tablet. It is really amazing!!!