Solved

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

Posted on 2016-09-21
13
50 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
 
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
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: 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

861 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now