I want to create a division that has 7 evenly spaced columns within a single row. The row is full browser width-stretched with 100px padding on right and left sides respectively. I am having a problem because the last column breaks to the next row. Can you please guide me towards a solution for coding the 7 columns to appear in a single row.
Thank you for this great template and hoping that you can assist me with a solution to this issue.
Hello,
This is Definitely Possible.
Simply use the .col Class for the Columns 7 times. Example:
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>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 for your reply. is it possible to place a "ul" list of items in each column?
I'd like to place the row with 7equal columns in the footer, each column will contain a “ul” list of items. To allow maximum amount of text in each of the columns in UL list, how can I make the columns as wide as possible using any of your footer style templates with less padding/margins on the left and right sides?
Thank you for your help with this issue.
Hello,
This is Definitely Possible. Consider checking this Example: http://themes.semicolonweb.com/html/canvas/demo-construction.html#footer.
You can make the replace the .container Class in the #footer DIV with .container-fluid Class. Try using this code:
<!-- Footer
============================================= -->
<footer id="footer" class="dark">
<div class="container-fluid">
<!-- Footer Widgets
============================================= -->
<div class="footer-widgets-wrap">
<div class="row">
<div class="col widget_links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col widget_links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col widget_links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col widget_links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col widget_links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col widget_links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col widget_links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div><!-- .footer-widgets-wrap end -->
</div>
</footer><!-- #footer end -->This should 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 for the help on this issue. How can I configure the html and css files for the above columns so they don’t condense on mobile devices, but reconfigure to stack on top of each other?
Hello,
Simply use the following code instead:
<div class="col-sm-6 col-md-3 col-lg widget_links">On Large Devices, the Grid will be 7 Columns, 4 Columns on Medium Devices, 2 Columns on Mobile Landscape and 1 Column on Mobile Protrait. Please check the Bootstrap Grid for more variations: https://getbootstrap.com/docs/4.5/layout/grid/#stacked-to-horizontal .
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
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