Make CSS Responsive

Community Forums Forums Design Tips and Tricks Make CSS Responsive

This topic is: not resolved

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  AC 1 year, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #62221

    nubloggie
    Participant
    Post count: 32

    I’m running Prose, but i’ve made a number of CSS changes which aren’t displaying properly on mobile.

    The Optin boxes i’ve made plus a few other elements are having some problems on these two pages:

    http://www.livingaha.com (landing page) and http://www.livingaha.com/blog

    If anyone could recommend how to fix the CSS so it would display right on small screens, i’d appreciate it!

    (i also posted the question here: http://stackoverflow.com/questions/18783010/fix-non-responsive-css)

    Here’s the code i used:

      /** reposition header above main wrap css
    ---------------------------------------------- */
    #header {margin-bottom: -19px;
    }
    #nav {
    line-height: 123%;
    height: 31px;
    position:relative;
     left:16%;
    max-width: 445px;
    width: 100%;
    -webkit-border-radius: 0px 0px 25px 7px;
    border-radius: 0px 0px 37px 7px;
    font-family: Helvetica, sans-serif;
    font-size: 14px; 
    
    }
    
    /** Body Width and TopBar Styling */
    body {
    width: 100%;
    border-top:10px solid ##6599D2;  }
    
    #sidebar {
    margin: 70px 0px 0px 0px;
    }
    
    /* LANDING PAGE CSS
    ------------------------------------------------*/
    .landing .Headline {margin-top:-40px;
    margin-left: -50px;
    max-width: 585px;
    text-align: center;}
    
    div.one-half {
    }
    
    .landing .optin  {
    padding: 20px 25px 25px 25px;
    margin-top: -20px;
    -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
    border: 2px solid #619AD1;
    }
    
    div.testi div.testimonial a img.aligncenter {
    -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
    border: 1px solid #619AD1;
        display: block;
        margin: 0 auto 10px; }
    
    .landing .testi {max-width:240px;
        margin: -15px 0px 30px 50px; 
    }
    
    .landing .entry-content {
        overflow: visible;
    }
    
    .vid {    overflow: visible;
    margin-top: -150px;
    margin-left: 32px
    }
    
    .vid img {margin: 0px 0px 0px 60px;
    wax-width: 120%;
    }
    
    .COLUMN2 {margin-top: 30px;
    
    padding: 25px 25px 0px 30px;
    
    line-height: 120%;
    -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
    border: 2px solid #619AD1;
    }
    
    .landing div.how {
    margin: -5px 0px 0px 0px;
    }
    
    /*  LANDING EBOOK IMAGE    */
    
    div.vid img.ebook {
    max-width: 100%;
    margin-left: 0px;
    margin-top: -85px;
    margin-bottom: 5px;
    }
    
    div.vid img.arrow {
    max-width: 65%;
    }
    /* Landing Page VIDEO CONTAINER CSS 
    -----------------------------------------------------------*/
    
    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px; height: 0; overflow: hidden;
    margin-bottom: 10px;
    margin-top: 20px;
    margin-left: 0px;
    }
    
    .video-container iframe,
    .video-container object,
    .video-container embed {
        position: absolute;
        top: 0;
        left: 0px;
        width: 97%;
        height: 86%;
        border: 5px solid #619AD1;
        -webkit-border-radius: 8px 8px 8px 8px;
        border-radius: 8px 8px 8px 8px;
    
    }
    
    /* LANDING PAGE SHARING 
    ----------------------------*/
    .fb {margin: -10px 0px -30px 120px; 
    }
    .tw {
    margin: -28px 0px 0px -70px;}
    
        /* Landing Page Optin 
    ----------------------------------*/
    #af-form-1433889434 {
    margin-top: -50px;
    }
    
    #af-form-1433889434 .af-element .bodyText { 
    margin-bottom: -20px;
    }
    
    #af-form-1433889434 .af-body input.text
    {   margin-left: -23%;
    -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #619AD1;
        height: 27px; }
    
    #af-form-1433889434 .buttonContainer input.submit {
        -webkit-border-radius: 14px 4px 4px 4px;
        border-radius: 14px 14px 14px 14px;
    margin-bottom: 10px;
    }
    
        /* Bullets Spacing 
    ---------------------------*/
    .entry-content ul li {
    margin: 0px 0px 12px 25px }
    
    /** Post CTA TOP CSS*/
    
    #af-form-1361379307 {   margin-top: 30px; 
     max-width: 930px;
            width: 85%;
        overflow: hidden;
        -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px; }
    
    #af-form-1361379307 .af-body input.text {
        border: 1px solid #619BD1; 
        margin-top: .65em; position:relative;
     left:-130px;   width: 190px;  
        height: 25px;   -webkit-border-radius: 10px 10px 10px 10px;
        border-radius: 4px 4px 4px 4px;  }
    
    #af-form-1361379307 .af-element {   padding: 0px 0px 10px 0px;
    width: 400px;   
     float: left;   }
    
    #af-form-1361379307 .af-clear { display:none; }
    
    #af-form-1361379307 .buttonContainer {      
     margin-top:-42px !important; 
        float: right;   margin-right:15px!important }
    
    #af-form-1361379307 .buttonContainer input.submit {     
        -webkit-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
        max-width: 220px; }
    
    /** Homepage Enews CSS*/
    
    .post-meta {
            background: #fff;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
    }
    
    /** HomePage Widget Signup CSS */
    #af-form-12297222 .af-body input.text {
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #619AD1;
        height: 27px;
    }
    #af-form-12297222 .buttonContainer input.submit {
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
    }
    
    /** Non-HomePage Widget Signup CSS */
    
    #af-form-1288691965 .af-body input.text  {
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #619AD1;
        height: 27px;
    }
    #af-form-1288691965 .buttonContainer input.submit {
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
    
    }
    
    /** Featured Box CSS */
    
    #f_box {margin-top: 40px ;
    }
    
        .featured-box {
    
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        background-color: #00;
        color: #0;
       border: 2px solid #949494;;
        border-radius: 10px;
        margin: 0 auto;
     max-width: 890px;
            width: 100%;
        overflow: hidden;
    padding: 10px;
    }
    
    .featured-box img {
        margin: 0px 10% 0px 0px;
    }
    
    .featured-box h1 {
        padding: 5px 0px 0px 0px;
    }
    
    .featured-box h4 {      
    margin: 15px 0px 0px 0px;
    border-bottom: none;
     }
    
    .featured-box h6 {      
    margin: 13px 0px -10px 0px;
    padding: 0px 0px 0px 0px 
     }
    
    .featured-box h5 {      
    margin: 20px 0px 20px 0px;
    padding: 0px 0px 0px 0px 
     }
    
    .featured-box p {
        margin: 0px 0px 10px 0px;
    
        padding: 0 0 20px;
    }
    
    .featured-box ul li {
        list-style-type: disc;
        margin: 0 0 0 10%;
        padding: 2px;
        border-bottom: none;
        background: none;
    }
    
    .featured-box .enews p {
        padding: 0 0 0px;
    }
    
    .featured-box .enews #subscribe{
        margin: -5% 0px 10px 40%
    }
    
    .featured-box .enews #subbox {
        background-color: #fff;
        margin: 0;
    }
    
    .featured-box .enews input[type="submit"] { 
    background-color: #FF7530;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
    }
    
    .landing #nav {
    max-width: 120px; 
    }
    
    /**eNews Extended Featured Box CSS */
    
    #enews-ext-4 {
        padding: 5px 10px 0px 40px;
    }
    .featured-box .enews #subscribe {
        margin: 7px 0px 0px 40px;
    }
    
    .enews #subbox, .enews #subbox1, .enews #subbox2 {
        background: #fff;
        border: 1px solid #619AD1;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        color: #666;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-size: 14px;
        margin: 5px -7px 0 0;
        padding: 5px 7px;
        width: 190px;
    }
    
    .featured-box .enews input[type="submit"] { 
    margin-left: 20px;
    font-size: 15px;    
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    
    }
    
    /* BLOG VIDEO CSS
    --------------------------------*/
    .blog .fboxvid {
        position: relative;
    overflow: visible;
    
    }
    
    .blog .fboxvid embed {
    border: 3px solid #619AD1;
    -webkit-border-radius: 8px 8px 8px 8px;
        border-radius: 8px 8px 8px 8px;
    
    }
    
    /* Images
    ------------------------------------------------------------ */
    
    img {
        height: auto;
        max-width: 95%;
    }
    .avatar,
    .featuredpage img,
    .featuredpost img,
    .post-image {
        background-color: #f5f5f5;
    
        padding: 4px;
    }
    
    .author-box .avatar {
        background-color: #fff;
        float: left;
        margin: 0 10px 0 0;
    }
    
    .post-image {   -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
    border: 4px solid #619AD1;
    
        margin: 0 10px 10px 0;
    }
    
    a img { -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
    border: 4px solid #619AD1;
    
        margin: 0 10px 10px 0;
    }
    
    .comment-list li .avatar {
        background-color: #fff;
        float: right;
        margin: 5px 0 0 10px;
    }
    
    img.centered,
    .aligncenter {
        -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
    border: 4px solid #619AD1;
        display: block;
        margin: 0 auto 10px;
    }
    
    img.alignnone { -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
    border: 4px solid #619AD1;
    
        display: inline;
        margin: 0 0 10px;
    }
    
    img.alignleft { -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
    border: 4px solid #619AD1;
    
        display: inline;
        margin: 0 15px 10px 0;
    }
    
    img.alignright {    -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
    border: 4px solid #619AD1;
    
        display: inline;
        margin: 0 0 10px 15px;
    }
    
    .alignleft {
        float: left;
        margin: 0 15px 10px 0;
    }
    
    .alignright {
        float: right;
        margin: 0 0 10px 15px;
    }
    
    .wp-caption {
        background: #f5f5f5;
        padding: 10px;
        text-align: center;
    }
    
    p.wp-caption-text {
        font-size: 14px;
        margin: 0px 0;
    }
    
    .wp-smiley,
    .wp-wink {
        border: none;
        float: none;
    }
    
    .gallery-caption {
    }
    /* Special-Page + CONTACT PAGE CSS
    --------------------------------------*/
    .special-page #cta_widget_not_home {display: none;}
    .special-page #simple-social-icons-2 {display: none;}
    .special-page #user-profile-2 {display: none;}
    .special-page #text-3{display: none;}
    .special-page #nav {display: none;}
    .special-page .genesis-extender-widget-area {margin-top: 10%;
    }
    .contact #cta_widget_not_home {display: none;}
    .contact #simple-social-icons-2 {display: none;}
    .contact #user-profile-2 {display: none;}
    .contact #text-3{display: none;}
    
    /** Post Bottom CTA */
    
    #af-form-1688659877{ margin: 0 auto;
     max-width: 574px;
        overflow: hidden;
        -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px; }
    
    #af-form-1688659877 .af-body input.text { 
        float: left;
        width: 200px;
    height: 25px;   -webkit-border-radius: 10px 10px 10px 10px;
        border-radius: 4px 4px 4px 4px;  }
    
    #af-form-1688659877 .buttonContainer { margin-top:-41px!important; 
        float: right; margin-right: 75px;  }
    
    #af-form-1688659877 .buttonContainer input.submit { -webkit-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;  }
    
    .after-post {
        margin: 25px 0px 30px 0px;
        background: #FFFFFF;}
    
    
    http://www.livingaha.com
    #62226

    AC
    Blocked
    Post count: 7712

    I took a look at your site and you have made major customizations. Responsiveness is not an exact science. With all projects, you will need to tweak the CSS. After reviewing your site – it appears you have a home page with a menu that has two item. Clicking the blog tab – you then have 5 tabs. If you go back to home and click About, you lose the menu all together giving no one a way to go back to your home page unless you click the logo. Also, each of your pages hav different layouts. Given all of that – there’s not really an easy fix to assist you. The only thing I can recommend at this time, short of you hiring someone to do this is to use Firefox which has a built in mobile response tester (you click Ctrl+Shift+M) and it will give you different sizes and will allow you to rotate the device. That’s the other thing you have to consider too – the size it will transform to when the device is rotated horizontally. So maybe try that.

    • This reply was modified 1 year, 3 months ago by  AC.
    • This reply was modified 1 year, 3 months ago by  AC.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.