Ecommerce Responsive Template Search & Links

Reevesie  wrote Sidebar Menu seems a bit superfluous on my website is there a way of making the 3 col products fit over full width?

Yes. Make a back up copy of your file and css first before attempting the changes.

1. Obviously delete the sidebar code from your page:

<section class="sidebar">

   <!-- This adds a sidebar with 1 searchbox,2 menusets, each with 4 links -->

   <input type="text"  id="search" value="search">

   <div id="menubar">

   <nav class="menu">

   <h2><!-- Title for menuset 1 --> 1/8 PAGE</h2>

   <hr>

   <ul>

   <!-- List of links under menuset 1 -->

   <li><a href="#A" title="1/8 Page 1 Ad 1 Magazine">1/8 PAGE 1 AD <br> 1 Magazine</a></li>

   <li><a href="#" title="Link">1 MAGAZINE 6 ADS</a></li>

   <li><a href="#" title="Link">2 MAGAZINES 6 ADS</a></li>

   <li class="notimp"><!-- notimp class is applied to remove this link from the tablet and phone views --><a href="#"  title="Link">Link 4</a></li>

   </ul>

   </nav>

   <nav class="menu">

   <h2>MENU ITEM 2 </h2>

   <!-- Title for menuset 2 -->

   <hr>

   <ul>

   <!--List of links under menuset 2 -->

   <li><a href="#" title="Link">Link 1</a></li>

   <li><a href="#" title="Link">Link 2</a></li>

   <li><a href="#B" title="Link">LINK B</a></li>

   <li class="notimp"><!-- notimp class is applied to remove this link from the tablet and phone views --><a href="#" title="Link">Link 4</a></li>

   </ul>

   </nav>

   </div>

   </section>

2. Find the below in your css file:

/* Product rows for catalog */

#content .mainContent .productRow {

overflow: auto;

color: rgba(146,146,146,1.00);

}

and change it to:

/* Each product Information in the catalog */

#content .mainContent .productRow {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

}

3. Find the below in your your css file

/* Each product Information in the catalog */

/*.mainContent .productRow .productInfo {

    float: left;

    padding-left: 5%;

    padding-right: 5%;

    width: 22%;

}

*/

and change it to:

/* Each product Information in the catalog */

.mainContent .productRow .productInfo {

width: 22%;

}

4. Find the below in the brown colored @media screen and (max-width:480px) { } in your css file:

/* Each product in catalog view */

.mainContent .productRow .productInfo {

    width: 100%;

    display: block;

    padding-left: 0px;

    padding-right: 0px;

    position: relative;

    left: -2%;

}

and change it to:

.mainContent .productRow .productInfo {

width: 100%;

}

That's all - you should have a wider 3 column structure now.