Small screen template not working

  • Resolved fireaaway

    (@fireaaway)


    11 years, 3 months ago

    I’m having some issues with the small screen template – I can’t get it to work.

    I’m using this in my index.php to call the tiles:
    <?php if ( function_exists ( ‘the_loop_wp_tiles’ ) ) the_wp_tiles(); ?>

    My standard template looks like this:

    . . .
    . . .

    My small screen template is currently set to:

    .
    .
    .
    .
    .
    .

    I’ve tried changing the small_screen_width but nothing happens when I check on my phone or resize the browser window, it still shows the 6 tiles in 3 columns/2 rows. Am I doing something wrong?

    Also – is it possible to use two different small screen templates depending on the device screen size? I.e if the device screen is <480px, a 1 column template would be great, but if the device is >600px a 2 column template would look better. Any way to do that?

    https://www.ads-software.com/plugins/wp-tiles/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Mike Martel

    (@mike_cowobo)

    Hi there! Can you add a link to your website so I can see what is going on? One thing to keep in mind is that the template size is chosen based on container width, not on device size. Ie. if your content container is 400px wide, but your screen 1600px, you will still get the small screen template. The container is the first element above WP Tiles with position relative or absolute.

    Cheers,
    Mike

    Thread Starter fireaaway

    (@fireaaway)

    Sure, here’s the website (WIP)

    https://66.7.200.105/~linavebe/wordpress/

    Thread Starter fireaaway

    (@fireaaway)

    I got it to work after changing my meta tag from <meta name=”viewport” content=”width=device-width, initial-scale=1″> to <meta name=”viewport” content=”width=device-width”>. Not sure if that was the problem, but it’s working for now. ??

    Thread Starter fireaaway

    (@fireaaway)

    Still not acting quite the way I want it on a mobile device though. It seems to be stuck at a two column-template no matter what the screen size is. Might me my code that’s messy somehow though.

    Plugin Author Mike Martel

    (@mike_cowobo)

    Hi! First of all: your site looks very nice! Love the way the tiles sit in the page.

    Then, looking at current version: the small screen width seems to be set to 0 – ie. disabled. So it will never change to the small screen template. Set the small screen width to your breakpoint size.

    Secondly, the container that the tiles sit in has a fixed width.
    This is an example of what happens in the css:

    @media only screen and (max-width: 720px) and (min-width: 300px) {
    #content-wrap {
        width: 700px;
    }
}

    So, whenever the screen (or window) is narrower than 721px, but wider than 299px, the width of the content wrapper is set to 700px. This is wider than the window itself in most cases. Try using a max-width for this sort of stuff instead: then, the container tries to fill its parent container (probably the window) as much as it can, until it hits the maximum width. Result: the container will scale with the window, and at the appropriate time, the small screen template will be used.

    Good luck!
    Mike

    Thread Starter fireaaway

    (@fireaaway)

    Thanks! ??

    I had the small template width set to a bunch of different values to try it out and see what changed, but then disabled it when I was trying out something else. I did get it to work, sort of, just not in the way I wanted it. I realize it’s a fixed width issue and I’ll keep playing around with it until it works – thanks for your response and your great plugin!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Small screen template not working’ is closed to new replies.