Center Product Shortcode on Mobile

  • Resolved austin0852

    (@austin0852)


    4 years, 8 months ago

    I’m trying to center these products on mobile: https://i.imgur.com/0t5WhNY.jpg

    I’ve tried almost everything I can think of… Editing padding for mobile with Elementor page builder doesn’t work even though it appears the way I want it to in the preview.

    I’ve found the selector for the product columns and tried CSS such as:

    @media (max-width: 575.98px)  
.products.columns-2 {
    float:none !important;
}

    And many other CSS codes to no avail. Any help would be greatly appreciated!

    • This topic was modified 4 years, 8 months ago by austin0852.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • George Appiah

    (@gappiah)

    4 years, 8 months ago

    The rule float: none per se doesn’t center anything 😀

    You have a flexbox on the list container, so use justify-content: center; to vertically align the entire list container.

    Thread Starter austin0852

    (@austin0852)

    4 years, 8 months ago

    Thank you for responding! I tried adding that CSS code and it didn’t center the products on mobile. See code below:

    @media (max-width: 575.98px) 
.products.columns-2 {
	justify-content: center;
} 

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px)
.products.columns-2 {
	justify-content: center;
}

    Is there something else I need to do or have I done something wrong? I’m testing on an iPhone 11.

    • This reply was modified 4 years, 8 months ago by austin0852.
    George Appiah

    (@gappiah)

    4 years, 8 months ago

    Your code is wrong: you’re missing the outer brackets for the media queries.

    @media (max-width: 575.98px) {
.products.columns-2 {
		justify-content: center;
} }
    • This reply was modified 4 years, 8 months ago by George Appiah. Reason: Fixed a typo
    Thread Starter austin0852

    (@austin0852)

    4 years, 8 months ago

    That fixed it! Thank you so much!

    • This reply was modified 4 years, 8 months ago by austin0852.
    • This reply was modified 4 years, 8 months ago by austin0852.
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Center Product Shortcode on Mobile’ is closed to new replies.