Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2016-09-21
13
Medium Priority
?
65 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
13 Comments
 
LVL 3

Accepted Solution

by:
pradeep kumar earned 2000 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
Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

 
LVL 3

Assisted Solution

by:pradeep kumar
pradeep kumar earned 2000 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 2000 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 2000 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

Stack Overflow Podcast - Developer Story

Welcome to the Stack Overflow podcast recorded Thursday July 20 at Stack Overflow Headquearters in NYC. Your hosts today are podcast regulars Jay Hanlon, David Fullerton, and Ilana Yitzhaki, plus the quite irregular Matt Sherman (Stack Overflow Engineering Manager extraordinaire)

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

722 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