Link to home
Create AccountLog in
Avatar of nsitedesigns
nsitedesignsFlag for United States of America

asked on

Right column floats down page on ipad view and so does phone number

how do I stop the right sidebar ( facebook info) from dropping on ipad view leaving a big white gap?

Site
http://380.38e.myftpupload.com/

Screen shot
http://screencast.com/t/EhPkwBxo

.sidebar-primary {
    float: right;
    width: 33%;
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of pradeep kumar
pradeep kumar
Flag of India image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of nsitedesigns

ASKER

Thanks that helps!  I tried to fix it for smaller screens and added this code but it didn't work.  Can you help me with this too?

@media only screen and (max-width: 480px) {
    float: right;
    width:100%;
    
  }

Open in new window

Looks like the code to fix the Facebook section so it isn't so wide is this, but i cannot locate it in css file.
<div id="cff" data-char="400" class="cff-fixed-height cff-default-styles" style="width:360px; height:40em; padding:20px; background-color:#ffffff; "></div>

Open in new window

SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Pradeep,

How do I do what you suggest?
What if I reduced size of left column?  Would that help?
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
I have a facebook plugin called Custom Facebook Feed by Smash Balloon.  I can set the width to a percentage!
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
I added your code to my Simple Custom CSS and it didn't make a difference.  I also tried adding the FB feed to the footer and it looked kinda silly there.  How do other companies add FB to a website?  Am I trying to do something unusual in placing it in sidebar?
Yes i saw that your site is not fully responsive that why its showing like that:

@media only screen and (max-width: 1280px) {  

.site-container {
    width: 93%;

} 
.content {
    float: left;
    width: 60%;
}

.sidebar-primary {
    width: 35%;
}
}

@media only screen and (max-width: 767px) {  
.content {
    width: 100%;
}

.sidebar-primary {
    width: 100%;
}
}

Open in new window


Replace this code with last one.
Replace this
@media only screen and (max-width: 1280px) {  

.site-container {
    width: 93%;

} 
.content {
    float: left;
    width: 60%;
}

.sidebar-primary {
    width: 35%;
}
}

@media only screen and (max-width: 767px) {  
.content {
    width: 100%;
}

.sidebar-primary {
    width: 100%;
}
}

Open in new window


with this?
@media only screen and (max-width: 767px) {  
.content {
    float: left;
    width: 100%;
}

.sidebar-primary {
    width: 100% !important;
}
}

Open in new window

I am going to cancel the question.  Client will now be putting testimonials in sidebar