Header with text widget- issue ipad

[Leap]

Hello,
I am using the text widget in the header for my phone number; in the ipad the header is so large it takes up 1/2 the screen not allowing to see much of the content. (I do have a large logo 331px × 139px) The text widget drops down below the logo and causes the huge gap
I have tried many changes in my child theme css to correct this problem: NO fix

I’ve also had to tighten the css in the header just to make the header have less height with:

#primary-menu {
	margin-top: -40px;
}

Any help much appreciated have exhausted my understang of it.
Thanks in advance!

[Nexus]

Can you please provide us a link to your site? Thanks!

[Leap]

This reply has been marked as private.

[Raghavendra]

It is a little frustrating to change things from Firebug or developer tools. A login would have helped. But here is what I could manage for now.

#site-logo, #header.sticky #site-logo { top: 0; }
#sidebar-header { position: absolute; right: 0; top: 0; }
#sidebar-header a { margin-left: 20px;}
#primary-menu > ul.menu > li > a { line-height: 120px; }
.phone {
text-align: right;
padding-top: 5px;
}

@media screen and (max-width: 1024px) {
	#site-logo a img { max-width: 250px; }
}
@media screen and (max-width: 767px) {
	.phone { font-size:16px; }
	#site-logo { padding-top: 20px; }
}

Remove the
tag in the HTML inserted into the widget and change it to –

123-345-5678

Pls remove –

#header.sticky #site-logo {
	top: 5px;
}
#primary-menu > ul.menu > li > a {
	line-height: 100px;
}
#site-logo {
	top: 10px;
	margin: 10px 10px 0px 20px;
}
#primary-menu {
	margin-top: -40px;
}

/* Mobile layout */
@media screen and (max-width: 767px) {
 #primary-menu {
	margin-top: -20px;}
	.phone {
	padding-top:20px;
}

[Leap]

This reply has been marked as private.

[Leap]

This reply has been marked as private.

[Raghavendra]

This reply has been marked as private.

[Author]

Posts