Add space between main content area and right sidebar

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/
COwebmasterAsked:
Who is Participating?
 
Slick812Connect With a Mentor Commented:
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
 
jtwcsConnect With a Mentor Commented:
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
 
COwebmasterAuthor Commented:
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
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
Slick812Commented:
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
 
COwebmasterAuthor Commented:
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
 
COwebmasterAuthor Commented:
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
 
COwebmasterAuthor Commented:
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
 
jtwcsCommented:
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
 
COwebmasterAuthor Commented:
I just tried that and it didn't work.
0
 
jtwcsConnect With a Mentor Commented:
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
 
COwebmasterAuthor Commented:
Okay, so how would I do what you are suggesting in the css?
0
 
GaryCommented:
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
 
COwebmasterAuthor Commented:
What if I increase the left main content area instead?  If so, what would I need to change in the css?
0
 
COwebmasterAuthor Commented:
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
 
COwebmasterAuthor Commented:
Okay, I think I figured it out using:

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

   #text-10 {

       padding-left:60px;

       width:216px;


   }

}
0
 
COwebmasterAuthor Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.