Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Responsive CSS - Image resize help needed

    Hello, I purchased a html template from Themeforest and so far in making my own adjustments everything has been going very well.

    The website has standard and responsive CSS ability and re-sizes/scales properly in most situations as expected.

    However I've added a quote box with images on my front page (wasn't part of the original website purchase) and when I make my window smaller on the PC the image background for the quote bubble isn't scaling even though the text inside seems to be. I have no experience with responsive css so I'm totally stumped and I can't seem to find tutorials online that explain this particular problem.

    Website - hdrealestatevideo.com

    Below is the quote code that I added to the standard css. On the responsive CSS I've tried some things like [CODE] .quote, .lt-ie9 {width:auto}[CODE] which seemed to help the text areas scale but the background image isn't scaling properly. Any help is appreciated, thank you so much.

    [CODE] .quote {
    width: 240px;
    background: transparent url("../images/quote-small-repeat.gif") repeat-y 0 0;}
    .quote .quoteBox-1 {
    padding: 17px 0 0;
    background: transparent url("../images/quote-small-top.gif") no-repeat 0 0;}
    .quote .quoteBox-1 .quoteBox-2 {
    padding: 0 0 24px;
    background: transparent url("../images/quote-small-bottom.gif") no-repeat 0 100%;}
    .quote p {
    min-height: 25px;
    font-style: italic;
    font-size: 1.1em;
    line-height: 1.7;
    color: #000;
    padding: 0 22px 1.2em;
    margin: 0;}

    .quoteAuthor { padding: 0 0 1em 22px;}
    .quoteAuthor p.name { font-weight: bold; font-size: 1.1em; color:#000; margin: 0; }
    .quoteAuthor p.details { font-size: 0.9em; font-style: italic; }
    [CODE]

  • #2
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the complete responsive CSS - anyone have ideas on how to help?

    Thank you.

    [CODE]

    /* Table of Contents
    ==================================================
    01. TESTING TEXT
    02. BASE STYLES (1140px)
    03. #DESKTOP (960px)
    04. #Tablet (Portrait)
    05. #Mobile (Portrait)
    06. #Mobile (Landscape)
    */



    /*
    =============================================== 01. TESTING TEXT ===============================================
    */
    body:after {position:relative; z-index:55; content: "less than 320px";font-size: 300%;font-weight: bold;position: fixed;bottom: 60px;width: 100%;text-align: center;background-color: hsla(1,60%,40%,0.7);color: #fff;
    display: none !important; /* -------------------- ADD OR REMOVE display:none !important; to display testing text -------------------- */}



    /*
    =============================================== 02. BASE STYLES (1140px) ===============================================
    */
    /* Note: Design for a width of 1040px */
    body:after {content: "Wider than 1140px";background-color: hsla(270,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */
    html {-webkit-text-size-adjust: none;} /* Removes webkit font resizing */
    body {max-width:100%; width:100%;}
    img {max-width:100%; height: auto; }

    /* IE8-IE7 Fixes */
    .lt-ie9 #slider-container, .lt-ie9 #sidebar-page, .lt-ie9 #footer-container, .lt-ie9 .header-container, .lt-ie9 #main-shadow-1, .lt-ie9 .page-title {width:960px;}
    .lt-ie9 .grid2column {width:446px;}
    .lt-ie9 .grid3column {width:289px;}
    .lt-ie9 .grid3columnbig {width:602px;}
    .lt-ie9 .grid4column {width:211px;}
    .lt-ie9 .grid4columnbig {width:681px;}
    .lt-ie9 #sidebar-page .grid2column {width:300px;}
    .lt-ie9 #sidebar-page .grid3column {width:192px;}
    .lt-ie9 #sidebar-page .grid3columnbig {width:408px;}
    .lt-ie9 #sidebar-page .grid4column {width:138px;}
    .lt-ie9 #sidebar-page .grid4columnbig {width:462px;}
    .lt-ie9 .page-title h2 {width:620px;}
    .lt-ie9 .page-title.no-search h2 {width:900px; }
    .lt-ie9 .sidebar-main-content {width:670px;}
    .lt-ie9 footer #flickr-footer ul li img { width:60px; height:60px;}
    .lt-ie9 #jtwt_picture {float:left; padding:0px 10px 40px 0; }



    /*
    =============================================== 03. #DESKTOP (960px) ===============================================
    */
    /* Note: Design for a width of 960px */
    @media only screen and (min-width: 959px) and (max-width: 1140px) {
    body:after {content: "959px to 1139px";background-color: hsla(270,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */


    #slider-container, #sidebar-page, #footer-container, .header-container, #main-shadow-1, .page-title {width:960px;} /* Default Width */

    /* Default Grid */
    .grid2column {width:446px;}
    .grid3column {width:289px;}
    .grid3columnbig {width:602px;}
    .grid4column {width:211px;}
    .grid4columnbig {width:681px;}
    #sidebar-page .grid2column {width:300px;}
    #sidebar-page .grid3column {width:192px;}
    #sidebar-page .grid3columnbig {width:408px;}
    #sidebar-page .grid4column {width:138px;}
    #sidebar-page .grid4columnbig {width:462px;}


    /* Misc Adjustments */
    .page-title h2 {width:620px;}
    .page-title.no-search h2 {width:900px; }
    .sidebar-main-content {width:670px;}
    footer #flickr-footer ul li img { width:60px; height:60px;}
    #jtwt_picture {float:left; padding:0px 10px 40px 0; }

    }



    /*
    =============================================== 04. #Tablet (Portrait) ===============================================
    */
    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
    body:after {content: "768 to 959px";background-color: hsla(270,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */

    /* Default Width */
    #slider-container, #sidebar-page, #footer-container, .header-container, #main-shadow-1, .page-title { width: 768px; }
    .lt-ie9 #slider-container, .lt-ie9 #sidebar-page, .lt-ie9 #footer-container, .lt-ie9 .header-container, .lt-ie9 #main-shadow-1, .lt-ie9 .page-title {width:768px;}


    /* Default Grid */
    .grid2column, .lt-ie9 .grid2column {width:350px;}
    .grid3column, .lt-ie9 .grid3column {width:225px;}
    .grid3columnbig, .lt-ie9 .grid3columnbig {width:474px;}
    .grid4column, .lt-ie9 .grid4column {width:163px;}
    .grid4columnbig, .lt-ie9 .grid4columnbig {width:537px;}
    #sidebar-page .grid2column, .lt-ie9 #sidebar-page .grid2column {width:218px;}
    #sidebar-page .grid3column, .lt-ie9 #sidebar-page .grid3column {width:137px;}
    #sidebar-page .grid3columnbig, .lt-ie9 #sidebar-page .grid3columnbig {width:298px;}
    #sidebar-page .grid4column, .lt-ie9 #sidebar-page .grid4column {width:97px;}
    #sidebar-page .grid4columnbig, .lt-ie9 #sidebar-page .grid4columnbig {width:339px;}

    /* Misc Fixes */
    .page-title h2, .page-title.no-search h2, .lt-ie9 .page-title h2, .lt-ie9 .page-title.no-search h2 {width:auto; white-space:normal;}
    body .page-title h2:after, .lt-ie9 body .page-title h2:after {display:none;}
    .sidebar-main-content, .lt-ie9 .sidebar-main-content {width:506px;}
    #sidebar, .lt-ie9 #sidebar { width:260px;}
    #sidebar #flickr-footer ul li img, .lt-ie9 #sidebar #flickr-footer ul li img {width:62px; height:62px;}
    footer #flickr-footer ul li img, .lt-ie9 footer #flickr-footer ul li img { width:60px; height:60px;}
    #jtwt_picture, .lt-ie9 #jtwt_picture {float:left; padding:0px 10px 55px 0; }

    .quote {width: auto}


    /* Navigation Slimming */
    .sf-menu a {padding:23px 10px 23px 10px;}

    /* OPTIONAL SELECT MENU ON TABLET VERSION
    nav ul { display: none; }
    nav select option {font-size:12px; background:#fff; color:#888;}
    header nav {float:none; text-align:center; z-index:0; margin:0 auto; padding-top:15px; }
    nav select { text-transform:none; display:block; margin:0px auto 20px auto; width:300px; min-width: 150px; max-width: 100%; -webkit-appearance: none; -moz-appearance: normal; appearance: normal;
    -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none;-moz-user-select: none;
    background-image: url(../images/select-arrow.png), -webkit-linear-gradient(#FAFAFA, #f9f9f9 40%, #e8e8e8);
    background: linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
    background-image: -moz-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
    background-position: center right; background-repeat: no-repeat;
    font-size:13px;
    border: 1px solid #aaaaaa;
    color: #555555;
    padding:7px 5px 7px 10px;}
    */


    }



    /*
    =============================================== 05. #Mobile (Portrait) ===============================================
    */
    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
    body:after {content: "0 to 480px"; background-color: hsla(90,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */


    /* Default Width */
    #slider-container, #sidebar-page, #footer-container, .header-container, #main-shadow-1, .page-title, .sidebar-main-content { width: 300px; }
    .lt-ie9 #slider-container, .lt-ie9 #sidebar-page, .lt-ie9 #footer-container, .lt-ie9 .header-container, .lt-ie9 #main-shadow-1, .lt-ie9 .page-title, .lt-ie9 .sidebar-main-content {width:300px;}

    /* Default Grid */
    .grid2column, .grid3column, .grid3columnbig, .grid4column, .grid4columnbig, #sidebar-page .grid2column, #sidebar-page .grid3column, #sidebar-page .grid3columnbig, #sidebar-page .grid4column, #sidebar-page .grid4columnbig {width:100%; margin-bottom:10px;}
    .lt-ie9 .grid2column, .lt-ie9 .grid3column, .lt-ie9 .grid3columnbig, .lt-ie9 .grid4column, .lt-ie9 .grid4columnbig, .lt-ie9 #sidebar-page .grid2column, .lt-ie9 #sidebar-page .grid3column, .lt-ie9 #sidebar-page .grid3columnbig, .lt-ie9 #sidebar-page .grid4column, .lt-ie9 #sidebar-page .grid4columnbig {width:100%; margin-bottom:10px;}

    /* Misc Fixes */
    .page-title h2, .page-title.no-search h2, .lt-ie9 .page-title h2, .lt-ie9 .page-title.no-search h2 {width:auto; white-space: normal; margin:0 auto; text-align:center; float:none; padding:0px; }
    body .page-title h2:after, .lt-ie9 body .page-title h2:after {display:none !important;}
    .flex-caption {width: 96%; padding: 2%; font-size: 12px; line-height: 16px;}
    .page-title #s {float:none; margin:7px auto 0px auto; display:block;}
    #sidebar, .lt-ie9 #sidebar { width:100%; background:#fff; margin-top:20px; -moz-box-shadow: 2px 2px 3px rgba(0,0,0,.15); -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,.15); box-shadow: 2px 2px 3px rgba(0,0,0,.15);}
    #sidebar-container, .lt-ie9 #sidebar-container {background:transparent; -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0); -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0); box-shadow: 2px 2px 3px rgba(0,0,0,0);}
    .flex-direction-nav li .next, .flex-direction-nav li .prev {display:none;}

    /* Centering of Items in Header/Footer */
    body header h1#logo {float:none; margin:0 auto; text-align:center; position:static; background:transparent; -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0); -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0); box-shadow: 2px 2px 3px rgba(0,0,0,0); }
    ul.social-icons-header {float:none; margin:0px auto; display:block; text-align:center;}
    ul.social-icons-header li {float:none;}
    ul.social-icons-header li a {display:inline-block; float:none;}


    /* Select Menu */
    nav ul { display: none; }
    nav select option {font-size:12px; background:#fff; color:#888;}
    header nav {float:none; text-align:center; z-index:0; }
    nav select { text-transform:none; display:block; margin:15px auto 20px auto; width:300px; min-width: 150px; max-width: 100%; -webkit-appearance: none; -moz-appearance: normal; appearance: normal;
    -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none;-moz-user-select: none;
    background-image: url(../images/select-arrow.png), -webkit-linear-gradient(#FAFAFA, #f9f9f9 40%, #e8e8e8);
    background: linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
    background-image: -moz-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
    background-position: center right; background-repeat: no-repeat;
    font-size:13px;
    border: 1px solid #aaaaaa;
    color: #555555;
    padding:7px 5px 7px 10px;}

    input#contactname, input#email {width:200px;}
    textarea#message {width:230px;}
    input.submit-button {margin-left:0px;}


    }


    /*
    =============================================== 06. #Mobile (Landscape) ===============================================
    */
    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
    body:after { content: "480 to 767px"; background-color: hsla(150,50%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */


    #slider-container, #sidebar-page, #footer-container, .header-container, #main-shadow-1, .page-title, .sidebar-main-content, .lt-ie9 #slider-container .sidebar-main-content { width: 420px; }
    .lt-ie9 #slider-container, .lt-ie9 #sidebar-page, .lt-ie9 #footer-container, .lt-ie9 .header-container, .lt-ie9 #main-shadow-1, .lt-ie9 .page-title, .lt-ie9 .sidebar-main-content {width:420px;}

    input.submit-button {margin-left:75px;}


    }

    [CODE]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •