example responsive media query for tablet?

  • What should be my media query for tablet?
    Below you can see my queuing script in my functions.php, the main stytle sheet has no media query, and my mobile style sheet is /child_media_600_max.css.
    I have added an child_media_600_min.css style sheet too, for the case that I want to exclude something from mobile.

    But for tablet I would need a min-max combination, since that screen size is in between mobile and desktop.

    How would that min-max media query ideally look for tablet?

    I know that this is not mobile first approach that I don’t understand that enough to be able to code it.
    So I would start out like this.
    I just need am other style sheet for table, and I need to write a min-max media query for tablet that has both a minimum and a maximum viewport size limit.

    These media queries below are not defined for viewport size but for pixels, but I haven’t found yet example media queries for viewport size (much smaller numbers) because I know that only the viewport size matters and not the actual device pixels, because non-desktop devices despite that have a very high actual resolution, they “fuse” multiple pixels into one virtual pixel, so that’s why only the viewport size matter, not the actual pixel size. Viewport size is scaled down pixel dimensions.

    I need separate style sheets also because Not just that I want different layouts and sizes, but I also want different structure and content on different devices. Which might not be a good idea but I don’t now what else to do about it at the moment. For example some desktop content like ads, need to be hidden on mobile becausde there is simply no place left for it on mobile. I was told this is not a good practice and that I just should create fallback css so that the layout shifts instead of removing content or changing content among devices, because if a new devices comes in, that might have content that will not properly fit on the screen, because of the new custom device viewport size.

    Could someone give an example of a media query for tablet, that would cover all tablets, making sure that that layout could not be extended to desktop or mobile?

    function my_load_child_theme_styles() {

    if ( ! defined( 'WPEX_THEME_STYLE_HANDLE' ) ) {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array(), '1.0' );
    }

    // First de-register the main stylesheet (which is now your child theme style.css)
    wp_dequeue_style( WPEX_THEME_STYLE_HANDLE );
    wp_deregister_style( WPEX_THEME_STYLE_HANDLE );

    // Add the parent style.css with the main style handle
    wp_enqueue_style( WPEX_THEME_STYLE_HANDLE, get_template_directory_uri() . '/style.css', array(), WPEX_THEME_VERSION );

    // Re-add child CSS with parent as dependency
    wp_enqueue_style( 'child-css', get_stylesheet_directory_uri() . '/style.css', array( WPEX_THEME_STYLE_HANDLE ), '1.0' );

    wp_enqueue_style(
    'child_media-css', // stylesheet handle
    get_stylesheet_directory_uri() . '/child_media_600_max.css', // stylesheet file URL
    array( WPEX_THEME_STYLE_HANDLE ), // dependencies
    '1.0', // stylesheet version
    'only screen and (max-width:600px)' // media query
);

wp_enqueue_style(
    'child_media-css', // stylesheet handle
    get_stylesheet_directory_uri() . '/child_media_600_min.css', // stylesheet file URL
    array( WPEX_THEME_STYLE_HANDLE ), // dependencies
    '1.0', // stylesheet version
    'only screen and (min-width:600px)' // media query
);

    

}
add_action( 'wp_enqueue_scripts', 'my_load_child_theme_styles', PHP_INT_MAX );
Viewing 4 replies - 1 through 4 (of 4 total)

  • There’s no such thing as a breakpoint that would cover all tablets. Tablets come in all shapes and sizes. There are tablets with larger displays than some laptops, and mobile phones with larger displays than some tablets. There is no clean separation between mobiles, tablets and desktops. Media queries and breakpoints are not supposed to represent specific device classes. The point of a breakpoint is to indicate when things break, hence the name.

    The right breakpoint to use depends entirely on your layout. As you resize the screen if your layout starts to become to squashed, or overflow the display, or does anything undesirable, you should use that screen width as a breakpoint, and use a media query to change the styles at that size so that your layout is no longer broken. Then you continue resizing and when that layout breaks introduce a new media query with that breakpoint and add styles to fix the layout at that size. Repeat that process until your site looks good across all screen sizes.

    Thread Starter berry metal

    (@erikalleman)

    Thanks for sharing the window resize trick!
    What I did is I made a max 600 px width stylesheet for mobile phones.
    I know mobile first should be min width, but I am not at that point yet.
    Only viewport size matters actually, so an 1300 PX with flagship Samsung or iPhone will still be included in the max 600px width stylesheet because the high res phones use simulated pixels, so they convert 4 actual pixels into 1, I suppose exactly this is why, so we don’t have to make so many breakpoints?
    I made the mobile style sheet because almost all my dimensions are defined in vw units on my site – because that results in responsive layout across all desktops (devices with approximately same aspect ratio).
    But for mobile, because it’s a very different aspect ratio, some VW units need to be changed – that’s why I made the mobile stylesheet.
    Plus, I need to hide some things on mobile simply because I have a columns based design on desktop and my columns are horizontally related… kind of a grid layout.
    So I cannot just make those columns wrap down into other columns on mobile, because the items in my columns are horizontally related.
    I show ads in a column on desktop and I need to remove the whole ads column on mobile because there’s no place for it in portrait aspect ratio.
    I was told showing/hiding things is wrong, instead content needs to be reflowed to be fluid.
    Thing is, I have a full screen grid layout on desktop, with horizontal relations.
    That cannot be reflowed into portrait view on mobile.
    So if you need different layout on mobile, you need different style sheet for mobile, is that right? (If you cannot reflow it).
    Now the mobile max with that is simple.
    But for tablet, there must be both a min width and max with, so it’s getting complicated.
    Is your window resize method for finding breakpoints totally safe meaning that new device sizes and aspect ratios wouldn’t cause layout issues?
    If I want to find the min and the max for tablet should I resize the window on a tablet? If I need both min and max, this means that I have to observe 2 breaks in the layout while resizing?

    Can you recommend a company that can fix this or counsel for this professionally for a good price?

    Thanks!

    Thread Starter berry metal

    (@erikalleman)

    I am on mobile now but I will send a screenshot of my layout if you could tell anything.

    Thread Starter berry metal

    (@erikalleman)

    Hi,

    this is my layout in my posts:

    flameshot_screenshot

    and in my home page:

    flameshot_screenshot

    The post layout is the trickiest, the columns.
    It’s impossible to reflow it into mobile aspect ratio, because on mobile there is only place for the list items (reflowed: text under image), so that will be the only column, and it’s not possible to just make a related posts column and an ads column beneath the list items column, because both the ads and the related lists (posts) are horizontally related to the list items, each.
    And people can’t scroll down so much.

    I have never seen this layout anywhere.
    But for desktop, it works fine, as a grid.

    It’s a flush bottom layout so every time I add a list item to the list (post), I must add a related ad space or ad, and 2 related posts (lists).

    So I had to remove both the ads and the related posts columns for mobile, in my mobile style sheet.

    Screenshot:

    View post on imgur.com

    Screencast:
    https://www.youtube.com/watch?v=jYsevZZCGG4

    If you can say anything further, it would be much appreciated.
    I am struggling to make my unusual layout reflow and fluid on all devices.

    Thanks.
    Best regards!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘example responsive media query for tablet?’ is closed to new replies.