Solved

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

Posted on 2016-09-21
13
53 Views
Last Modified: 2016-09-26
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
Comment
Question by:nsitedesigns
  • 8
  • 5
13 Comments
 
LVL 3

Accepted Solution

by:
pradeep kumar earned 500 total points
ID: 41809151
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
 

Author Comment

by:nsitedesigns
ID: 41809389
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
 

Author Comment

by:nsitedesigns
ID: 41809543
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 3

Assisted Solution

by:pradeep kumar
pradeep kumar earned 500 total points
ID: 41809994
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
 

Author Comment

by:nsitedesigns
ID: 41811076
Pradeep,

How do I do what you suggest?
0
 

Author Comment

by:nsitedesigns
ID: 41811080
What if I reduced size of left column?  Would that help?
0
 
LVL 3

Assisted Solution

by:pradeep kumar
pradeep kumar earned 500 total points
ID: 41811106
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
 

Author Comment

by:nsitedesigns
ID: 41811124
I have a facebook plugin called Custom Facebook Feed by Smash Balloon.  I can set the width to a percentage!
0
 
LVL 3

Assisted Solution

by:pradeep kumar
pradeep kumar earned 500 total points
ID: 41811130
I think we could not control facebook width in percentage it will work in pixel and min-width is around 360px;
0
 

Author Comment

by:nsitedesigns
ID: 41811133
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
 
LVL 3

Expert Comment

by:pradeep kumar
ID: 41811146
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
 

Author Comment

by:nsitedesigns
ID: 41816078
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
 

Author Comment

by:nsitedesigns
ID: 41816671
I am going to cancel the question.  Client will now be putting testimonials in sidebar
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question