Making Prose Theme Unresponsive to Mobile

[Maddmula]

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

 

[Pixel Frau]

Look 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%
} */

[Maddmula]

Thanks 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;
}

[3200 Creative]

Youll 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

[Maddmula]

Thanks 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: password

Thanks so much for you time!

 

[Charlie]

Not a good idea to post your user and pass for all to see!

[Maddmula]

^ that was a temporary login for a second user. Anyway I suppose you're right - just changed the password for that user account.

[Maddmula]

Maybe 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%;
}

}

[Charlie]

Try 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!

[Maddmula]

^ 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"/>';
}

*/

[Maddmula]

Ok 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!

[DavidF]

I 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

---

David Frosdick WordPress Coaching

[Author]

Posts