Home>Support>Vantage: A single column for products on mobile version

Vantage: A single column for products on mobile version

By nsfetcu, 8 years ago. Last reply by nsfetcu, 8 years ago.

Hello,

On mobile version, the product archive has two columns (see it here http://www.gliling.co.uk/product-category/prints/) and the buttons are overlapping. Is it possible to change the mobile style from two columns to a single column?

Thank you,

Nicolae

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 28 days ago Alex S
    Hi, I Work Here

    Hi Nicolae,

    I can’t seem to replicate the overlap, but please navigate to WP AdminAppearanceCustom CSS and you’ll get our custom CSS editor. Please add the following CSS to force a one column layout on mobile devices.

    @media (max-width: 525px){	.woocommerce ul.products li.product,.woocommerce-page ul.products li.product,.woocommerce-page[class*=columns-] ul.products li.product,.woocommerce[class*=columns-] ul.products li.product {		width: 100%;		float: none;		clear: both;		margin: 0 0 2.992em	}}

    You might also need to install the SiteOrigin CSS Editor.

    Please note that due to not replicating the overlap, the overlap may still occur. Let me know if it does.

  2. 8 years, 28 days ago nsfetcu

    Hi Alex,

    I added the CSS to the child theme, but there are still two columns, you can check it.

    The buttons do not overlap because I change the text from ”Select options” to ”Select”. If/when I get a single column for mobile phone, I will change back the text.

    Best regards,

    Nicolae

  3. 8 years, 28 days ago Alex S
    Hi, I Work Here

    Hi Nicolae,

    I don’t seem to see the CSS in your markup. Do you have a cache plugin installed? If so, could you try clearing it?

  4. 8 years, 28 days ago Alex S
    Hi, I Work Here

    Hi Nicolae,

    Actually, disregard that. I didn’t see the mention of the child theme. Please try clearing your browser cache, and then refreshing the page to see if that helps.

    If that doesn’t help, let’s try forcing it. Please replace the previous CSS with:

    @media (max-width: 525px){
	.woocommerce ul.products li.product, .woocommerce-page ul.products {
		width: 100% !important;
		float: none !important;
	}
}
  5. 8 years, 28 days ago nsfetcu

    Hi Alex,

    The cache was not activated, but maybe my mobile has some cache, now I see one column, no need to try the last CSS code.

    Thank you!

    Nicolae

    I want to mark this thread as resolved, but i do not see the option.

  6. 8 years, 28 days ago Alex S
    Hi, I Work Here

    Hi Nicolae,

    Glad it’s sorted! :)

    You can mark the thread as resolved by scrolling to the initial post and tick, “This is resolved”.

  7. 8 years, 27 days ago nsfetcu

    I see that it is already checked. Thank you again!

    Nicolae

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More