nsitedesigns
asked on
navigation box way long on mobile devices
What the heck happened? My navigation is a mile long on mobile devices.
Screen shot
https://screencast.com/t/dKV4oOA16
Beta site
http://9bf.27e.myftpupload.com
Screen shot
https://screencast.com/t/dKV4oOA16
Beta site
http://9bf.27e.myftpupload.com
ASKER
THank you but, rather than NEW adding code which would be difficult to adjust since phones are all sizes, I was guessing that I did something in the code that I added to the site to cause this since the template from Studio Press is fine. Care to take a peek?
https://my.studiopress.com/themes/education/#demo-phone
Here is code that I added. Could something here cause this problem?
https://my.studiopress.com/themes/education/#demo-phone
Here is code that I added. Could something here cause this problem?
/*.............. HOME PAGE TEXT............*/
.entry {
padding: 0px 30px 20px 40px;
}
/*.............. YELLOW BOX in SLIDER ...........*/
.education-pro-blue .sidebar .widget {
border-color:1px solid #c7151b;}
.education-pro-blue .home-top .widget_text {
color:#000;
line-height:1.5em;
padding-top:20px;
font-size:1.5em;}
.education-pro-blue .home-top .wrap, .education-pro-blue .site-header {
border-color: #c7151b;
}
.education-pro-blue .home-top .wrap {
background-color: #fff200;}
/*.............. CONTAINER............
body.custom-background {
border-top: 20px solid #000;
}*/
.education-pro-blue .home-top .wrap, {
border-color: #fff200;
padding-top: 20px;
background-color: #fff204;
}
.education-pro-blue.home-top .widget_text {
color: #000000;
font-size: 15px;
line-height: 1.1;
text-align: center;
}
.education-pro-blue .home-middle
{
padding: 20px 10px 20px;
background-color: #000;
}
/*.............. LEFT SIDEBAR............*/
.sidebar-secondary {
width: 220px;
}
/*.............. RIGHT SIDEBAR............*/
.widget {
margin-bottom: 0px;
}
.education-pro-blue .sidebar .widget-title {
color: #c7151b;
border:none;
}
/*.............. LOGO.............*/
.education-pro-blue .site-header {
height: 150px;
}
.header-image .title-area {
background-color: transparent;!important;
padding: 0;
}
.header-image .site-title > a {
float: left;
min-height: 150px; /*keeps the logo ABOVE slider*/
width: 100%;
background-color:transparent;
}
/*.............. yellow box on home page .............*/
.education-pro-blue .after-entry .widget, .education-pro-blue .home-top .wrap, .education-pro-blue .site-header {
padding-top:50px;
}
.title-area {
box-shadow: none;
}
/*.............. SITE CONTENT.............*/
.site-inner {
clear: both;
padding-top: 60px;
background-color: #fff;
margin-top:20px;
margin-bottom:20px;
}
/*.............. H TAGS.............*/
h2 {
font-size: 20px;
color: #c7151b;
}
/*.............. NAVIGATION.............*/
.education-pro-blue .button, .education-pro-blue .genesis-nav-menu .sub-menu .current-menu-item > a:hover, .education-pro-blue .genesis-nav-menu .sub-menu a, .education-pro-blue .genesis-nav-menu li a:hover, .education-pro-blue .genesis-nav-menu li.current-menu-item > a, .education-pro-blue .home-bottom, .education-pro-blue .widget-area .widget.enews-widget, .education-pro-blue button, .education-pro-blue {
background-color: #c7151b;
}
/*.............. FOOTER.............*/
.education-pro-blue .site-footer {
background-color: #ed1c24;
padding: 15px 0px;
}
I have tried to to disabled your custom code from the console and only I was to be able to fix only by what I have proposed in previous message. max-height won't cause issue on mobile device as it only limit the height
You have to check everywhere these class are called in your custom css.
Have you edited the main CSS?
If so, compare both file to check the diff.
Also compare both code page maybe you have not used the template correctly by adding extra div or missing a class or not using the correct container.
You have to check everywhere these class are called in your custom css.
.home-top .wrap
Have you edited the main CSS?
If so, compare both file to check the diff.
Also compare both code page maybe you have not used the template correctly by adding extra div or missing a class or not using the correct container.
ASKER
Why would .home-top .wrap be involved when it is the navigation that is the problem?
ASKER
I removed the yellow background color and there is still a mile long problem.
greetings nsitedesigns, , I'll say some things but I could not locate in the very many CSS file, what may or may not cause a problem.
To me the problem exists with the screen width is less than about 1000 or 980 pixels, due to a change somewhere in CSS with a media screen like -
@media screen and (max-width: 1000px) { }
or some equivalent.
My element inspector says the the text content container -
<section id="text-10" class="widget widget_text">
has beed changed in CSS to a width of ZERO pixels, I think this causes all of the text words to be stacked on top of each other in a single word per line, and this causes the -
<div class="wrap">
to be 6980 pixels high, , AND because the section id="text-10" is 0 pixels wide, no text can be seen.
Would you know where the CSS width break points with the "media screen" are in which CSS library file?
To me the problem exists with the screen width is less than about 1000 or 980 pixels, due to a change somewhere in CSS with a media screen like -
@media screen and (max-width: 1000px) { }
or some equivalent.
My element inspector says the the text content container -
<section id="text-10" class="widget widget_text">
has beed changed in CSS to a width of ZERO pixels, I think this causes all of the text words to be stacked on top of each other in a single word per line, and this causes the -
<div class="wrap">
to be 6980 pixels high, , AND because the section id="text-10" is 0 pixels wide, no text can be seen.
Would you know where the CSS width break points with the "media screen" are in which CSS library file?
It is not relate to the color it's related to the height of the menu container.
So by limiting the height you will fix the problem in a minute.
So by limiting the height you will fix the problem in a minute.
@media only screen and (max-width: 768px)
style.css?ver=3.0.2:2514
.home-top .wrap {
margin-left: 5%;
margin-right: 5%;
padding: 40px;
max-height: 300px;
}
ASKER
I put your css into my file and it did nothing so I removed it. I put it back in now so you can see that it didn't fix problem.
Why do you have
Why do you have
style.css?ver=3.0.2:2514
in the css? I tried it with and without the funky code and there was no change.
This class is already present in your template you just need to add a line to it
the rev code is visible from the console
http://9bf.27e.myftpupload.com/wp-content/themes/education-pro/style.css?ver=3.0.2
original code line 1447
change it to
the rev code is visible from the console
http://9bf.27e.myftpupload.com/wp-content/themes/education-pro/style.css?ver=3.0.2
original code line 1447
@media only screen and (max-width: 768px)
style.css?ver=3.0.2:2514
.home-top .wrap {
margin-left: 5%;
margin-right: 5%;
padding: 40px;
}
change it to
@media only screen and (max-width: 768px)
style.css?ver=3.0.2:2514
.home-top .wrap {
margin-left: 5%;
margin-right: 5%;
padding: 40px;
max-height: 300px;
}
ASKER
I added this and it does not work. See screen shot.
https://screencast.com/t/iqigwgxEe3Qu
Also, did you mean to include
https://screencast.com/t/iqigwgxEe3Qu
Also, did you mean to include
style.css?ver=3.0.2:2514
? I tried it with and without and neither worked.
I added only this -
#text-10 {
width: 100%;
}
not in any media screen, just in the normal css, and as far as I have tried it, it seems to work?
#text-10 {
width: 100%;
}
not in any media screen, just in the normal css, and as far as I have tried it, it seems to work?
you may need to add something in the
@media only screen and (max-width: 768px) {
for reducing the padding-top for
.widget-area
maybe
@media only screen and (max-width: 768px) {
for reducing the padding-top for
.widget-area
maybe
@media only screen and (max-width: 768px) {
body {
font-size: 16px;
}
/* Other css here */
.widget-area: padding-top: 18px;
}
ASKER
I added the below code. It helped but now text that appeared in yellow box now sits ontop of black non-hazardous liquid text. I am not sure what the #text-10 is for.
Looks good here
https://screencast.com/t/zI5rwQYtLm
But here, after I click hamburger icon, that yellow text gets pushed down OVER the drip icon
https://screencast.com/t/71ul97zeM
@media only screen and (max-width: 768px) {
.widget-area { padding-top: 18px;
}
#text-10 {
width: 100%;
}
Looks good here
https://screencast.com/t/zI5rwQYtLm
But here, after I click hamburger icon, that yellow text gets pushed down OVER the drip icon
https://screencast.com/t/71ul97zeM
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Other solutions did not work.
Open in new window