Making Prose Theme Unresponsive to Mobile

Community Forums Forums Design Tips and Tricks Making Prose Theme Unresponsive to Mobile

This topic is: not resolved

This topic contains 11 replies, has 5 voices, and was last updated by  DavidF 1 year, 3 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #30593

    Maddmula
    Participant
    Post count: 6

    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

     

    #30680

    Pixel Frau
    Participant
    Post count: 83

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


    #30689

    Maddmula
    Participant
    Post count: 6

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

    #30705

    3200 Creative
    Participant
    Post count: 23

    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

    #30709

    Maddmula
    Participant
    Post count: 6

    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!

     

    #30712

    Charlie
    Participant
    Post count: 112

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

    #30714

    Maddmula
    Participant
    Post count: 6

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

    #30720

    Maddmula
    Participant
    Post count: 6

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

    }

    #30721

    Charlie
    Participant
    Post count: 112

    Try going to Prose/lib/init via FTP or cPanel and commenting out the following:
    [php]
    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"/>’;
    }[/php]

    Make sure to download a backup first!

    And also: my 100th post!

    #30728

    Maddmula
    Participant
    Post count: 6

    ^ 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″/>’;
    }

    */

    #30755

    Maddmula
    Participant
    Post count: 6

    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!

    #33943

    DavidF
    Participant
    Post count: 36

    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


Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.