Products not in a row on mobile device

  • Resolved dogdaysofsummer

    (@dogdaysofsummer)


    6 years, 7 months ago

    Hi I have a problem: As I didn’t want just one product shown in my product catalogue on mobile devices I used the following code to show two per row:

    @media screen and (max-width: 768px)
	{.page-template-template-fullwidth-php .site-main ul.products.columns-4 li.product, .page-template-template-homepage-php .site-main ul.products.columns-4 li.product, .storefront-full-width-content .site-main ul.products.columns-4 li.product {
    width: 49%;
    float: left;
    margin-right: 1%;
		}}

    Unfortunately now every 5th (or sometimes 7th or whatever) item is alone in its row, something like that:

    O O
    O O
    O
    O O
    O O
    O O
    O

    I’ve read several threads on this topic but nothing I tried helped. Does anyone know something else I could try? ??

    Thanks so much!
    Cheers, Diana

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

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi Diana

    Was looking for an answer to something and found your question – I just happen to know this one from a previous search.

    Try this instead…

    /*
    * 2 product columns on mobile
    */

    @media (max-width: 768px) {
    ul.products li.product {
    width: 48%;
    float: left;
    clear: both;
    }

    ul.products li.product:nth-child(2n) {
    clear: none;
    float: right;
    }
    }

    The following might also be handy for lining up your add to cart buttons when some titles are all on 1 line and others over 2 lines.

    /* Force 2 line title inclusve */
    .woocommerce ul.products li.product h2 {
    line-height: 2.5ex;
    height: 5ex; /* 2.5ex for each visible line */
    overflow: hidden;
    }

    Hope that helps!
    Bob

    One other thing.. I see your product search link doesn’t work in the mobile handheld footer.

    FYI, I installed Smart WooCommerce Search…

    https://www.ads-software.com/plugins/smart-woocommerce-search/

    Go to the plugin options (Dashboard>Smart Search>WooCommerce Default Product Search) and changed options to show only featured image, product title and price. Set max 4 results so the ‘view all’ button is still visible on small screens.

    Then added this css to display the search full screen which I think works best on mobile.

    /* handheld footer full page search */

    .storefront-handheld-footer-bar ul li.search.active .site-search {
    padding-bottom: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    }

    If anyone has any improvements on this please comment!

    Bob

    Thread Starter dogdaysofsummer

    (@dogdaysofsummer)

    Hi Bob,
    wow, thank you soooo much for all the information! My problem was solved 100% and you even gave me some extra information I was wandering about as well (the “Force 2 line title inclusive”). Again, thank you so much!!

    About the search: Thanks for making me aware of this problem and for your suggested solution. I tried everything you wrote but unfortunately it is (still) not working; there is a window popping up when tapping on the search icon but you are not able to write anything in. Do you know a solution for that as well?

    Again, thank you so much!
    Cheers,
    Diana

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Products not in a row on mobile device’ is closed to new replies.