Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #35570
    Heather Spencer
    Guest

    Hi,
    I’m using your Cobalt theme which I love, thank you for your great work. I’ve got an issue with column width on the woocommerce product listings in the portrait mode of the mobile version. They originally were displaying in two columns, and I’ve used a code to get the product listings into a single column, but it’s only taking up about one half of the available width in portrait mode, so it appears quite small. Is there a way to get that column to use the available space ?

    This is the code I used to get it to the single column. But you’ll see how narrow it is in the mobile version.

    @media screen and (max-width: 768px) { .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product { width: 100% !important; } }

    You can see it on this page https://momentofperception.com/product-category/house_of_cards/generalgreetingcards/
    Thanks for any help.

    #35574
    Jesse Owens
    Keymaster

    Hi Heather-

    Thanks for reaching out, and thanks for the question about using WooCommerce with the Cobalt WordPress Theme. And a special thanks for helping us comply with the WordPress Forum guidelines by moving your original question over here.

    As I mentioned in the original question, your Custom CSS code here would normally work out-of-the-box with Cobalt, but it looks like you have another Custom CSS rule that’s interfering:

    .container,.infinite-footer-container,.page-template-template-builder-php .entry-content>.twitter-share {
    padding: 0 100px;
    }

    Since that rule uses the general .container class, it’s also adding 100 pixels on both the left- and right-side of your mobile view. I’d modify your Custom CSS rule like this:

    @media screen and (max-width: 768px) { 
    .woocommerce ul.products[class*=columns-] li.product, 
    .woocommerce-page ul.products[class*=columns-] li.product { 
    width: 100% !important; 
    } 
    main.container { padding: 0 10px; }
    }

    That way, you can keep the custom padding on .container as well as make sure that your products are large enough on narrow screens. You can adjust the 10px value to suit your preferences.

    #35579
    Heather Spencer
    Guest

    Yeah ! Jesse, thank you soooooo much, it worked !!!!!!!!
    It’s so nice to know you guys are here. This is new to me, and it’s been quite a challenge getting things set up, I really have come to admire what you guys do.

    Anyway, if you can help me with two other issues, that would be awesome, but if not, no worries.

    1) On the checkout page, there’s a ” Create an account ? ” bar about halfway down ( right below the PayPal Button ). I’ve been trying to make it the length of the other bars, but I can’t get it to do that on both the desktop and mobile versions. This is the code I have right now

    #customer_address_details > div.woocommerce-billing-fields > div > p.form-row.form-row-wide.create-account.woocommerce-validated > label > span
    { background-image: linear-gradient(180deg, #ce7fed 0%, #2c0a45 20%, #2c0a45 80%, #ba59e0 100%, #ce7fed 100%); padding-right: 14% ; margin: auto; padding-left: 40px; padding-top: 12px; padding-bottom: 12px; }

    You’ll need to put something in the cart to see the checkout page.

    2) As you have already seen, I have WordPress pages, and Woocommerce pages. I’m using ” Asset Cleanup ” to unload as much as I can from each page, to help with page speed. All of the css changes in the customizer go into one file on their unloader, so I made sure I only have Woocommerce oriented changes there, and I unload that off the WordPress pages. My problem is that every time I touch that customizer, it reloads that file, and I have to go back and re-unload it on 10 pages. I’ve read about enqueuing, and it sounds like that’s what I should do with what I currently have in that file, but I’m lost on php coding. I’ve read quite a few how to’s, but they all assume you’re already familiar with that type of coding. Can you either help walk me through it, or point me in the right direction ? If that’s too much, I sure understand.

    Thanks again for all your help.
    Best,
    Heather

    #35611
    Joseph W
    Keymaster

    Hi Heather!

    I took a look at your Checkout page and I wrote some CSS that should allow that Create an Account? button to stretch to the length of the other bars on that page.


    .woocommerce-checkout .create-account .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    }
    .woocommerce-checkout .create-account .woocommerce-form__label-for-checkbox span {
    width: 100%;
    }

    That code worked in the development tools in my browser, so hopefully it has the same effect when implemented through your website’s Customizer.

    I think the best place to get help for the issues with the Asset Cleanup plugin is in their public support forums on WordPress.org. Their team should be able to help you write the appropriate enqueue scripts so you don’t have to reload your CSS on every WooCommerce page if you make a change. I also recommend trying out Code Snippets for managing custom PHP scripts on your website. That plugin allows you to add custom PHP without having to directly modify the functions.php file in your theme and should prevent your custom code from being overwritten whenever the theme files are updated.

    Please let us know if you have any other questions for us!

    #35615
    Heather Spencer
    Guest

    Hi Joseph,
    Thanks so much for your time and effort, I really appreciate it. That code didn’t work, but it led me to one that did, so thank you so much for that. I’ll definitely give that Code Snippets a try, sounds like a great idea.
    Take Care,
    Heather

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Column Width for Mobile WooCommerce’ is closed to new replies.