Solved

Add space between main content area and right sidebar

Posted on 2013-06-13
16
651 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

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

Assisted Solution

by:jtwcs
jtwcs earned 333 total points
Comment Utility
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
Comment Utility
Okay, so how would I do what you are suggesting in the css?
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks!
0

Featured Post

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.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
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…

763 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

10 Experts available now in Live!

Get 1:1 Help Now