Solved

changing layout of page

Posted on 2013-02-02
6
220 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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 how to look for a specific file type in a local or remote server directory using PHP.

706 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

14 Experts available now in Live!

Get 1:1 Help Now