Support » Plugin: WooCommerce » Changing Product Page Layout Per Device

  • Is there a way to add to the shortcode so the layout is different for different devices?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Not using a shortcode, but you can control layout to a degree with custom css which kicks in at a given resolution, so:

    /* all resolutions */
    #main {
      font-size:15px;
    }
    /* for viewports 768px or less */
    @media only screen and (max-width:768px) { 
      #main {
        font-size:14px;
      }
    }
    /* for viewports 480px or less */
    @media only screen and (max-width:768px) { 
      #main {
        font-size:13px;
      }
    }

    It can take a while to style a site for a range of resolutions even if you are comfortable with custom css.

    I was meaning how to get the columns different on different devices. Like for instance, cell phones show everything in 1 column but I’d like 2 and tablets show 3 columns but I’d like 4. Is that possible?

    Yes, using the method described. You would need to set the width and margins of product blocks for different resolutions. It takes a while to get it to look right, and it can be difficult to improve on what your theme’s designer has done.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing Product Page Layout Per Device’ is closed to new replies.