|
#1
Sep 11, 2013, 12:16 PM
|
|
Hi so I work on a site for a not for profit group, and i have minimal experience with html and php. Im basically just using plugins and setting options, not really adept with the code yet. I've noticed that on the mobile version of the site only the homepage is displaying, and the menu only has home and blog available. If you load the site in a regular pc browser window everything displays fine. Is there something im missing? In the theme options i see nothing along the lines of responsive settings, or anything like that. If anyone could help me get the full site to appear on mobile that would be much appreciated.
Thanks so much,
-Andrew
i got it to work!
in the css i commented out this block of code
/* @media only screen and (max-width: 767px) {
Hide default menu
ul#menu1,
a.rsslink,
img.avatar,
.post-categories i {
display: none;
} */
Last edited by DrewKnow; Sep 11, 2013 at 12:41 PM.
|
#2
Sep 11, 2013, 01:04 PM
|
|
|
|
299 posts · Aug 2010
Santa Monica, CA
|
|
Hi, Drew:
When the browser shrinks to a smaller size (like in a cell phone), the regular menu is supposed to be hidden (which is purpose of the CSS code you commented out), and in its place should be a menu in the form of a drop-down list; are you saying that the drop-down list wasn't showing up?
|
#3
Sep 11, 2013, 01:23 PM
|
|
Hi, and thanks for your response. Yeah there was no drop down menu displaying. That would be fantastic though- how would I enable that?
|
#4
Sep 11, 2013, 01:29 PM
|
|
this is the code as it is
/***************************************
Menu 1 on mobile devices
**************************************/
.menu1-mobile {
display: none;
font-size: 20px;
padding: 10px;
margin: 20px auto 30px auto;
width: 90%;
}
@media only screen and (max-width: 959px) {
.hentry .post-thumb img {
opacity: 1 !important;
z-index: 1000;
}
}
@media only screen and (max-width: 767px) {
/* Hide default menu */
ul#menu1,
a.rsslink,
img.avatar,
.post-categories i {
display: none;
}
/*could it be this?*/
.menu1-mobile {
display: block;
}
.commentlist li > div {
margin-left: 0 !important;
}
.post-footer a {
padding: 7px 15px;
}
a.post-readmore {
background: #f7f7f7;
border: solid 1px #eee;
color: #0090d3;
}
.hentry div.thumb-shadow {
background-image: none !important;
padding-bottom: 0;
margin-left: 0;
}
div.post-thumb {
border: none;
padding: 0 !important;
background: none;
}
.hentry .post-thumb span {
display: none;
}
body {
font-size: 15px;
}
.widget .searchform .field {
max-width: 100% !important;
padding: 10px;
}
#content {
padding: 0 20px 20px 20px;
}
}
|
#5
Sep 11, 2013, 01:44 PM
|
|
|
|
299 posts · Aug 2010
Santa Monica, CA
|
|
Yes, that's the right selector, .menu1-mobile is the drop down list that should be displayed when your screen gets narrower (under 767px wide). Can you provide a link to your site?
|
#6
Sep 11, 2013, 01:46 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Did you change any of he virtual code?
What is the URL?
|
#7
Sep 11, 2013, 02:39 PM
|
|
I haven't been in charge of the site for very long, it's possible someone before me changed the virtual code, though I don't think that's the case. The site is www.licypaa.org
|
#8
Sep 11, 2013, 02:52 PM
|
|
Could it be the css grid? Right now it's set to 960px margin 0. Maybe it's not shrinking down lower than 760px
|
#9
Sep 11, 2013, 03:32 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
export your settings and attach them to a reply
|
#11
Sep 11, 2013, 04:13 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Youe export works fine for me using FireFox's web developer tools / responsive design view. As the screen gets smaller, the menu becomes a tab.
Try shutting off ALL plugins to see if one is causing a conflict
|
#12
Sep 11, 2013, 04:40 PM
|
|
It works now! It was one of the plugins for sure. Thank you so much!
|
|