CODEWITHSUNDEEP
cssresponsive-design
user3117275
user3117275

Reputation: 367

Responsive CSS not working

For this website: http://www.valleylawyermarketing.com/

When you resize this page, the text under the "Testimonial" pic is supposed to float: left, but it doesn't. I can't understand why.

CSS on non-mobile site:

.testimonial_box {
    background-color: #fff;
    color: #000;
    float: right;
    padding: 30px 15px;
    width: 71%;
}

CSS for mobile site (not working)

.testimonial_box {
    background-color: #fff;
    color: #000;
    float: left;
    padding: 30px 15px;
    width: 80%;
    margin-top: 10px;
}

HTML:

<div class="testimonial_box">
</div>

Upvotes: 0

Views: 73

Answers (3)

cs1193
cs1193

Reputation: 1109

in mobile css, use !important wherever necessary, mentioned below example

.testimonial_box {
    background-color: #fff;
    color: #000;
    float: left !important;
    padding: 30px 15px;
    width: 80% !important;
    margin-top: 10px;
}

Upvotes: 0

flowstoneknight
flowstoneknight

Reputation: 1236

You have some weird characters in front of each line in your mobile CSS. Get rid of those.

This is what it looks like when I look at your css.css file in chrome:

.testimonial_box {
    background-color: #fff;
    color: #000;
    float: left;
    padding: 30px 15px;
    width: 80%;
    margin-top: 10px;
}

Upvotes: 1

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

use the mobile css in media query specific for it

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.testimonial_box {
    background-color: #fff;
    color: #000;
    float: left;
    padding: 30px 15px;
    width: 80%;
    margin-top: 10px;
}  
}

you have some invalid characters in your css.css file

@media only screen and (max-width: 800px) { 
    #portfolio-items .portfolio-grid li {
        width: 240px;
        height: auto;
    }
.testimonial_box {
    background-color: #fff;
    color: #000;
    float: left;
    padding: 30px 15px;
    width: 80%;
    margin-top: 10px;
}  
}

Upvotes: 2

Related Questions