Enable Mobile View on Tablets

Hey Chrystal,

the responsiveness of your site stems from CSS media queries. These queries look like so:

@media screen and (max-width: 980px) {
}

Media queries are like switches, and they handle style declaration for different browser widths. In the very case of the media query I posted above, it holds any styles for browser windows that are up to 980px wide. As far as I know, a Kindle’s resolution is 600x800px (except for DX and Paperwhite).
You can look up different device resolutions on Google. Mind you, there are an awful lot of them.

Your media queries are located in your
wp-content/themes/responsive/core/css/responsive.css

Try overriding them as you see fit.

emilyTK-

Thanks for the reply. I have been playing with the coding since you wrote and it does not seem to be picking up. Maybe I am not editing correctly?

I first tried to remove the code within the 980 width brackets and replace it with the code from a smaller width. I also tried changing the 980 width to a smaller width; so I am pretty sure I am editing the wrong thing :/

Sorry if I sound like a flake- this is the first time I have ever played with media queries and I am just confused.

Quite the learning process though!

Hell yeah, that learning curve is steep alright. ??
Here’s something that might be of interest:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Mind the comments, too.

As for your problem: Are you working directly inside the responsive.css or did you make your own stylesheet? (Remember, CSS usually serves whoever comes last, so almost any declaration can be overriden by whatever you put after it. Same goes for the order in which your stylesheets are included into the page.)

Also: For any changes, try using Chrome or Firefox dev tools first to make them, then see what happens.

yep- I have Firebug loaded onto Firefox when I do my editing.

I have a child theme set up- so I thought that this could be what was causing the new stylesheet to not work correctly.

I see it this way.. the time I spend trying to problem solve is an investment to becoming better ?? It’s just frustrating when the answer does not come easily- lol.

Let me give the newest link you posted a try and I will let you know!

CSS really has some mean edges to it. I remember how it was when I started with it and just didn’t understand why the hell an element wouldn’t move where I was saying it should move to. Gave me a couple headaches. And they were almost all about selector hierarchy.

Here, I want you to have something:
https://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
This article is old, but not as old as my headaches; I had to figure it all out for myself. It is however not old enough for being absolutely right.

so… I am beginning to wonder if it is how the WPTouch plug in reads the screen sizes. I am not getting the style sheet to work properly for detecting the tablet screen size. I tried to look at the coding to see how this is picking up. I want the tablet to view the WPTouch mobile plug in..not sure how to re-direct this.

Does the media query tell the plug-in to work with certain screen sizes? hmmm…

ugh… thanks for the link above ?? I have used a lot of CSS while hand coding pages- but I created the rules then… there are so many additional style sheets and code to pick from with WP!

Hummm, does your site look overall different on your Kindle from how it looks when you resize the browser window on your PC to 600px?

Maybe you should just contact WPTouch support directly. Because they really know that plugin way better than anyone here. You can ask a question in their support forum here:
https://www.ads-software.com/support/plugin/wptouch
They also have a knowledge base on their website here:
https://www.wptouch.com/support/knowledgebase-category/troubleshooting/

Hope it’ll turn out fine for you

emilyTK- I got frustrated enough after trying several versions of mobile plug-is’s with nothing working that I created a second site. LOL.. yes, I know this is not the most conventional way of approaching the issue (will need to update two blogs, etc.).. but it resolves my issue for the time being. I ended up just creating a re-direct for every page to go to the mobile version (m.chrystalbuczakdesigns.com).

Are there easier ways to approach this other than a re-direct (since our first idea didn’t work)… only took me a few hours to re-create a mobile friendly version- so it wasn’t too bad- I am thinking more of the future updates involved.

In future start off in a mobile-first approach. So you make your mobile site first with CSS, and then move onto other resolutions. Doesn’t sound like much but it makes things sooooo much easier.

Chrystal, I’m exactly like you in that I trashed all the media queries of my parent theme and styled my website from scratch. Because adjusting an already responsive theme to an entirely new content really is a pain.

What Andrew said is a good tip to get you started. The mobile-first approach is indeed one way to go, and a lot of professionals choose to build websites that way nowadays. Just work yourself up, breakpoint by breakpoint, from smallest to biggest viewport widths. (This means, you’ll be putting min-width in media queries rather than max-width.)
You won’t need a lot of these breakpoints either. Even if, for some reason, Twenty Fourteen has 12 or 14 (!) of them: two or three breakpoints usually suffice.