Hello,
I’m creating a widget by copying and pasting a code.
I’m working from desktop.
If I embed the code into a blog page, it happears properly, so all works well: I can see several pictures, the amount of people and the calendar on the right and the design is correct.
I attach 2 picutre called “Real effect” to show how should be the widget on desktop.
If I embed the code into a product page, the design is not as should be: I can see only one picture, I cannot see calendar and I cannot see the amount of people, becuase they are squizzzed down at the bottom of the page. This layout should be for mobile, where the page is less wide.
I attach 1 picutre called “Not Real effect” to show the error.
I want that on product page, the result is like the one that I have on the blog page.
Someone has some idea hot to fix it?
Thank you in advance
Hey Kevin,
Sounds like a CSS issue—probably something in your theme or widget code is treating the product page differently than the blog page. A few things you could check:
- Container Width – The product page might have a more restrictive container size. Try wrapping the widget in a
with a fixed width or use max-width: 100% in CSS.
- Flexbox/Grid Issues – If the widget relies on flexbox or grid, check if the product page overrides it, causing the elements to stack incorrectly. Inspect using Developer Tools (F12 > Elements) to see what’s affecting it.
- Media Queries – Sometimes, themes force mobile styles on certain pages. Look for @media rules in your CSS and see if any apply to the widget specifically on the product page.
- JavaScript Conflicts – If the widget depends on JavaScript, the product page might be blocking some scripts. Try loading the widget later using window.onload to ensure everything is in place before rendering.
If you’re working on web design, VectorStock promo codes can help you save on high-quality icons, graphics, and stock images for your site. Might come in handy for improving those product pages too!