Not displaying properly on mobile device. Header too large

David created the topic: Not displaying properly on mobile device. Header too large

Hi my site is displaying very badly on mobile devices when I checked it on MobileTest.me
The header takes up the whole screen.

On Desktops it's mostly OK except,
On some magnifications the tabs menu on the right side of the header logo picture extends down below the width of the logo banner.
Since they have the same background color this menu should never be taller than the logo header Image.

my site is HairOlicious.com

Thanks,
David

Below is the custom code I have that the developers provided:
I think the issue is my header width for laptops is too wide for the cell phones but I'm not sure.

/*Changes page title color*/
div.before_blog_1 .entry a {
text-decoration: underline;
color: #009933;
}

/*Sets underline style and color to links*/
.single-post .entry a {
text-decoration: underline;
color: #cc00cc;
}

/*Changes the color and font-size of headings*/
h1, .single-post .entry h1 {
color: #009933;
font-size: 55px !important;
}
.single-post .entry h2 {
color: #009933;
font-size: 40px; font-weight;800; !important;
}
.single-post .entry h3 {
color: #009933;
font-size: 35px !important;
}
.single-post .entry h4 {
color: #8920a0;
font-size: 24px !important;
}
.single-post .entry h5 {
color: #8920a0;
font-size: 20px !important;
}
/*get rid of italics*/
p, .single-post .entry p {
font-size: 24px;
font-style: regular !important;
}

/*body font size see www.wpbeginner.com/plugins/how-to-hide-p...press-single-pages*/
body { font-size: 25px !important; }

#top-nav-list.top-nav-list { font-size: 0px !important; }

/* Changes title text to SOME STRANGE 14 COLOR*/
.bwg_slideshow_title_text { color:#f92109; }

/* Changes description font-size to PRETTY BIG DOESN\\\\\\\'T WORK */
.bwg_slideshow_description_text { font-size: 40px; }

/* Changes button text to green */
.business_elite.btn_trans { color: #8FFF96; }

/* Font size for menu Changes font size of top nav */
#top-nav > div > ul > li > a, #top-nav > div > ul > li > a:link, #top-nav > div > ul > li > a:visited, #top-nav > div > div > ul > li > a, #top-nav > div > div > ul > li > a:link, #top-nav > div > div > ul > li > a:visited { font-size: 20px !important; }

/* Header scroll*/
header.sticky_header {
position: fixed;
height: 15 px;
z-index: 10;
top: 0;
}

.before_blog_1 { margin-top: 200px; }

.custom-header-a img {
width: 100% !important;
margin: 0 auto;
display: block;
}

@media only screen and (max-width : 767px){
header.sticky_header { height: 30px; }
header.sticky_header>div { margin-top: 5px; }
.before_blog_1 { margin-top: 60px; }
}

#top-nav > div ul, #top-nav > div > div ul {
background-color: rgba(153,255,102, 0.1);
}

#top-nav {
box-sizing: border-box;
position: relative;
z-index: 15;
text-align: right;
}

#menu-button-block {
background-color: #32ce04;
}

/* css line 2985 to 3004 chg button block for cell phones to below code */
#menu-button-block {
background-position: right center;
background-repeat: no-repeat;
background-position-x: 96%;
margin-bottom: 10px;
position: relative;
top: 0px;
height: 0px;
width: 20%;
}

#menu-button-block a, #menu-button-block a:link,
#menu-button-block a:visited, #menu-button-block a:active,
#menu-button-block a:focus, #menu-button-block a:active {
padding: 6px 0px 0px 16px;
color: #fb1818;
text-align: left;
font-size: 15px;
display: block;
height: 15px;
}

/* css line 2985 to 3004 chg button block for cell phones to above code */
body {
font-family: Open Sans, sans-serif;
font-weight: normal;
letter-spacing: 0.00em;
text-transform: none;
font-variant: normal;
font-style: normal;
}

#93125

Please Log in or Create an account to join the conversation.


Anoush replied the topic: Not displaying properly on mobile device. Header too large

Hi David,

Thanks for using our themes.

We are kindly asking you to share the link to your website and tell us what exactly do you want to change?

Thanks and have a wonderful day!

#93199

Please Log in or Create an account to join the conversation.


David replied the topic: Not displaying properly on mobile device. Header too large

Hi my site is hairolicious.com/
It displays fine on a laptop but on a cell the header logo is way too small and the menu items are below the header not to the right of the header as they should be.

#93277

Please Log in or Create an account to join the conversation.


Anoush replied the topic: Not displaying properly on mobile device. Header too large

Hi David,

Thanks for using our Themes :)

Please note that the theme has been developed in this way. In small screens, the logo and menu should appear in the center of the screen.

This way it looks beautiful and user-friendly.

Thanks and have a good day!

#93355

Please Log in or Create an account to join the conversation.


Time to create page: 0.139 seconds
Powered by Kunena Forum

WORLD-CLASS SUPPORT

We are here for you every step of the way. Turn to our support with any questions you might have about our products and services. Our experienced customer care team is available to help you as fast as we possibly can.

Contact us