A user seeks to reposition the heading of a Collapsible Content section in the Dawn theme to align horizontally with product rows, rather than appearing above them. Screenshots illustrate the current layout versus the desired alignment.
Solution Provided:
Follow-up Issue:
After implementing the first solution, the heading requires further left alignment to match the text rows exactly.
Additional Fix:
Supplementary CSS adjusts top margin and right margin values to fine-tune the heading’s horizontal alignment with the collapsible rows.
The solution involves editing the theme’s CSS file (theme.css or base.css) through the Shopify code editor. The discussion appears resolved with working code provided.
Hello and thank you for all the help in advance!
I would like to move my heading of Collapsible content to be right side of the photo (not above), just over the rows.
I’m attaching the screenshot of what it looks like now.
And one screenshot of how I want it (I know its not the same section, hence the problem)
Hi @Zakistar , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks
Hello @Zakistar ,
Could you please provide the URL/ password to your store so that I can check it and provide you with the exact solution?
@media(min-width:1024px){
.collapsible-content__header.scroll-trigger.animate--slide-in {
position: relative;
top: 80px;
left: 34px;
}
h2.collapsible-content__heading.inline-richtext.h1 {
font-size: 28px !important;
margin-bottom: 0 !important;
}
.grid.grid--1-col.grid--2-col-tablet.collapsible-content__grid.scroll-trigger.animate--slide-in .grid__item:nth-child(2) {
height: 50% !important;
padding-top: 65px;
margin: auto !important;
}
}
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 
(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!
Great, that worked!
However is it possible to align the heading with the rest of the text? (move it more to the left to align with rows)
attaching screenshoot.
@media (min-width: 1024px) {
.collapsible-content__header.scroll-trigger.animate--slide-in {
top: 108px !imporatnt;
margin-right: 55px !imporatnt;
}
}