Marlita, this page holds the live examples for the questions in your video. Three demo products were built with the same structure as your Idea Story page (Spectra container, Columns, the bordered right column, and the text in the Content Designer).
1. One picture for the shop, the video on the product page
The rule: the shop card always shows the first media item of the product. When that first item is a video, the card shows the video’s Poster image instead (the image you set with the pencil icon on the video). The product page simply plays the gallery in order.
That is why your two experiments each fixed one side only: picture first = picture in both places; video first = the video’s wide poster in the shop, cropped by the 3:4 card.
The fix: put the video first and give it your vertical picture as its Poster. All three demo products have the video first; the only difference between them is the Poster:
| Product | Poster on the video | Shop card shows | Product page shows |
|---|---|---|---|
| A: as built | Wide 16:9 thumbnail | Cropped in the card (your problem) | Video with the wide poster |
| B: fixed | Your vertical 3:4 picture | The vertical picture, uncropped | Video, the picture sits inside the frame with space on both sides |
| C: fixed and styled | A 16:9 image with the picture centred | The vertical picture (the card crops to the middle 3:4) | Video with a poster that fills the whole frame |
Steps on your site: SureCart > Products > open the course > Media. Drag the video to the first position. Hover the video, click the pencil icon, under Poster click Change Thumbnail and pick the vertical picture from the library, set Aspect Ratio to Wide 16:9, click Done, then Update the product. Keep the vertical picture as the second media item or remove it, both work.
For option C, make a 1920 x 1080 image in Canva with the vertical cover centred at full height and your brand colour or a blurred version of the cover on the sides. The shop card crops to the middle, so it shows exactly the cover, and the video frame shows the full designed image.
2. The big side margins on mobile
Product A is your current setup. On a phone the text is only about 200px wide, and it sits a little to the left. Four things add up, and they are all settings, not a bug in SureCart:
- Columns block padding 55px left and right. This is the main one. Padding on the core Columns block is the same on every screen size, so the 55px meant for desktop also applies on phones.
- Spectra Container padding 10px on the outer container, plus another 10px on the Spectra container inside your Content Designer text.
- The Product Form block is set to Wide. Under 1200px Astra pulls Wide blocks 20px to the left and right to let them bleed to the screen edges, but the SureCart product form is fixed at 100% width, so it only slides 20px to the left. That is the uneven gap you saw (more space on the right than on the left).
- Astra’s own 20px screen gutter, which is normal and stays.
Product B has the changes below. On a phone the text now runs edge to edge with a normal 20px gutter, and it is centred.
3. The right column stretching to the height of the left one
Core Columns stretch every column to the tallest one by default. Select the right Column block, click the Change vertical alignment icon in its toolbar and choose Align top. The bordered card then ends where its content ends. The sticky rule from my last email does the same thing (align-self: flex-start), so once you add the two class names both work together. Product B shows this: the card is short, and on desktop it stays in view while the left side scrolls.
4. Making the content wider on desktop
The width is set in one place: the outer Spectra Container in your product template. Select it, open the General tab, panel Container Type. Content Box Width is 900px on your site; product B uses 1200px, which matches the Astra site container. Together with removing the 55px Columns padding this is what makes B wider.
Everything that changed between A and B
| Block and setting | A: as built | B: fixed |
|---|---|---|
| Product Form block (the outer “Classic Product” block) | Align: Wide | Align: None (toolbar). Removes the 20px shift on phones; desktop width is unchanged at 1200px |
| Spectra Container > General > Container Type > Content Box Width | 900px | 1200px |
| Spectra Container > Style > Spacing > Padding (left and right) | 10px on all devices | Desktop 0, Tablet 20, Mobile 20 (use the device tabs) |
| Columns > Styles > Dimensions > Padding (left and right) | 55px | 0 |
| Right Column > toolbar > Change vertical alignment | Default (stretch) | Align top |
| Content Designer: Spectra container > Padding | 10px on all devices | Mobile 0, so the text uses the full width on phones |
| Columns and right Column > Advanced > Additional CSS class(es) | none | sc-pp-cols on the Columns block, sc-pp-right on the right column (the sticky rule from my last email targets these) |
After saving on your site, click Purge SG Cache in the admin bar and reload the product page with a hard refresh, otherwise you may keep seeing the old version.
A and B side by side at phone width
Both product pages are loaded below in a 390px frame. On a narrow screen this section is hidden; open the two product links above on your phone instead.
A: as built
B: fixed
Sources checked
SureCart plugin: the featured image of a product is its first gallery item; for a video it is the video’s poster, else the next image (Product model, getFeaturedImageAttribute and getVideoThumbnailOrFallback). The shop card uses the WordPress featured image (Cover block, “Use featured image”), which SureCart maps to that same item. Docs: Edit Media, Poster and Aspect Ratio, Product Pages Guide.
