changing layout of page

hi, i was wondering how i would edit my page on www.nuanceconsultancy.com so i have three colums under the slider instead of just two???

thanks guys
jonathanduane2010Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Alicia St RoseConnect With a Mentor Owner & Principle Developer/DesignerCommented:
Question:
Are you adding widgets to a sidebar to get the content? It appears that way from looking at the code.

That particular sidebar or widgetized area is styled to have a 48% width.
It also appears that your theme is responsive so you'd have to give the widths in percentages or else your layout will have a conniption on mobile devices.

In order to put inline styles on those widgetized areas you'll have to dig into the theme's function files, probably functions.php. It best to use firebug and add the styles to the stylesheet instead.

You may also have to tweak any media queries in the style sheet for the responsiveness...
0
 
nickinthoozCommented:
you need to find the width of your wrapper.  Say your wrapper or container is 960px wide. Under the slider you can do:

<div style="width:320px; float:left; overflow:hidden">column 1</div>
<div style="width:320px; float:left; overflow:hidden">column 2</div>
<div style="width:320px; float:left; overflow:hidden">column 3</div>
<div style="clear:both;"></div> <-- if it's needed

Open in new window



That floats all the div's beside each other.  If you have borders or anything like that you'll have to adjust them accordingly.  Just remember, anything you put in them, including your video, have to be less than 320 pixels wide.

You could alternatively do:

<style>
#column {
width:320px;
float:left;
overflow:hidden;
}
</style>

<div id="column">column 1</div>
<div id="column">column 2</div>
<div id="column">column 3</div>

Open in new window

0
 
nickinthoozCommented:
like so:

<!-- END REVOLUTION SLIDER -->
				
<div id="aq-template-wrapper-705" class="aq-template-wrapper aq_row">
	  	  <div style="width:320px; float:left; overflow:hidden"><h4 class="aq-block-title">How We Do It</h4><p>Linking Strategic Planning with Financial Roadmaps, Analysis, Business Performance Management<br />
Measurement, Project & Program Management</p></div>
	  <div  style="width:320px; float:left; overflow:hidden"><h4 class="aq-block-title">How We Do It</h4><p>Linking Strategic Planning with Financial Roadmaps, Analysis, Business Performance Management<br />
Measurement, Project & Program Management</p></div>
	  <div style="width:320px; float:left; overflow:hidden"><h4 class="aq-block-title">What We Do</h4><p>Linking Strategic Planning with Financial Roadmaps, Analysis, Business Performance Management<br />
Measurement, Project & Program Management</p>
</div><div id="aq-block-3" class="aq-block aq-block-aq_contact_block aq_span6 aq-first cf"><div class="wpcf7" id="wpcf7-f706-p693-o1"><form action="/#wpcf7-f706-p693-o1" method="post" class="wpcf7-form">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="706" />
<input type="hidden" name="_wpcf7_version" value="3.3.3" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f706-p693-o1" />
<input type="hidden" name="_wpnonce" value="f9d990685b" />
</div>
<p>Your Name (required)<br />

Open in new window

it produces what the attached image shows.  right under the slideshow.
3column.png
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
mcnuteCommented:
float three divs to the left and put them to width 33%. Note that the 33% only works if you have no padding and margin on the divs.
0
 
jonathanduane2010Author Commented:
nickinthooz

what file do i need to edit?

thanks a milliom
0
 
jonathanduane2010Author Commented:
ok i will try each and let you know how i get on
0
All Courses

From novice to tech pro — start learning today.