can someone please help me center the collection list titles on top of the section. thank you.
https://3ubymh-9u.myshopify.com/password
test123
Topic summary
A user sought help centering collection list titles in the Ride theme. The initial solution involved adding CSS code to the section’s “Custom CSS” setting:
.title-wrapper-with-link {
justify-content: center;
}
This successfully centered the titles. The user then requested help centering the logo on mobile only. Two solutions were proposed:
Option 1: Add CSS to base.css file targeting the header element with media query for screens under 749px.
Option 2: Modify header grid layout and padding through Custom CSS, plus remove existing header-related CSS from theme.liquid file.
The user encountered an issue where the screen “wiggled” side-to-side with a horizontal scrollbar appearing after implementing the solutions. After removing unnecessary code and experimenting with different CSS combinations, the user found a working solution by tweaking the provided codes together.
Status: Resolved - user achieved desired mobile logo centering through custom CSS adjustments.
Add this code to the sections “Custom CSS” setting:
.title-wrapper-with-link {
justify-content: center;
}
Thank you so much! it worked. any way you can help me with centering the logo on mobile only? icons may need to be moved. thank you!!
Hi @LAL
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
@media (max-width: 749px) {
header.header.header--top-center.header--mobile-center.page-width.drawer-menu.header--has-menu.header--has-account {
padding-right: 0 !important;
}
}
Result
Best,
DaisyVo
Undo whatever “Custom CSS” you have in header section (also padding on header elements) and add this instead:
@media (max-width: 749px) {
.header-wrapper .header {
grid-template-columns: 6rem auto 6rem;
padding:0 1.5rem;
}
.header__icons {
padding-right: 0;
}
}
There is also a bunch of header-related CSS added into layouts/theme.liquid above – it should also be deleted.
not sure which css codes I should delete in theme.liquid could you point them out? thank you. the problem I am having is the codes mentioned above work to center everything but then the screen wiggles from side to side afterwards. scroll bar appears at the bottom. ???
This is not needed:
I had removed everything and only used your code and it didn’t look right the logo was very small, I tweaked a few codes together and finally found something that works for me. Thank you.