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?
In Canada, payment processors, like those that provide payment processing services t...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025