how to make the header bar smaller on mobile

This topic has 4 replies, 2 voices, and was last updated 5 years, 11 months ago by Skandha.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
November 19, 2018 at 2:01 pm #159623

adeptvisuals
Participant

adeptvisuals.com

On mobile, the header bar is nearly half the screen. Is there a way to have that shrunken a lot for mobile only?

Also is there a way to reduce the site logo size? I think that may be part of the issue.

Thanks

November 20, 2018 at 4:12 am #159656
Skandha
Participant
@adeptvisuals: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
@media screen and (max-width:64em) {
	.site-branding {
		padding:0 !important;
	}
	.custom-logo {
		margin:0;
		max-width:100px;
	}
}
```
Let me know if this is what you want!
Kind Regards,
Skandha
November 20, 2018 at 2:15 pm #159705

adeptvisuals
Participant

Thanks a ton. For the most part it worked. I still don’t see much of the header image on mobile though. If there is a way to make that happen it would be awesome. If not, then oh well.

THanks

November 21, 2018 at 6:14 am #159768

Skandha
Participant

@adeptvisuals: There seems to be an issue with the header image on iPhones. I will look into the issue and get back to you soon.

Kind Regards,
Skandha

December 3, 2018 at 5:47 am #160618
Skandha
Participant
@adeptvisuals: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
@media handheld, only screen and (max-width: 668px) {
    #fullpage .section{ 
     	background-attachment: scroll;
    }
}
```
Let me know if this solves the issue on mobile phones.
Kind Regards,
Skandha
Author

Posts