Shopify themes, liquid, logos, and UX
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)
Solved! Go to the solution
This is an accepted solution.
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@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!
Hi @Zakistar , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks
This is an accepted solution.
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@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.
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media (min-width: 1024px) {
.collapsible-content__header.scroll-trigger.animate--slide-in {
top: 108px !imporatnt;
margin-right: 55px !imporatnt;
}
}
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?
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025