Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 77
  • Last Modified:

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

0
nsitedesigns
Asked:
nsitedesigns
  • 8
  • 5
4 Solutions
 
pradeep kumarSr. UI Developer Commented:
for phone number remove width from this class on this stylesheet http://380.38e.myftpupload.com/wp-content/themes/magazine-pro/style.css?ver=3.1:

line number : 1287

.site-header .widget-area {
    float: right;
    text-align: right;
    /* width: 728px; */
}

Open in new window


in media query add this code or add this media query at the bottom of your stylesheet:
@media only screen and (max-width: 768px) {  
.content {
    float: right;
    width: 55%;
}

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

Open in new window

0
 
nsitedesignsAuthor Commented:
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

0
 
nsitedesignsAuthor Commented:
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

0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
pradeep kumarSr. UI Developer Commented:
Its dynamic code from facebook and we can't control width of that. It would be better to show the right column in bottom of left column in mobile view. Below @media (max-width:767px){}
0
 
nsitedesignsAuthor Commented:
Pradeep,

How do I do what you suggest?
0
 
nsitedesignsAuthor Commented:
What if I reduced size of left column?  Would that help?
0
 
pradeep kumarSr. UI Developer Commented:
Hi,

In mobile view below < 767px we can do left column width 100%; and right also 100%. that normally responsive website works.

on your point:

You can reduce the width of left column & right column with ratio 60% for left column & 40% right column.

But due to width of facebook widget its in pixel so you always face this problem in mobile device.

So my suggestion you give width 100% for both on below device like: Add this in your stylesheet.

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

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

Open in new window

0
 
nsitedesignsAuthor Commented:
I have a facebook plugin called Custom Facebook Feed by Smash Balloon.  I can set the width to a percentage!
0
 
pradeep kumarSr. UI Developer Commented:
I think we could not control facebook width in percentage it will work in pixel and min-width is around 360px;
0
 
nsitedesignsAuthor Commented:
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?
0
 
pradeep kumarSr. UI Developer Commented:
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.
0
 
nsitedesignsAuthor Commented:
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

0
 
nsitedesignsAuthor Commented:
I am going to cancel the question.  Client will now be putting testimonials in sidebar
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now