A user seeks to customize the Empire theme’s product page layout by:
Desired Changes:
Proposed Solutions:
One responder offered to modify core files with collaborator access. Another provided CSS code targeting .pxu-tabs with media queries:
Current Status:
The CSS solution produces inconsistent results across different product pages—some display correctly while others don’t. The user requests refinement to add padding from the product image rather than from the top, and seeks code adjustments to ensure uniform behavior across all products.
Resolution: Remains open/unresolved. The discussion indicates the layout may require structural changes beyond CSS tweaks to achieve consistent results.
Hello, looking for some help.
We want to make the product information a bit smaller, to like half the size, with 2 tabs on the left side.
Also want to move it up so its under the picture, and side by side (aligned) with the elements on the right side.
Is this possible?
I made some quick photoshop so you can get an idea of what i mean.
How it is right now:
Expectation:
https://www.remlagret.se/products/drivrem-husqvarna-rider-pro-18-akgrasklippare
Thanks in Advance!
@emilbrandon Do you want something like this?
Yes something like that looks good, just a bit more padding from the picture, it does not need to be aligned perfectly with the elements on the right. But you have got the right idea.
@emilbrandon For this we need to make some modification in the core files. If you are comfortable in giving collaborator access I can fix that. You can email us or direct message us here.
Yes thank you a lot, send you an message.
@emilbrandon
Add below css
@media screen and (min-width: 719px)
{
.pxu-tabs.pxu-tabs--bottom-true {
width: 50%;
margin-top: -36%;
}
}
Hello @Ujjaval you get the idea, but can we add padding from the picture and not from the top? looks like this on some product pages it seems. if you could rework the code a bit i would be pleased!
Thanks in advance.
Still no solution of this, if someone knows how to fix our issue?
@emilbrandon Try below one
@media screen and (min-width: 1000px)
{
.pxu-tabs.pxu-tabs--bottom-true {
width: 50%;
margin-top: -36%;
}
.tab-radio:checked+.tab-label+.tab-panel {
padding-right: 4%;
}
}
or need to change structure of the product page.
@Ujjaval
Some products are fine and some are not.
This is fine:
This is not fine:
Thanks for trying to help us out!
