Solved

Add space between main content area and right sidebar

Posted on 2013-06-13
16
654 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
  • 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 33

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
 

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 33

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
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.

 

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

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

947 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

22 Experts available now in Live!

Get 1:1 Help Now