Hi,

you have neutralise float: left it means that inside custom.css in line 33

use:

.article-details .article-full-image, .article-intro-image {
  text-align: left;
  margin-bottom: 2rem;
  margin-right: 25px;
  float: none !important;
}

I added extra line. Whole rest you should be able to manage.

Guides: https://www.w3schools.com/CSSref/pr_grid.asp

That doesn't work.

When I add that instead of an image being in 6 columns it is 1 image centered with 6 rows...

Then when I click on the link to go to the details page everything is also centered

Thoughts...

Paul I found a solution.

I compared the page with another site with a comparable page utilizing bootstrap and saw where the other site had the:

div class="row" being used whereas (Peter) you were using div class="grid grid-cols-6 gap-4"

<p>{articles category="Roster" tags="Forwards"}</p>
<p>{if first}</p>
<div class="row">
<p>{/if}</p>
<div class="panel">
<p>[image-fulltext layout="true" width="175px"]</p>
<p>[number]&nbsp; [link][title][/link]</p>
<p>[height]&nbsp; |&nbsp; [weight]</p>
<p>[school]&nbsp; |&nbsp; [experience]</p>
</div>
<p>{if last}</p>
</div>
<p>{/if}</p>
<p>{/articles}</p>

After doing some research in your forum, I saw where Helix Ultimate uses a different version of Bootstrap than Tabs and might cause issues... As soon as I added ROW and refreshed the page everything lined up perfectly. I just have to clean up a bit of styling which I'll do in the Tabs style.min.css file

Helix Ultimate 2.0.x uses Boostrap v5.0.1 -- but soon it should be updated to the last version. Or you can update files manually via FTP.

Hi @trey-braid.

Using <p>s as a wrapper for layouts is unacceptable and will cause problems with SEO. Replace it to <div>s