pinpoint style customization issues

[naveenpn]

Hi,
I’ve the following issues and cannot figure out how to do them. Any help would be greatly appreciated:

1) I’m adding the site tagline via the Header Options > Header phone number text as HTML and it two lines. The spacing between the lines is too much and doesn’t look good (especially on mobile). How can I reduce the spacing between the lines?

2) How can I reduce the width occupied by logo and increase the width of the header items the right side of the header?

3) There seems to be a lot of margin at the top and bottom of the header. How can I minimize this?

4) How can I remove the highlighting of the images on “Recent posts” using the accent color? You can see it mid way on home page under “Electronic Device Service”. Also I do not want the “heart” icon to appear when its highlighted.

I would be grateful if someone can help me out.

[Rui Guerreiro – SUPPORT]

Hi,

Regarding your requests:

1) Add the code below to your custom css.

@media only screen and (max-width: 767px)
.logo-left #logo, .logo-right .header-items {
margin-bottom: 0px!important;
}
}

If you want to hide any element of the header in the mobile view let us know. Maybe just the logo and the social icons. Just a thought.

2)

Add the code below to your custom css option
I placed the current width values, adjust to your needs

#logo{
width: 340px!important;
}

.header-items{
width: 520px!important;
}

3)
Try the css below. Adjust the first and last 15px value to your needs. The 1st is the margin-top and the last the margin-bottom

#header-section {
padding: 15px 20px 15px!important;
}

4) Do you want to remove the blue overlay and keep the Heart icon and the counter? Or it’s to remove everything?

[naveenpn]

Hi,
Thanks for the quick response. All seems ok. For #1, yes, please provide details on how to hide specific parts of the header for mobile. For #4, I want to remove the overlay & the heart icon with the counter.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-
1-
@media only screen and (max-width: 767px){
/*Hide social icons*/
.header-items .social-wrap{
display:none !important;
}
}

4-`.recent-post figure .overlay{
display:none !important;
}`

Thanks
Mohammad

[naveenpn]

Thanks for your quick help!

[Mohammad – SUPPORT]

Hi,
You most welcome and i am glad that you managed to resolve the issue.
Thanks
Mohammad