Hi I’m looking to move the size variant up so there’s more space between the bottom and top looks better
Topic summary
A user seeks to reposition the size variant selector on their product page to create better spacing between elements.
Problem: The size variant appears too close to other page elements, affecting the visual layout.
Solutions Proposed:
-
Sansaar’s approach: Provided CSS targeting
.product-single__meta>div:nth-child(2)with positioning adjustments, including hiding certain child elements and setting absolute positioning with specific width/positioning values. -
Ujjaval’s solution: Recommended adding CSS to the base.css file targeting
.product-blockwith modified margin-bottom (0px) and padding-bottom (11px), plus adjustments to.shopify-payment-termsmargin.
Both responses include code snippets and reference screenshots to illustrate the changes. The discussion remains open as the original poster has not confirmed which solution worked or provided feedback on implementation.
Hello,
Please check this span short you need just like this.
if Yes The Try this CSS
.product-single__meta>div:nth-child(2){
position: relative;
}
.product-single__meta>div:nth-child(2)>div:nth-child(3){
position: absolute;
TOP: 0PX;
RIGHT: 0PX;
WIDTH: 50%;
}
.product-single__meta>div:nth-child(2)>div:nth-child(3)>div:nth-child(1){
display:none;
}
@Luxurymrkt add below css into base.css file
.product-block {
margin-bottom: 0px !important;
padding-bottom: 11px !important;
}
.shopify-payment-terms {
margin: 15px 0 !important;
}
