[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 228
  • Last Modified:

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
0
jonathanduane2010
Asked:
jonathanduane2010
1 Solution
 
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
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
jonathanduane2010Author Commented:
nickinthooz

what file do i need to edit?

thanks a milliom
0
 
Alicia St RoseOwner & 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
 
jonathanduane2010Author Commented:
ok i will try each and let you know how i get on
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now