Product page layout on desktop and mobile (Ticket 1511841)

Why both versions were showing at once

Your Responsive Conditions were set correctly. The reason they did nothing is outside SureCart.

Spectra prints the little stylesheet that actually performs the hiding (the rules for uag-hide-desktop, uag-hide-tab and uag-hide-mob) only when it finds blocks in the post content of the page being viewed. A SureCart product page is different: the product post content is empty, and the layout you build lives in a product template part, which SureCart injects while the page is being rendered.

So Spectra adds the uag-hide-mob class to your container, but never prints the rule that says what that class should do. The class sits there doing nothing, and both containers stay visible on every screen size. That is exactly what you saw.

Everything else about the containers keeps working (widths, padding, sticky). It is only the three visibility rules that go missing. That is why the 66 and 33 layout looked right and only the hiding failed.

See it live on our test site

This is a copy of your setup on a clean Astra site with Spectra installed, so you can see the problem and both fixes side by side. Resize your browser window narrow, or open these on your phone.

1. The problem, reproduced

Two Spectra containers, one set to Hide on Mobile, one set to Hide on Desktop and Hide on Tablet. No extra CSS. Both are visible at every width.

Open the problem page

2. Recommended fix: one layout, reordered on mobile

One single set of blocks. On desktop it is 66 and 33 with the right column sticky. On mobile it becomes one column in the order you asked for: picture, price, description, add to cart.

Open the recommended fix

3. If you prefer to keep two versions

Same two containers as page 1, plus three lines of CSS that supply the missing rules. On desktop only the desktop container shows. On mobile only the mobile container shows.

Open the two version fix

Option A: one layout, reordered on mobile (recommended)

This keeps one copy of every block, so there is no duplicated Add to Cart, no duplicated heading and half the page weight.

  1. Edit your product template part in the Site Editor.
  2. Delete the duplicate mobile container. Keep one two column layout: left column is the picture and the description, right column is the title, price and buy buttons.
  3. Select the Columns block. In the right sidebar open Advanced and put sc-pp-cols in Additional CSS class(es).
  4. Select the right column and give it the class sc-pp-right.
  5. Now give each block inside its own class, the same way: picture sc-pp-media, product title sc-pp-title, price sc-pp-price, description sc-pp-desc, buy buttons sc-pp-buy.
  6. Save the template part.
  7. Add the CSS below (see Where to paste the CSS).

The CSS:

/* SureCart product page: one layout, reordered on mobile */
/* Desktop: right column stays in view while the left one scrolls */
@media (min-width: 782px) {
  .sc-pp-cols > .sc-pp-right { position: sticky; top: 40px; align-self: flex-start; }
}
/* Mobile: flatten the two columns into one list, then choose the order */
@media (max-width: 781px) {
  .sc-pp-cols { display: flex; flex-direction: column; gap: 20px; }
  .sc-pp-cols > .wp-block-column { display: contents; }
  .sc-pp-cols > .wp-block-column > .sc-pp-title { order: 1; }
  .sc-pp-cols > .wp-block-column > .sc-pp-media { order: 2; }
  .sc-pp-cols > .wp-block-column > .sc-pp-price { order: 3; }
  .sc-pp-cols > .wp-block-column > .sc-pp-desc  { order: 4; }
  .sc-pp-cols > .wp-block-column > .sc-pp-buy   { order: 5; }
}

To change the mobile order, just change the order numbers. Lower number means higher up the page. If you want the title under the picture instead of above it, give sc-pp-title order 2 and sc-pp-media order 1.

Option B: keep your two containers

If you would rather keep the build you already have, leave both containers and their Responsive Conditions exactly as they are, and add these three lines. They are the same rules Spectra would normally print for itself.

/* Make Spectra Responsive Conditions work on SureCart product pages */
@media (min-width: 1025px) { body .uag-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { body .uag-hide-tab { display: none !important; } }
@media (max-width: 767px) { body .uag-hide-mob { display: none !important; } }

Once this is in place, Hide on Desktop, Hide on Tablet and Hide on Mobile start behaving on your product pages, and they will keep working on any product template you build later.

One thing to know about this route: both containers are still in the page source, just hidden. That means two product titles and two Add to Cart buttons in the HTML. We tested it and it works correctly, including on a product with size and colour variants, but it does double the markup and search engines will see the heading twice. That is why Option A is the one we recommend.

We also tested a product with variants using duplicated containers, so you can see for yourself that selecting a size and a colour still works and the right variant reaches the cart:

Open the variant test

Where to paste the CSS

  1. In WordPress go to Appearance then Customize.
  2. Open Additional CSS.
  3. Paste the CSS at the bottom and click Publish.
  4. Because your site is on SiteGround, click Purge SG Cache in the admin toolbar afterwards, then reload the product page with a hard refresh.

A small tip on testing: the Responsive Conditions toggles never preview inside the editor, by design. Spectra says so under the toggles. Always check on the real product page, not in the Site Editor canvas.

One correction on the settings themselves

In the video, one of the smaller containers had Hide on Desktop and Hide on Mobile both switched on, with the intention of showing it on mobile only. Those two together hide it everywhere except tablet. To show a block on mobile only, switch on Hide on Desktop and Hide on Tablet, and leave Hide on Mobile off. The breakpoints Spectra uses are: desktop from 1025px, tablet 768px to 1024px, mobile up to 767px.

Scroll to Top