How can I Center Searching icon and Centering logo on phone view

Store Design
, , ,
1

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

Screenshot (6).png
Screenshot (6).png1920×253 31.6 KB

Screenshot (8).png
Screenshot (8).png354×742 77.5 KB

1 Like
2

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?

3

Assets ->Basseee

4

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

5

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. :slightly_smiling_face:

6

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.

7

Hey, I cant find the place where I need to drag the search-icon…

8

there’s a little bit of a problem with this code…

now the header content is very aside

Screenshot (10).png
Screenshot (10).png1920×214 29.7 KB

9

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.

10

Hi @Idob

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@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!

1 Like