Shopify themes, liquid, logos, and UX
Hello, I'm having a hard time trying to fix it...
in the phone view, the logo of my store is not centered.
the searching icon is not in place too in both platforms.
website URL: https://authenticpet.com/ - 3144
Solved! Go to the solution
This is an accepted solution.
Hi @Idob
Try this one.
@media only screen and (max-width:749px){
.header__icons.header__icons--localization.header-localization {
padding-right: 0px;
}
details-modal.header__search details {
width: 40px;
}
.header {
padding-left: 15px!important;
}
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
I took a look at your site, and it looks like you're using the Debut theme. The logo and search icon placement looks fine on desktop, but it's off-center on mobile. I think you'll need to edit the CSS code for the theme to fix the mobile view. I would recommend creating a child theme so you can make the changes without affecting the original theme. Can you tell me a bit more about your technical skills? Are you comfortable with HTML and CSS?
Hi, Thank you for your answer. unfortunately I don't really have any coding skills..
mostly, I just copy paste CSS codes to Design my site.
I come to solution with my logo right now thanks to @PageFly-Theodor.
The only remaining task for me is to fix the icon search.
Just to inform you, I use TASTE theme. 🙂
I'm glad to hear that you were able to solve your logo issue! Now let's focus on the search icon. I see that the Taste theme's search icon is not quite in the right spot. That's a simple fix that doesn't require any coding skills. In your Shopify admin, go to Online Store > Themes > Customize. Then, click on the "Search" section on the left-hand side. From there, you should be able to adjust the search icon's position by clicking and dragging it.
Hey, I cant find the place where I need to drag the search-icon...
Assets ->Basseee
Hi @Gustavo1105,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Center Searching Icon And Centering Logo On Phone View, let’s try this solution:
Online Store ->Theme ->Edit code
Assets ->Base.css
.header{
padding: 0px !important;
}
I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
there's a little bit of a problem with this code...
now the header content is very aside
I found A fix For that problem:
.header{
padding: 0px !important;
}
.header{
padding-right: 30px !important;
}
.header{
padding-left: 30px !important;
}
still having problem with the search-icon if someone can help it will be perfect.
This is an accepted solution.
Hi @Idob
Try this one.
@media only screen and (max-width:749px){
.header__icons.header__icons--localization.header-localization {
padding-right: 0px;
}
details-modal.header__search details {
width: 40px;
}
.header {
padding-left: 15px!important;
}
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024