Hello,
I just changed the fonts on my website so its all uniform and now everything is just cutting off on the top. I though it was my computer being weird but its happening on my phone and iPad too. Please help me fix as we are close to launching the website and I am unable to fix this issue. See pictures attached for reference
About us page
Desktop cut off
iPhone cut off ---- on phones its also cutting the first line.
Recycling Page - Title Cut off
BRPublicTest3!!
Welcome to the Shopify community!
Thanks for your good question.
Please share your store URL.
It’s password protected. Share your Store front Password as well as.
So that I will check and let you know the exact solution here.
Store URL is at the end of the pictures with password. Thank you for looking into this.
It’s password protected. Share your Store front Password as well as.
Password: BRPublicTest3!!
@BanianRoots
Kindly share page link on which pages it’s occur.
its ocurring on all pages
@media screen and (min-width: 1200px){
body:not(.template-index) .main-content {
padding-top: 120px !important;
}}
@media screen and (min-width: 749px){
body:not(.template-index) .main-content {
padding-top: 182px !important;
}
}
Add this code in the timber.scss file.
@media screen and (min-width: 749px){
.grid.product-single {
padding-top: 186px !important;
}}
Add this code also and save it.
@BanianRoots
Remove previous and try out this.
@media screen and (min-width: 1200px){
body:not(.template-index) .main-content {
padding-top: 120px !important;
}}
@media screen and (min-width: 749px){
body:not(.template-index) .main-content {
padding-top: 182px !important;
}
}
@Zworthkey it worked on the laptop. However, there is a little bit more space now?? AND on the phone its still cutting the title and the first line…See pictures attached
Extra Space
iPhone Still Cutting Off
@media screen and (min-width: 749px) {
.grid.product-single {
padding-top: 154px !important;
}
}
where did you paste that? Assets>theme.scss.liquid> and then paste it at the bottom at the very end?
At timber.scss file.
@Zworthkey Its not working.
I have tried the following codes under timber.scss.liquid:
@media screen and (min-width: 1200px){
body:not(.template-index) .main-content {
padding-top: 120px !important;
}}
@media screen and (min-width: 749px){
body:not(.template-index) .main-content {
padding-top: 182px !important;
}
}
@media screen and (min-width: 749px) {
.grid.product-single {
padding-top: 154px !important;
}
}
@media screen and (min-width: 1200px){
body:not(.template-index) .main-content {
padding-top: 120px !important;
}
}
@media screen and (min-width: 749px) {
.grid.product-single {
padding-top: 154px !important;
}
}
@BanianRoots
In my view it’s working fine.
Let’s give me collaboration access. So that i can help you properly.
Stand by send you a message
@media screen and (min-width: 1200px){
body:not(.template-index) .main-content {
padding-top: 120px !important;
}}
@media screen and (min-width: 749px){
body:not(.template-index) .main-content {
padding-top: 182px !important;
}
}