Page not displaying correctly.

Hello all,

I am sure this is an easy fix I am just not seeing it, when I click on the Shop all brands page it doesn't display the page correctly I have attached a screenshot of what it looks like, I am hoping that someone can give me any ideas to make it display correctly. If you would like to see the site your self to get a better understanding https://shop.nmtaserandmore.com/index.php?main_page=brands is the link directly to that page.

includes/templates/responsive_classic/css/stylesheet.css

find

.brandCell {
  height: 126px !important;
}

and remove it. Save the file and reload the page (CTRL+F5) or clear browser cache. This should allow the matchHeight.js to trigger and align the rows. There will be some gaps because your images are different sizes, but it will look much better.

I would suggest leaving the

.brandCell {
  height: 126px !important;
}

but change it to

.brandCell {
height: auto !important;
}

That's the quick, down and dirty.

you have to make a small adjustment to the html to get this to work right if you want it to be responsive. Sizing images is not the best option in this case.

you have

<div class="">
<div class="brandCell centeredContent back" style="width: 33%; height: 126px;"><a href="https://shop.nmtaserandmore.com/511-tatical-m-16.html"><div class="brandImage"><img src="images/5.11.webp" title="5.11 Tatical" alt="(image for) 5.11 Tatical" width="218" height="96"></div><div class="brandName">5.11 Tatical</div></a></div>
<div class="brandCell centeredContent back" style="width: 33%; height: 126px;"><a href="https://shop.nmtaserandmore.com/abkt-tac-m-15.html"><div class="brandImage"><img src="images/abkt-logo.jpg" title="ABKT Tac" alt="(image for) ABKT Tac" width="220" height="220"></div><div class="brandName">ABKT Tac</div></a></div>

change it to

<div class="example">
<div class="brandCell"><a href="https://shop.nmtaserandmore.com/511-tatical-m-16.html"><div class="brandImage"><img src="images/5.11.webp" title="5.11 Tatical" alt="(image for) 5.11 Tatical" width="218" height="96"></div><div class="brandName">5.11 Tatical</div></a></div>
<div class="brandCell"><a href="https://shop.nmtaserandmore.com/abkt-tac-m-15.html"><div class="brandImage"><img src="images/abkt-logo.jpg" title="ABKT Tac" alt="(image for) ABKT Tac" width="220" height="220"></div><div class="brandName">ABKT Tac</div></a></div>

All i did was removed remove the styles from the html

.centeredContent back and style="width: 33%; height: 126px;"

add this to your css and you will have a nice responsive brand page

.example
display: flex;
flex-direction: column;
gap: 1rem;
text-align: center;
align-content: center;
align-items: center;
}



@media (min-width: 576px) {
.example
display: flex;
flex-direction: row;
gap: 1rem;
text-align: center;
align-content: center;
align-items: center;
}
}

chadlly2003:

you have to make a small adjustment to the html to get this to work right if you want it to be responsive. Sizing images is not the best option in this case.

you have

<div class=""> <div class="brandCell centeredContent back" style="width: 33%; height: 126px;"><a href="https://shop.nmtaserandmore.com/511-tatical-m-16.html"><div class="brandImage"><img src="images/5.11.webp" title="5.11 Tatical" alt="(image for) 5.11 Tatical" width="218" height="96"></div><div class="brandName">5.11 Tatical</div></a></div> <div class="brandCell centeredContent back" style="width: 33%; height: 126px;"><a href="https://shop.nmtaserandmore.com/abkt-tac-m-15.html"><div class="brandImage"><img src="images/abkt-logo.jpg" title="ABKT Tac" alt="(image for) ABKT Tac" width="220" height="220"></div><div class="brandName">ABKT Tac</div></a></div> ``` > > > > > change it to > ``` <div class="example"> <div class="brandCell"><a href="https://shop.nmtaserandmore.com/511-tatical-m-16.html"><div class="brandImage"><img src="images/5.11.webp" title="5.11 Tatical" alt="(image for) 5.11 Tatical" width="218" height="96"></div><div class="brandName">5.11 Tatical</div></a></div> <div class="brandCell"><a href="https://shop.nmtaserandmore.com/abkt-tac-m-15.html"><div class="brandImage"><img src="images/abkt-logo.jpg" title="ABKT Tac" alt="(image for) ABKT Tac" width="220" height="220"></div><div class="brandName">ABKT Tac</div></a></div> ``` > > All i did was removed remove the styles from the html > ``` .centeredContent back and style="width: 33%; height: 126px;" ``` > > > add this to your css and you will have a nice responsive brand page > > ``` .example display: flex; flex-direction: column; gap: 1rem; text-align: center; align-content: center; align-items: center; }

@media (min-width: 576px) {
.example
display: flex;
flex-direction: row;
gap: 1rem;
text-align: center;
align-content: center;
align-items: center;
}
}

> 
> 

Which files would i need to change?

path: includes\templates\your_template\templates\tpl_brands_default.php

find this

'params' => 'class="brandCell centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',

replace with

'params' => 'class="brandCell"' . ' ' . '',

path: includes\templates\yor_template\common\tpl_columnar_display.php
find this

$r_params = 'class=""';

replace with

$r_params = 'class="example"';

CSS -- so this does not impact any other pages i added #brandsBody to the class
path: /includes/templates/responsive_classic/css/stylesheet.css
Add this to the bottom of stylesheet

#brandsBody .example {
display: flex;
flex-direction: column;
gap: 1rem;
text-align: center;
align-content: center;
align-items: center;
}



@media (min-width: 576px) {
#brandsBody .example {
display: lex;
flex-direction: row;
gap: 1rem;
text-align: center;
align-content: center;
align-items: center;
}
}

chadlly2003:

path: includes\templates\your_template\templates\tpl_brands_default.php

find this

'params' => 'class="brandCell centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',

> 
> replace with
> 
> ```
'params' => 'class="brandCell"' . ' ' . '',

path: includes\templates\yor_template\common\tpl_columnar_display.php
find this

$r_params = 'class=""';

> 
> replace with 
> ```
$r_params = 'class="example"';

CSS -- so this does not impact any other pages i added #brandsBody to the class
path: /includes/templates/responsive_classic/css/stylesheet.css
Add this to the bottom of stylesheet

#brandsBody .example {
display: flex;
flex-direction: column;
gap: 1rem;
text-align: center;
align-content: center;
align-items: center;
}

@media (min-width: 576px) {
#brandsBody .example {
display: flex;
flex-direction: row;
gap: 1rem;
text-align: center;
align-content: center;
align-items: center;
}
}

one thing i forgot to add so your content is centered

@media (min-width: 576px) {
#brandsBody .example {
display: flex;
flex-direction: row;
gap: 1rem;
text-align: center;
align-content: center;
align-items: center;
}


just add this 

justify-content: center