Solved

changing layout of page

Posted on 2013-02-02
6
222 Views
Last Modified: 2013-05-22
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
Comment
Question by:jonathanduane2010
6 Comments
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38846939
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
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38846950
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
 
LVL 11

Expert Comment

by:mcnute
ID: 38846954
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:jonathanduane2010
ID: 38848512
nickinthooz

what file do i need to edit?

thanks a milliom
0
 
LVL 7

Accepted Solution

by:
Alicia St Rose earned 425 total points
ID: 38848873
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
 

Author Comment

by:jonathanduane2010
ID: 38858607
ok i will try each and let you know how i get on
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Read about why website design really matters in today's demanding market.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
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 purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

813 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

16 Experts available now in Live!

Get 1:1 Help Now