Hello,
I am looking to move the collection title to either above or below the image. Currently, it is displayed across the center, which makes them look a bit cluttered. I have attempted to find a solution, using various suggestions, but I have not found one to work for me. My site is knotsbygemini.com, password fahffo.
Thank you in advance!
Go to your store click on Actions > Edit Code
Assets > theme.css or theme.css.liquid add below lines at the bottom of the file
.collection-grid-item {
margin-bottom: 50px !important;
}
.collection-grid-item__title.h3 {
position: relative !important;
color: #000;
font-size: 18px !important;
margin: 13px 0;
}
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
Awesome! Thank you, Savior! If I wanted to use the text above the image, would I make a change to the code you supplied me with?
Yes you can do this by making HTML edits just go to main-collection.liquid and move the collection-title div above the image div >> https://prnt.sc/25amkq1
If you didn’t understand please share the main-collection file code.
If any solution helped you please don’t forget to like and accept it as a solution to help other people.
@Savior Thank you! That worked perfectly!
@Savior Hello again. I would like to increase the font size of the titles. When I increase the font size to any number over 18px, some titles on the mobile view end up being cut off and the spacing is off on others. Any help would be greatly appreciated!
.collection-grid-item {
margin-bottom: 50px !important;
}
.collection-grid-item__title.h3 {
position: relative !important;
color: #000;
font-size: 18px !important;
font-family: ‘Avenir Next Semi Bold’ !important;
margin: 13px 0;
}
Yes you can add this CSS only for desktop and tablets
Then for mobile you can add different CSS.
If you want your CSS to not affect mobile then add you CSS within below lines
@media only screen and (min-width:767px){
ADD HERE…
}
if you want different CSS for mobile then add within below lines
@media only screen and (max-width:767px){
ADD HERE…
}
If after adding this CSS if it does not work then please add ! important at the end likd below
font-size: 18px ! important;
Hope this helps you!!!
If helpful please like and accept as solution for any queries DM or mail at shopify.dev.34@gmail.com.
I noticed that after making some changes to the collection title location, an odd scrolling issue happens on the mobile home page. The collection links seem to get stuck at times with partial scroll type bars displayed on the right-hand side. Any help would be appreciated!
You want to remove the scrollbar appearing at the rightside in mobile homepage?
@Savior No not that. You may not see what I am talking about until you return to the home page after going to a collection. After scrolling up and down on page in the center of the screen it will appear. It seems like this only occurs to the section with the collections. If you go the very right hand side of the screen and scroll the entire page will scroll up and down no problem.
yes, how do you get there?
