Customize Responsive Layout or Remove it?

Community Forums Forums Design Tips and Tricks Customize Responsive Layout or Remove it?

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  saffron avenue 1 year, 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #2250

    saffron avenue
    Participant
    Post count: 6

    I am working on a blog and the responsive layout looks horrible. I would like the default to be the full site…but not sure how to do that?

    Using Genesis Sample child theme

    Thank you!

    #2254

    anitac
    Participant
    Post count: 6402

    Look at the very bottom of your CSS – you should see the Mobile CSS settings. You can remove that completely.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #2256

    saffron avenue
    Participant
    Post count: 6

    I found the below in the genesis framework style.css but not in my child theme style.css. Is it okay to touch that css stylesheet? And if I do remove it will it still size accordingly to phones, ipads, etc.?

     

    /* Responsive Design
    ———————————————————— */

    @media only screen and (max-width: 600px) {

    .menu-primary li,
    .menu-primary li ul,
    .menu-primary li ul a,
    .menu-secondary li,
    .menu-secondary li ul,
    .menu-secondary li ul a,
    #header .menu li,
    #header .menu li ul,
    #header .menu li ul a {
    width: 100%;
    }

    .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 {
    padding: 0;
    width: 100%;
    }

    .menu-primary li a,
    .menu-secondary li a,
    #header .menu li a {
    margin: 0;
    padding: 7px 3%;
    }

    .menu li li a .sf-sub-indicator,
    .menu li li li a .sf-sub-indicator {
    background: url(images/icon-plus-white.png) right no-repeat;
    }

    .menu-primary li li a,
    .menu-primary li li a:link,
    .menu-primary li li a:visited,
    .menu-secondary li li a,
    .menu-secondary li li a:link,
    .menu-secondary li li a:visited,
    #header .menu li li a,
    #header .menu li li a:link,
    #header .menu li li a:visited {
    background: none;
    color: #fff;
    padding: 7px 3%;
    width: 94%;
    }

    .menu-primary li ul,
    .menu-secondary li ul,
    #header .menu li ul {
    background: #333;
    clear: both;
    margin: 0;
    padding: 0;
    position: inherit;
    }

    .menu-primary li ul ul,
    .menu-secondary li ul ul,
    #header .menu li ul ul {
    background: #666;
    }

    .menu-primary li ul ul ul,
    .menu-secondary li ul ul ul,
    #header .menu li ul ul ul {
    background: #999;
    }

    .menu-primary li ul ul,
    .menu-secondary li ul ul,
    #header .menu li ul ul {
    margin: 0;
    }

    }

    @media only screen and (max-width: 960px) {

    body {
    width: 100%;
    margin: 0 auto;
    }

    .archive-page,
    .content-sidebar #content,
    .content-sidebar-sidebar #content,
    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .full-width-content #content,
    .sidebar,
    .sidebar-content #content,
    .sidebar-content-sidebar #content,
    .sidebar-sidebar-content #content,
    #content-sidebar-wrap,
    #footer .creds,
    #footer .gototop,
    #footer-widgets .wrap,
    #header .widget-area,
    #sidebar-alt,
    #title-area,
    #wrap {
    width: 100%;
    }

    #wrap {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
    }

    #description,
    #footer .creds,
    #footer .gototop,
    #title,
    #title-area {
    float: none;
    text-align: center;
    }

    #title-area {
    padding: 10px 0;
    }

    #description,
    #title a,
    #title a:hover {
    padding: 0;
    }

    #header .widget-area {
    padding: 0 0 10px;
    }

    #header .searchform {
    float: none;
    padding: 0;
    text-align: center;
    }

    #header .s {
    margin: 0 -7px 0 0;
    }

    .menu li.right {
    display: none;
    }

    #inner {
    padding: 20px 0 0;
    }

    .breadcrumb,
    .navigation,
    .sidebar .widget,
    .taxonomy-description {
    margin: 0 20px 20px;
    }

    #content {
    padding: 0;
    }

    .page .page,
    .post,
    #comments,
    #respond {
    padding: 0 20px;
    }

    .author-box {
    margin: 0 20px 40px;
    }

    #footer-widgets .widget {
    padding: 20px 20px 0;
    }

    #footer-widgets .wrap {
    padding: 0;
    }

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3 {
    margin: 0;
    }

    }

    #2263

    anitac
    Participant
    Post count: 6402

    No, never modified the Framework itself. When you say you want the site to be the default layout – I am assuming – just as a regular website – no responsive elements. So if the Default if non-responsive – how will the end user select a way for it to be responsive. Your title is Customize it or Remove it.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #2306

    saffron avenue
    Participant
    Post count: 6

    Hi there,

    I didn’t  think I should edit that. Yes, just as a regular website, like http://www.familiar-fare.com on mobile.  Because the responsive layout looks horrible, I would rather just remove the option.

    Thank you!

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

You must be logged in to reply to this topic.