Solved

changing layout of page

Posted on 2013-02-02
6
224 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will learn how to count occurrences of each item in an array.
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…

730 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