Support » Plugin: WooCommerce » Product display grid not aligned in center

  • Resolved myfakename

    (@myfakename)


    Hello,

    If you scroll down to NEW PRODUCTS and SALE, the products listed below lean to the left. How do I get this to display in the center? Thanks in advance!

    [moved link to appropriate field]

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

Viewing 12 replies - 1 through 12 (of 12 total)
  • Stef

    (@serafinnyc)

    What browser are you seeing it left aligned? Looks okay to me. I mean is it 5/16 of an inch over, yeah, but then it’s a responsive theme. You’re going to have to do some CSS to fix that.

    Hello,

    I’ve checked on both Edge and Safari. The white space between the image and border is a lot larger on the right side than on the left and I can’t figure out how to get it to appear more evenly.

    Stef

    (@serafinnyc)

    Can you post a screenshot and circle the area you’re referring to please?

    Use something like Imgur to post it here

    Its slight, but I can see the wider margin on the right. This has occured because a fixed width has been assigned to your product blocks in your custom css:

    .shop-ribbon .products li {
      width: 185px !important;
    }

    If you increase the 185px to 200px the margins will be more equal. However you may have display problems at other viewport widths. A better approach is to use % widths with the rightmost product in the row having no right padding.

    It looks like you have a mature and popular theme and I’d be suprised if they haven’t got this right. Consider removing your custom css temporarily and then check the appearance.

    @serafinnyc Here’s the screenshot

    @lorro You’re right – changing the width from 185px to 200px did fix the centering but the products were unevenly displayed. So I tried changing the padding-right in custom CSS but nothing seems to be happening. It did change when I edited via Inspect Element.

    Checked in different browsers, incognito browser, different devices, etc. Where can I edit this bit of CSS? There are several style.css sheets (one main one which doesn’t have this bit of CSS, and 7 others each under different versions of WooCommerce subfolders)

    If nothing is happening although a change works with inspect element, your styles could be cached somewhere. Clear your browser cache and temporarily deactivate any cache or optimize plugins you might be running. Some themes have their own caching system. Check through theme settings for a clear cache option. Some hosts implement caching.

    Otherwise, its usually down to precedence. Styles loaded later in the page load cycle will have precedence. The best place for custom css is at:
    Dashboard > Appearance > Customize > Additional CSS
    because this loads last. You have some custom css here and it looks like you have some more in the theme’s additional css settings. Its easier to manage if all your custom css is in one place in my view.

    You can increase presidence of your custom css by using more selectors or by adding !important.

    I shouldn’t alter any theme or plugin stylesheets because any edits will be overwritten by updates.

    Stef

    (@serafinnyc)

    Thanks for the screenshot. You added margins rules in what appears to be two places that ruined the theme’s native rules. Line 68 should not have a margin like that at all. It will conflict with the product UL which is usually always set right by most authors.
    https://imgur.com/bIF2UZd

    Simply remove that #Content UL rule, add back the margin the way the author intended it to be…30px is dead on perfect and all will be right in the world. Don’t mess with the LI at all. You will most likely mess up displays throughout other devices.

    For best practices, never write code on the theme’s native style sheet directly. Use the Additional CSS inside Customizer and if you go to town on customizing the theme or you at least know you want to get funky with it, create a child theme and customize that instead. Try not to customize a parent theme or you will miss out on future updates to that theme and possibly create a nightmare for yourself down the road.

    Best of luck with everything.

    @serafinnyc Hmm odd, I didn’t add those rules in. I took a look at the theme’s demo site and it appears those have the same rules you highlighted?

    https://ibb.co/GcGgppd

    Link to the demo site

    Thank you so much for the tips on best practices. Very helpful for me to know! I reverted all changes I tested earlier in the stylesheet as soon as I saw they made no difference. As of now, the native CSS is as they were installed. No changes were permanently set.

    Stef

    (@serafinnyc)

    Did you create this install? I went to go look at demo before writing you just to make sure.

    The #content ul rule is find for standard lists, but it’s going to mess up ul.products rule.

    Emphasize a margin back to ul.products by 30px so it evens out.

    @lorro I will look for the option to clear WP cache. Thank you so much for the ideas and for kindly giving advice about CSS changes 🙂 Very helpful information for me!

    @serafinnyc I did not create it 🙂 Used below code in Additional CSS and it worked!

    ul.products.ribbon {margin-left:30px !important;}

    Thank you and @lorro so very much for all your help!

    • This reply was modified 2 months, 3 weeks ago by myfakename.
Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.