WordPress.org

Forums

WP Tiles
[resolved] Small screen template not working (7 posts)

  1. fireaaway
    Member
    Posted 1 year 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?

    http://wordpress.org/plugins/wp-tiles/

  2. Mike Martel
    Member
    Plugin Author

    Posted 1 year ago #

    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

  3. fireaaway
    Member
    Posted 1 year ago #

    Sure, here's the website (WIP)

    http://66.7.200.105/~linavebe/wordpress/

  4. fireaaway
    Member
    Posted 1 year ago #

    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. :)

  5. fireaaway
    Member
    Posted 1 year ago #

    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.

  6. Mike Martel
    Member
    Plugin Author

    Posted 1 year ago #

    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

  7. fireaaway
    Member
    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.