A user seeks to right-align a custom HTML section on desktop while keeping it properly displayed on mobile. The section currently appears far left on desktop but should align below share icons, matching the layout of another product page on their site.
Initial Attempts:
.grid with justify-content: center or rightWorking Solution:
Current Status:
Theme Context: User is working with Beautify theme (trial version expiring)
I have a custom HTML section on my website. It shows perfectly fine on mobile. However, on desktop it shows to the far left. I want to align it to the right below my “share icons”.
Here’s my custom HTML code:
<div style="text-align: left;">
<div style="text-align: left;">
<font size="2">
XX
</font>
<b> </b><p style="color:#3E0994">
<b>About this product: </b> </p>
<font size="2">
<p><b>? Auspicious Ambiance:</b>
</font>
</div>
</div>
Hi @Janhavi
Would you mind to share your store URL website, with password if its protected? Thanks!
Can u pls share a code sippet I can add. Either to the main liquid/ css file or the custom HTML/css block here
Can u pls share a code sippet I can add. Either to the main liquid/ css file or the custom HTML/css block here. My URL is https://theurbanoasis.shop/products/water-sensor-reflection-led-diya?variant=47045725749541
My url is https://theurbanoasis.shop/products/water-sensor-reflection-led-diya?variant=47045725749541
Ok, I will try fixed the issue.
Hi @Janhavi
Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above tag
.grid.grid-spacer {
justify-content: right;
}
If I managed to help you then, don’t forget to Like it and Mark it as Solutions
Hey @Janhavi
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi, @Janhavi .
Follow These Steps.
Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.
.grid {
justify-content: center !important;
}
Result:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Websensepro
Okay that is great, I added the code but that’s not how I want it. I want the alignment to look exactly like this page here https://theurbanoasis.shop/products/posture-corrector-belt : I am using debeautify theme here, and since the trial version is expiring I want to have a custom code which is able to align it like this.
I want the alignment to look exactly like this page here https://theurbanoasis.shop/products/posture-corrector-belt : I am using debeautify theme here, and since the trial version for debeautify is expiring I want to have a custom code which is able to align it like this.
I want the alignment to look exactly like this page here https://theurbanoasis.shop/products/posture-corrector-belt : I am using debeautify theme here, and since the trial version is expiring I want to have a custom code which is able to align it like this.
Hey @Janhavi
Remove the previous code and add this code with the same steps.
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
You can full of content images add the product description.
Goto Product add full content add description.
Like these:
And save now.
Follow These Steps.
Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.
.product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
overflow: scroll;
height: 90vh;
}
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Websensepro
Hi, still not aligned. It doesn’t flow correctly. See how everything is left aligned with the “ADD to cart button” and of the perfect width on this https://theurbanoasis.shop/products/posture-corrector-belt page but it does not show the same way after adding your code here. Also there is a unnecessary " grey line" below the share icons which I’d like to remove
@Janhavi You can add your costum HTML Section in description section.
What are u saying? I want the “ALIGNMENT” to exactly look like this and not what u have shared. https://theurbanoasis.shop/products/posture-corrector-belt
Omg u are super smart, it works now. I added the html to the description section. https://theurbanoasis.shop/products/water-sensor-reflection-led-diya?variant=47045725749541