Display 2 Columns of products on all devices, below 800px of screen width

  • Resolved tagor3

    (@tagor3)


    4 years, 9 months ago

    I tried to modify Header.php, by making a child theme

    <meta id=”viewport” name=”viewport” content=”width=800″>
    Found out it doesn’t work like that.

    Is there a way to do this with Additional CSS ?

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

Viewing 1 replies (of 1 total)

  • Adding the following CSS code should make your product listing pages show two columns on all devices with screens less than 800 pixels wide (overriding any other settings in Storefront):

    @media screen and (max-width: 800px) {
   .site-main ul.products li.product {
     width: 48% !important;
     margin-right: 0 !important;
     clear: none !important;
     float: left;
   }

   .site-main ul.products li.product:nth-of-type(2n+1) {
     clear: both !important;
     margin-right: 4% !important;
   } 
}
Viewing 1 replies (of 1 total)
  • The topic ‘Display 2 Columns of products on all devices, below 800px of screen width’ is closed to new replies.