Pinpoint Site Logo padding/spacing

[jamespomalley]

Hello Support,

I am customizing Pinpoint for a not-yet-live, responsive website.

Can you tell me how to modify the padding around the site logo box?
When open on a desktop computer the spacing looks pretty good, but when reduced to a small screen or window, the entire screen is only the site logo surrounded by white, which requires lots of scrolling and does not “feel” responsive at all.

The Rev Slider also has a similar “surrounded by white” feeling, but taking one thing at a time…

Any help is greatly appreciated!

James O’Malley
WP 3.9.1
Pinpoint Theme: 1.6.2

[Kyle – SUPPORT]

Hi

Please can you show me your link so I can see what you mean?

– Kyle

[jamespomalley]

Hi Kyle,

Thank you for your reply.
The site is being built and is in maintenance mode. I will turn that off so you can see what I mean.

The screen sizing I am most concerned about is from mini tablets to phones, where the responsive scaling appears to stop around the header area leaving lots of white and very little site.

brazilianaire.net

Thank you! Jamie

[Kyle – SUPPORT]

Please can you screenshot the space that you want to reduce?

– Kyle

[jamespomalley]

Hi Kyle,

I have added two pics: Larger frame size and the reduced responsive size.

I also tried making the logo top and bottom white smaller before uploading it, but Pinpoint’s retina logo area simply scaled my smaller logo and it aliased at all sizes.

Ideally I would understand how to play around with the responsive sizes in a child-theme, so I can make the logo thinner, adjust the padding and when figured out, then any theme update will not wipe the changes.

Thank you, Jamie

[Kyle – SUPPORT]

Hi

You logo is not cropped, it has space above and below, this is contributing to the white space in your header. Please upload the logo attached instead

Than add this to your custom css:

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

– Kyle

[jamespomalley]

Hi Kyle,
Yes, I went back to the original logo one to avoid the aliasing.

Thank you for the cropped png and code.

I added it to the Pinpoint Options/General Options/Custom CSS.

It tightens all but the smallest frame sizes beautifully.
The two smallest still have issues, and I noticed that those two are with the dropdown menu;

Is the dropdown menu padding adding to the white area? Is that also adjustable?

Thanks so much!

[jamespomalley]

Additional Note:

I noticed on my iPhone that when the dropdown is touched, a different dropdown opens with a pretty cool slider-type selector (unfortunately it’s not touch responsive as it requires hitting DONE once you stop on the desired page name), but since the actual dropdown does not “drop” on a phone screen, the padding is not really critical.

Cheers, Jamie

[Kyle – SUPPORT]

Try adding this to your custom css:

@media only screen and (max-width: 768px) { 
.header-items.nine.columns {
  display: none;
}
}

The menu is a standard iPhone function for menu’s

– Kyle

[jamespomalley]

Hello Kyle,

Your code works perfectly.
Thank you so much for your excellent help solving this situation!
Have a great week.
Best, Jamie

[Kyle – SUPPORT]

No problem 🙂

– Kyle