Hi all,
So just building my website and managed to center all my headings/rich texts so that my page flows nicely.
However there are two stubborn elements that won’t center -
1. (Search Bar) on my Search Page.
2. Product Page heading (Products) isn’t centred correctly because of sort by bar on right hand side?
(I don’t mind if this is centred or left aligned).
Thanks in advance -
This is my code thus far in theme.scss.liquid:
}
.rich-text {
text-align: center !important;
}
.rich-text .section-header {
text-align: center !important;
}
.rich-text h2 {
text-align: center;
}
.template-index .featured-products h2 {
text-align: center;
}
.section-header__title {
text-align: center;
}
h1 {
text-align: center;
}
1 Like
Hello,
you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!
Please Share your store live url & screenshot where you want to do modification, so that I will solve your issue here!
1 Like
@ledgendzline
Please share your store URL and a screenshot.
1 Like
Thank you in advance - let me know how that goes 
https://ledgendzline.myshopify.com/
@ledgendzline
Please share store password.
Thanks!
1 Like
Also just noticed (Login) and (Create Account) pages are not centred.
Just fixed: in assets > timber . scss . liquid (Keeping as reference for others)
}
.template-customers-register .grid__item.wide–one-third.large–one-half.small–text-center {
float: none;
margin: 0px auto;
}
.template-customers-login .grid__item.wide–one-third.large–one-half.small–text-center {
float: none;
margin: 0px auto;
}
@ledgendzline
please Go to Online Store->Theme->Edit code then go to assets/timber.scss.liquid ->paste below code at the bottom of the file.
@media screen and (min-width: 769px) {
.template-collection .section-header__title--left {
display: table-footer-group !important;
vertical-align: middle;
width: 60% !important;
position: absolute !important;
}
.template-collection .section-header__link--right {
display: table-cell;
vertical-align: middle;
text-align: right;
width: 40%;
margin-top: 0;
}
.template-search .search-bar {
max-width: 50%;
margin: 0 auto;
}
}
1 Like
Thank you, the search bar is perfectly centred.
However the products heading, is too much to the right next to the sort by bar.
If it is to annoying to center I’m happy to left align it.
Thank you in advance.
hello @ledgendzline
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
for center collection page title
@media only screen and (min-width: 759px){
.template-collection .wrapper.main-content .section-header__title.section-header__title--left{
margin: 0 auto;
width: 45% !important;
}
}
1 Like
Hi there, thanks for the reply.
I copied the code in, but I think somethings conflicting its task.
I copied dmwwebartisan’s code, which moved it a little to the right.
I deleted his code:
I put natztech’s code in, which moved it back here.
@ledgendzline
Please try this code
@media only screen and (min-width: 759px)
.template-collection .wrapper.main-content .section-header__title.section-header__title--left {
margin: 0 auto;
width: 54%!important;
text-align: right;
}
1 Like
That worked, aligned to left, happy with that. But it made my page corrupt
I used this code and changed the width to 0% from 45%
@media only screen and (min-width: 759px){
.template-collection .wrapper.main-content .section-header__title.section-header__title--left{
margin: 0 auto;
width: 0% !important;
}
}
Thank you all for your help on this it was super frustrating!
Thank you!!
Thnk you for accepted my answer please click on like my 10 old post it would so greatful to us
1 Like
