How can I fix the positioning of my title “Products” so that it starts exactly above the products from the featured collection below, not slightly to the left? I would also like to move the “View All” button so that the gap where it ends is equal to that of the gap before the “Products” title starts.
website: https://revtekautoparts.com/
I have attached a diagram to help you better understand.
Thank you in advance.
Hey @revtekautoparts ,
To fix the positioning of the “Products” title and adjust the “View All” button alignment, you can modify the CSS of your Shopify theme. Here’s a general solution:
Follow these steps:
Online store
Themes
Edit code
Find the template file for the featured collection, usually under Sections or Snippets. Look for a file like featured-collection.liquid.
Add CSS:
Open the theme’s CSS file, typically found under Assets, with names like theme.css or styles.css.
/* Adjust the alignment for the "Products" title */
.featured-collection-title {
text-align: left;
margin-left: 0; /* Ensure no extra space on the left */
margin-right: auto; /* Align the title to match product alignment */
}
/* Align the "View All" button to match */
.featured-collection-view-all {
text-align: right;
margin-right: 0; /* Adjust spacing to align correctly */
margin-left: auto; /* Ensure gap consistency */
}
Refresh your website to see the updated alignment.
Please contact me via email, so I can help you with my best experience and ensure your theme looks great.
If I was able to help you, please don’t forget to Like and mark it as the Solution! Thank you!
Hello @revtekautoparts
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
RESULT:
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there
Here is the code for Step 3:
.collection:has(.collection__view-all) > * {
padding: 0 5rem !important;
}
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.
That fixed the view all button part but didn’t change the collection title. Also, it completely changed the layout on mobile.
That fixed the view all button part but didn’t change the collection title. Also, it made the title appear on two separate lines on mobile.
Didn’t work
Could you please replace it by this code instead?
@media screen and (max-width: 1024px){
body .collection:has(.collection__view-all) > * {
padding: 0 5rem !important;
max-width: 100% !important;
}
body .collection:has(.collection__view-all) .collection__title{
max-width: 100% !important;
}
}
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.
Hello @revtekautoparts
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.
@media only screen and (min-width: 990px) {
.collection:has(.collection__view-all) .collection__title {
max-width: 95% !important;
}
.collection:has(.collection__view-all) .collection__view-all {
max-width: 85% !important;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
This depends on the theme you’re using even if you use code it won’t work, what theme are you using?
To fix the alignment of your title and button in the featured collection, you can adjust the CSS to ensure everything lines up properly. Here’s how:
Locate the CSS File:
Add or Adjust Custom CSS: Add the following CSS to align the title and button:
.featured-collection__title {
text-align: left; /* Aligns the title */
margin-left: 0; /* Removes extra left margin if any */
}
.featured-collection__button {
text-align: left; /* Aligns the button */
margin-left: 0; /* Matches the title alignment */
margin-top: 10px; /* Adjusts spacing between the title and button */
}
.featured-collection {
padding: 0 20px; /* Adds consistent padding to align with product grid */
}
@media (max-width: 768px) { /* Adjustments for mobile */
.featured-collection__title,
.featured-collection__button {
text-align: center;
margin-left: 0;
}
}
Replace .featured-collection__title, .featured-collection__button, and .featured-collection with the actual class names for these elements if they differ in your theme. Use your browser’s Inspect Tool to confirm the class names.
Save and Test:
For a code-free solution, EasyEdits allows you to visually tweak element alignments. You can test it during the free trial and keep your changes forever. Fair disclaimer I am the developer, and can answer any questions!
Let me know if you need help identifying the correct classes or further fine-tuning the layout!