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  Anita 11 months, 1 week ago.

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

    nubloggie
    Participant
    Post count: 28

    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

    Anita
    Participant
    Post count: 7376

    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.


    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!

    • This reply was modified 11 months, 1 week ago by  Anita.
    • This reply was modified 11 months, 1 week ago by  Anita.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.