Solved

Add space between main content area and right sidebar

Posted on 2013-06-13
16
665 Views
Last Modified: 2013-06-25
Hi there.  I'm using the u-design template found on themeforest.com and I've tried to make this work but it's not happening.  I'm also using the u-design child theme to add in my css scripting and placed the following in it:

/* Mobile Screen ( smaller than 480px )*/

@media screen and ( max-width: 480px ) {

/* Custom CSS for Breakpoint 3 CSS goes here... */
#FSContact1 #si_contact_form1 {
padding-left: -20px !important;
}

}

/* Medium Screen ( 480px to 719px ) */

@media screen and ( min-width: 480px ) and ( max-width: 719px ) {

/* Custom CSS for Breakpoint 2 CSS goes here... */
#FSContact1 #si_contact_form1 {
padding-left: -20px !important;
}

}

/* 720px to 959px Screen */

@media screen and ( min-width: 720px ) and ( max-width: 959px ) {

/* Custom CSS for Breakpoint 1 CSS goes here... */
#FSContact1 #si_contact_form1 {
padding-left: -20px !important;
}

}

Then in my form on each page (and home page) in my right sidebar text widget, I've done this:

<div style="padding-left: 20px;">[si-contact-form form='1']</div>

So my goal is to add space between the left main content area and right sidebar on desktop views, but in the smaller views, I need to remove that gap.  However, the above is not working.  Any ideas on how to make it work?

My site is here: http://64.247.185.152/
0
Comment
Question by:COwebmaster
[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
  • 10
  • 3
  • 2
  • +1
16 Comments
 
LVL 10

Assisted Solution

by:jtwcs
jtwcs earned 333 total points
ID: 39245577
The spacing between the two columns is controlled by the 4% margin-right being applied to the two_third class div around the main content.

Also, using negative values for padding is not valid.

.one_fourth, .one_third, .one_half, .two_third, .three_fourth {
float: left;
margin-bottom: 1%;
margin-right: 4%;
position: relative;
}

Open in new window

0
 

Author Comment

by:COwebmaster
ID: 39245617
Okay, but 2 questions:

1) will that widen the space between the main content area and right sidebar in desktop view? I need about a thumb size space
2) in responsive smaller views, will that code make the form left justified to the other text?

I removed the padding in the right sidebar text widget since that wasn't helping

Hope I'm making sense.
0
 
LVL 34

Expert Comment

by:Slick812
ID: 39245669
greetings  COwebmaster, , I see you are just beginning to try "Mobil" conversions, I will give you some from what I have used, First for "Phone" mobil, (narrow screens wid vertical views) you need to "Convert" to a Single column view, there is no room for two or three columns that many now use in desktop views.

I always add this to the HTML <head> section -
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

other wise many mobile will scale and "reduce" the view to have a "desktop" full view in the phone screen, so the text may be really small.

next you do NOT need all three of your -
@media screen and ( max-width: 480px ) {

if you do the same exact thing in all of them.

AND, you do NOT need to have the -
 ( min-width: 720px )
part in these, you do not seem to understand how these "@media screen"  work.

this is a section from one of my pages -
@media screen and (max-width: 610px){  /* will take effect when screen goes below 610px  */
.intext{width:530px;} /* change width of MAIN content div */
.welc{display:none;} /* hide left column */
.planer{display:none;}  /* hide right column */
.mDiv{display:block;}  /* show small mobil touch only menu div above main content */
#foot{width:530px;} /* change width of FOOTER  div */
}

@media screen and (max-width: 480px){  /* will take effect when screen goes below 480px  */
.intext{width:420px;}
#foot{width:420px;}}}

@media screen and (max-width: 380px){  /* will take effect when screen goes below 380px  */
.intext{width:360px;}
#foot{width:360px;}}}

Open in new window

please notice that as the view gets smaller (for instance (max-width: 480px) ), it will do the adjustments  without any indicator of the "range", it does each only when the screen width falls below the spec. And you really MUST do Testing in a smart phone and tablet to actually see the results, and change your  CSS to get a decent view.
you can do -
@media screen and ( max-width: 959px ) {
#FSContact1 #si_contact_form1 {
padding-left: 0px !important;
}

which will remove the padding for any and ALL screen widths less than 959px. But this may not help your view in a phone at all if you do not adjust the other widths, like main content and large images.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:COwebmaster
ID: 39245692
Okay, but how do I widen that space or maybe what I need to do is widen the main content area in desktop view.  What would I need to do to widen the left main content area so that the right sidebar area is more right justified within that container?  Again though, I want to make sure that in smaller views, the form aligns to the left side.
0
 

Author Comment

by:COwebmaster
ID: 39245717
Also, I have this on my site:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

Are you saying I also need:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
0
 
LVL 34

Accepted Solution

by:
Slick812 earned 167 total points
ID: 39245740
no you do not need 2 meta, just saying there should be ONE to suite your needs.

sorry, but I cann not really understand what you are trying to say? ? as you comment - " how do I widen that space" , I do not understand this at all !

then you say - "What would I need to do to widen the left main content area so that the right sidebar area is more right justified within that container?"
that all depends on many factors of your CSS layout, which I know nothing about, sorry.

then you say - "Again though, I want to make sure that in smaller views, the form aligns to the left side. "
?? what form ??

as I said you can not deal with the "New Mobil" Web that's on phones and tablets as you did with a desktop view, and Tablets fall somewhere between the BIG and the phone-SMALL .
0
 

Author Comment

by:COwebmaster
ID: 39245769
sorry for the confusion.  I've attached a visual.  I want to push the right sidebar to the right so that it aligns up to the right of the 960px container area.
screen.jpg
0
 
LVL 10

Expert Comment

by:jtwcs
ID: 39245787
To increase that gap, you will need to adjust the margin-right being applied to main content column.

This is on line 2569 of style.css

.one_fourth, .one_third, .one_half, .two_third, .three_fourth {
float: left;
margin-bottom: 1%;
margin-right: 4%;
position: relative;
}

Open in new window

Since the two column widths add up to 95%, you could adjust the margin-right to 5% in the above referenced declaration.  This will push the sidebar over farther to the right.
0
 

Author Comment

by:COwebmaster
ID: 39245809
I just tried that and it didn't work.
0
 
LVL 10

Assisted Solution

by:jtwcs
jtwcs earned 333 total points
ID: 39245913
It should move it over slightly but you may not have really noticed the difference.  However, you should change it back to 4% as it breaks the other footer area columns at 5%.  Did not notice this earlier.

The other thing I could suggest would be to put wrapper container around the content in the one_third class div in the sidebar column.  Apply the desired amount of padding-left (something like 25px) to that wrapper class.  Then for media below 719px wide, remove the padding from the container so it goes back to the left in one column view.
0
 

Author Comment

by:COwebmaster
ID: 39246147
Okay, so how would I do what you are suggesting in the css?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39246337
Just add
float:right

to .last_column (line 2581)

But you have a large left/right padding (20px) on .custom-formatting, .substitute_widget_class (line 915) so it's not going to move it that much more right.
0
 

Author Comment

by:COwebmaster
ID: 39247545
What if I increase the left main content area instead?  If so, what would I need to change in the css?
0
 

Author Comment

by:COwebmaster
ID: 39247673
Actually, I was able to add in the extra space on the home page by adding  this:

@media screen and ( min-width: 960px ) {
   #before-cont-box-1 .last_column {
       padding-left:50px;
       width:226px;
   }
}

I just need to figure out what to add in to make the internal pages do the same.  Any ideas?
0
 

Author Comment

by:COwebmaster
ID: 39247712
Okay, I think I figured it out using:

@media screen and ( min-width: 960px ) {

   #text-10 {

       padding-left:60px;

       width:216px;


   }

}
0
 

Author Closing Comment

by:COwebmaster
ID: 39275267
Thanks!
0

Featured Post

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

733 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