Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

Idob
Shopify Partner
21 0 5

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).pngScreenshot (8).png

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
9043 2160 2665

This is an accepted solution.

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;
}
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1698607488790.png

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 9 (9)

kensington
Shopify Partner
18 1 1

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?

Idob
Shopify Partner
21 0 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. 🙂

kensington
Shopify Partner
18 1 1

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.

Idob
Shopify Partner
21 0 5

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

Theodore2
Shopify Partner
5 0 0




Assets ->Basseee

 

 

PageFly-Theodor
Shopify Partner
691 86 103

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.

Idob
Shopify Partner
21 0 5

there's a little bit of a problem with this code...

 

now the header content is very asideScreenshot (10).png

Idob
Shopify Partner
21 0 5

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.

Made4uo-Ribe
Shopify Partner
9043 2160 2665

This is an accepted solution.

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;
}
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1698607488790.png

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.