Solved

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

Posted on 2016-09-21
13
46 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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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 viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

760 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

18 Experts available now in Live!

Get 1:1 Help Now