Make CSS Responsive

[nubloggie]

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

[AnitaC]

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.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts