Community Forums › Forums › Archived Forums › Design Tips and Tricks › Making Prose Theme Unresponsive to Mobile
- This topic has 11 replies, 5 voices, and was last updated 11 years ago by DavidF.
-
AuthorPosts
-
March 22, 2013 at 6:12 pm #30593MaddmulaMember
Hello,
I'm currently designing my site phlebotomy-certification.com and so far love the look of it. The problem is that the Prose Theme which is mobile responsive, does not display properly on mobile with unresponsive elements on the page such as the click-able map, adsense, and header.
You can see the problem by plugging in the site here http://www.studiopress.com/responsive/ .
Is there anyway I can make adjustments to make the theme unresponsive so the mobile/tablet user can view my complete site?
Thanks!
Maddison
March 23, 2013 at 9:18 am #30680Pixel FrauMemberLook for the section titled Responsive Design on your stylesheet and comment out the properties in that section. A CSS comment begins with /* and ends with */ .
So if you're original CSS property is:
body {
width: 100%
}you would change it to:
/* body {
width: 100%
} */March 23, 2013 at 9:39 am #30689MaddmulaMemberThanks for the reply! Here's the CSS code. I tried commenting out (nothing happened), and then even deleting that whole section and it didn't work. Any other ideas?
/* Responsive Design
------------------------------------------------------------ */
@media only screen and (max-width: 960px) {body,
.content-sidebar-sidebar #content,
.content-sidebar #content,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.full-width-content #content,
.page-template-landing-php #content,
.page-template-landing-php #content-sidebar-wrap,
.sidebar-content #content,
.sidebar-content-sidebar #content,
.sidebar-sidebar-content #content,
#content-sidebar-wrap,
#footer,
#footer .creds,
#footer .gototop,
#footer-widgets,
#header,
#nav,
#sidebar,
#sidebar-alt,
#subnav {
width: 100%;
}#header {
padding: 10px 0;
}#header .widget-area,
#title-area {
width: 100% !important;
}#title-area #description,
#title-area #title {
padding: 0 !important;
}#title-area #title {
line-height: 1.0;
margin: 0 0 10px;
}#header .widget-area {
padding: 10px 0 0 !important;
}#wrap {
border: none !important;
margin: 0 !important;
width: auto;
}#inner {
padding: 10px;
width: auto;
}#description,
#footer .creds,
#footer .gototop,
#title,
#title-area {
float: none;
padding: 0;
text-align: center;
}#header .searchform {
float: none;
margin: 0 0 20px;
padding: 0;
text-align: center;
}#nav li.right {
display: none;
}.enews #subbox,
.s {
width: 60%;
}#footer p {
padding: 0 10px;
}March 23, 2013 at 10:02 am #307053200 CreativeMemberYoull also need to remove this from functions PHP
/** Add Viewport meta tag for mobile browsers */
add_action( 'genesis_meta', 'gctheme_viewport_meta_tag' );
function gctheme_viewport_meta_tag() {
echo '';
}
3200 Creative – Genesis design and development specialists | 3200 Goodies – Design and development blog
March 23, 2013 at 10:31 am #30709MaddmulaMemberThanks for the help but I don't see that ^ when I go into functions PHP for neither the Genesis nor the Prose theme.
If it would be easier to see for yourself you can login at:
http://www.phlebotomy-certification.com/wp-admin/
Username: User
Password: passwordThanks so much for you time!
March 23, 2013 at 10:45 am #30712CharlieMemberNot a good idea to post your user and pass for all to see!
March 23, 2013 at 10:50 am #30714MaddmulaMember^ that was a temporary login for a second user. Anyway I suppose you're right - just changed the password for that user account.
March 23, 2013 at 11:11 am #30720MaddmulaMemberMaybe I need to make some changes to the CSS in the Genesis theme? (not the Prose)
Here's the code in the CSS of Genesis...
14 Media Queries
---------------------------------------------------------------------------------------------------- *//* Desktops, laptops and iPads (landscape) ----------- */
@media only screen and (max-width: 1024px) {#wrap {
max-width: 960px;
}}
/* iPads (portrait) ----------- */
@media only screen and (max-width: 768px) {#wrap {
padding: 0 5%;
}.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.wrap,
#footer .creds,
#footer .gototop,
#header .widget-area,
#inner,
#title-area,
#wrap .sidebar,
#wrap #content,
#wrap #content-sidebar-wrap,
#wrap #sidebar-alt {
width: 100%;
}.genesis-nav-menu li,
#footer .creds,
#footer .gototop,
#header ul.genesis-nav-menu,
#header .search-form {
float: none;
}.genesis-nav-menu,
#description,
#footer .creds,
#footer .gototop,
#header .search-form,
#title,
#title-area {
text-align: center;
}.genesis-nav-menu a {
padding: 20px 16px;
padding: 1.25rem 1rem;
}#title {
margin: 16px 0;
margin: 1rem 0;
}#header .search-form {
margin: 32px auto 0;
margin: 2rem auto 0;
width: 50%;
}.genesis-nav-menu li.right {
display: none;
}#footer .wrap {
padding: 24px 0;
padding: 1.5rem 0;
}.footer-widgets-1,
#header .genesis-nav-menu {
margin: 0;
}}
/* iPhones (portrait and landscape) ----------- */
@media only screen and (max-width: 480px) {html {
font-size: 87.5%; /* 14px base */
}#header .search-form {
width: 100%;
}.archive-page,
.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}}
March 23, 2013 at 11:12 am #30721CharlieMemberTry going to Prose/lib/init via FTP or cPanel and commenting out the following:
add_action( 'genesis_meta', 'prose_add_viewport_meta_tag' ); /** * Viewport meta tag. * * Output the viewport meta tag to enable responsive features. * * @since 1.5.0 */ function prose_add_viewport_meta_tag() { echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>'; }
Make sure to download a backup first!
And also: my 100th post!
March 23, 2013 at 11:30 am #30728MaddmulaMember^ Congratulations! So I tried commenting it out like this and it just turned the site into a blank screen. Maybe I commented it out wrong?
/*
add_action( 'genesis_meta', 'prose_add_viewport_meta_tag' );
/**
* Viewport meta tag.
*
* Output the viewport meta tag to enable responsive features.
*
* @since 1.5.0
*/
function prose_add_viewport_meta_tag() {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>';
}*/
March 23, 2013 at 1:14 pm #30755MaddmulaMemberOk so Charlie helped me to get the site so it isn't mobile responsive. But for some reason, upon loading, the site zooms into the top left of the screen.
Ideally, it would be best if the user didn't have to zoom out so they could see the full site. Any tips for fixing this automatic zoom issue?
Again you can check it out here at http://www.studiopress.com/responsive/
Thanks!
April 8, 2013 at 6:40 am #33943DavidFMemberI used this code on a clients site. I forces the browser (phone) to zoom out
<meta name="viewport" content="initial-scale=0.34">
Not a great fix but works.
Dave
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.