Hello! I am trying to setup a page that has a left sidebar and information in two columns. I started out with the content in three columns. Once I added the sidebar, I needed to take the content down to two. I am not getting the columns to display correctly.
Then, with the side bar being shorter than the content columns, is there a way to not let the text display under the sidebar?
Can you help?
Thank you!!!!
Sorry, tried to add the code in the original message and didn't realize I needed to do it differently so it would show. Added below. I tried to edit the message and it gave me a message that I needed to renew my license.
Here is the page: http://www.reddingtondesign.com/new/what-we-offer.php
<!-- Sidebar
============================================= -->
<div class="sidebar nobottommargin clearfix">
<div class="sidebar-widgets-wrap">
<div class="widget widget_links clearfix">
<h4>Categories</h4>
<ul>
<li><a href="#"><div>Apparel</div></a></li>
<li><a href="#"><div>Backlit & Exterior Signs</div></a></li>
<li><a href="#"><div>Banners, Flags, Stands & Hardware</div></a></li>
<li><a href="#"><div>Decals</div></a></li>
<li><a href="#"><div>Dimensional Letters</div></a></li>
<li><a href="#"><div>HERE</div></a></li>
<li><a href="#"><div>Page Submenu</div></a></li>
<li><a href="#"><div>Services - Layout 1</div></a></li>
<li><a href="#"><div>Services - Layout 2</div></a></li>
<li><a href="#"><div>Services - Layout 3</div></a></li>
<li><a href="#"><div>FAQs - Layout 1</div></a></li>
<li><a href="#"><div>FAQs - Layout 2</div></a></li>
<li><a href="#"><div>FAQs - Layout 3</div></a></li>
<li><a href="#"><div>FAQs - Layout 4</div></a></li>
<li><a href="#"><div>Full Width Page</div></a></li>
<li><a href="#"><div>Full Width - Wide Page</div></a></li>
<li><a href="#"><div>Right Sidebar Page</div></a></li>
<li><a href="#"><div>Left Sidebar Page</div></a></li>
</ul>
</div>
</div>
</div><!-- .sidebar end -->
<!-- Categories
============================================= -->
<div class="col_one_third">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/tradeshow_displays.jpg" alt="Tradeshow Displays" width="69" height="64">
</div>
<h3><a href="portfolio_trade_show_displays.php">Trade Show Displays</a></h3>
<p><font color = "black">PopUps, Portable, Fabric Structures,
Modular, Table Throws, Outdoor...</font>
</p>
</div>
</div>
<div class="col_one_third col_last">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/banner_stands.jpg" alt="Banner Stands" width="69" height="64">
</div>
<h3>Banners, Flags, & Hardware</h3>
<p><font color = "black">...</font></p>
</div>
</div>
<div class="col_one_third">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/banner_stands.jpg" alt="Banner Stands" width="69" height="64">
</div>
<h3>Posters & Prints</h3>
<p><font color = "black">...</font></p>
</div>
</div>
<div class="col_one_third col_last">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/tradeshow_displays.jpg" alt="Tradeshow Displays" width="69" height="64">
</div>
<h3>Business Stationery</h3>
<p><font color = "black">Business Cards, Post Cards, Brochures,
Presentation Folders...</font></p>
</div>
</div>
<div class="col_one_third">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/banner_stands.jpg" alt="Banner Stands" width="69" height="64">
</div>
<h3>Vehicle Graphics & Wraps</h3>
<p><font color = "black">Vans, Trucks, Boats...
</font></p>
</div>
</div>
<div class="col_one_third col_last">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/tradeshow_displays.jpg" alt="Tradeshow Displays" width="69" height="64">
</div>
<h3>Vinyl Graphics</h3>
<p><font color = "black">...</font></p>
</div>
</div>
<div class="col_one_third">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/tradeshow_displays.jpg" alt="Tradeshow Displays" width="69" height="64">
</div>
<h3>Backlit & Exterior Signs</h3>
<p><font color = "black">Monument Signs...</font>
</p>
</div>
</div>
<div class="col_one_third col_last">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/banner_stands.jpg" alt="Banner Stands" width="69" height="64">
</div>
<h3>Mats & Runners</h3>
<p><font color = "black">Indoor, Outdoor, Vinyl, Carpet...</font></p>
</div>
</div>
<div class="col_one_third">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/banner_stands.jpg" alt="Banner Stands" width="69" height="64">
</div>
<h3>Decals</h3>
<p><font color = "black">...</font></p>
</div>
</div>
<div class="col_one_third col_last">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/tradeshow_displays.jpg" alt="Tradeshow Displays" width="69" height="64">
</div>
<h3>Dimensional Letters</h3>
<p><font color = "black">...</font>
</p>
</div>
</div>
<div class="col_one_third">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/banner_stands.jpg" alt="Banner Stands" width="69" height="64">
</div>
<h3>Directory & Wayfinding</h3>
<p><font color = "black">Braille, Sign Makers Catalog...</font></p>
</div>
</div>
<div class="col_one_third col_last">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/banner_stands.jpg" alt="Banner Stands" width="69" height="64">
</div>
<h3>Doors, Windows, Walls & Floors</h3>
<p><font color = "black">...</font></p>
</div>
</div>
<div class="col_one_third">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/tradeshow_displays.jpg" alt="Tradeshow Displays" width="69" height="64">
</div>
<h3>Engraved Signs</h3>
<p><font color = "black">Name Plates, Name Tags...</font>
</p>
</div>
</div>
<div class="col_one_third col_last">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/banner_stands.jpg" alt="Banner Stands" width="69" height="64">
</div>
<h3>Framed Prints</h3>
<p><font color = "black">...</font></p>
</div>
</div>
<div class="col_one_third">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/banner_stands.jpg" alt="Banner Stands" width="69" height="64">
</div>
<h3>Interior Signs</h3>
<p><font color = "black">Standoff Systems...</font></p>
</div>
</div>
<div class="col_one_third col_last">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/tradeshow_displays.jpg" alt="Tradeshow Displays" width="69" height="64">
</div>
<h3>Light Boxes & L.E.D.</h3>
<p><font color = "black">...</font>
</p>
</div>
</div>
<div class="col_one_third">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/banner_stands.jpg" alt="Banner Stands" width="69" height="64">
</div>
<h3>Plaques</h3>
<p><font color = "black">Etched, Cast, ADA/Wayfinding, Engraved...</font></p>
</div>
</div>
<div class="col_one_third col_last">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/banner_stands.jpg" alt="Banner Stands" width="69" height="64">
</div>
<h3>Promotional Items</h3>
<p><font color = "black">Pens, Mugs, Caps, USB Drives, ...</font></p>
</div>
</div>
<div class="col_one_third">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/tradeshow_displays.jpg" alt="Tradeshow Displays" width="69" height="64">
</div>
<h3>Mounting, Lamination & Installation</h3>
<p><font color = "black">...</font></p>
</div>
</div>
<div class="col_one_third col_last">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/banner_stands.jpg" alt="Banner Stands" width="69" height="64">
</div>
<h3>Category??</h3>
<p><font color = "black">Vans, Trucks, Boats...
</font></p>
</div>
</div>
<div class="col_one_third">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/tradeshow_displays.jpg" alt="Tradeshow Displays" width="69" height="64">
</div>
<h3>Category??</h3>
<p><font color = "black">...</font></p>
</div>
</div>
<div class="col_one_third nobottommargin col_last">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/tradeshow_displays.jpg" alt="Tradeshow Displays" width="69" height="64">
</div>
<h3>Sandblasted & Routed Signs</h3>
<p><font color = "black">...</font>
</p>
</div>
</div>
<div class="col_one_third nobottommargin">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/banner_stands.jpg" alt="Banner Stands" width="69" height="64">
</div>
<h3>Site Signs</h3>
<p><font color = "black">...</font></p>
</div>
</div>
<div class="col_one_third nobottommargin col_last">
<div class="feature-box fbox-rounded fbox-effect">
<div class="fbox-icon">
<img src="images/banner_stands.jpg" alt="Banner Stands" width="69" height="64">
</div>
<h3>Custom Projects</h3>
<p><font color = "black">...</font></p>
</div>
</div>
</div>
</section><!-- #content end -->Hello,
There are several HTML Validation errors on your Page: https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.reddingtondesign.com%2Fnew%2Fwhat-we-offer.php which is causing these errors as normally it should fine. Please fix all the errors and then check your Page again on the Validator to see if any more errors exist. Fix all of them till there are no errors and your issue should be automatically fixed.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thank you for your help.
I have fixed all but one error.
Bad value https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Raleway:300,400,500,600,700|Crete+Round:400i for attribute href on element link: Illegal character in query: | is not allowed.
I am not sure what to do with it, as the string is used in the header of your templates. I have checked several templates and they are all the same. I checked the page http://themes.semicolonweb.com/html/canvas/services-3.html in the Validator and it too has the same error, plus another.
With all but the one error fixed, the page is still not displaying correctly. Any other suggestions?
Thank you!
Rachele
Hello,
You can definitely ignore this error. The important errors to fix are the ones where it says Unclosed Tags or Duplicate IDs.
Now coming back to your error, the Grid you are using is incorrect and not in accordance to the Default Templates as provided with Canvas. Please make sure that you always add your Content inside a .postcontent Container whenever you use a Sidebar on a Page. Please follow the default coding structure as in the left-sidebar.html Template. Example:
<!-- Post Content
============================================= -->
<div class="postcontent nobottommargin col_last clearfix">
.. your content here
</div><!-- .postcontent end -->
<!-- Sidebar
============================================= -->
<div class="sidebar nobottommargin clearfix">
<div class="sidebar-widgets-wrap">
...
</div>
</div><!-- .sidebar end -->This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thank you very much. The side bar is now working as it should. I am still having trouble getting down to two columns. Any suggestions for that?
Hello,
The Column Codes you are using is incorrect. To make your Content to display into 2 Columns, replace .col_one_third Classes with the .col_half Class.
Also make sure that you have completely followed the Documentation > Page Elements > Grid Section for full instructions on using the Grid Columns.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thank you! I had tried col_half, but didn't work and more than likely due to the other errors I had on the page.
Really love the template and all the help!
Hello,
Thank You so much for the Kind Words! :)
Really Glad that your issues were resolved. Thanks for your Patience.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard