Search the forum...
Type to search...
Other Articles Anywhere questions
trey braid
trey braid
Peter thanks for helping me get the tabs working in my previous post!!!
SEE LINK > billingsblizzardhockey.com/NEW/index.php...m-mm/roster#forwards
<<<Throught I'd see about displaying 6 columns across>>><<<would I also need to add Bootstrap for a mobile device?>>>
I added this within the "FORWARDS" ARTICLE and instead of the text right under the image, it is to the right of the image. Would I need to add some additional CSS; so, everything is stacked like your Grid/Column layout Example in the tutorials?
<p>{articles category="Roster" tags="Forwards"}</p>
<p>{if first}</p>
<div class="grid grid-cols-6 gap-4">
<p>{/if}</p>
<div class="panel">
<p>[image-fulltext layout="true"]</p>
<p>[number] [link][title][/link]</p>
<p>[height] | [weight]</p>
<p>[school] | [experience]</p>
</div>
<p>{if last}</p>
</div>
<p>{/if}</p>
<p>{/articles}</p>
Peter van Westen
ADMIN
Peter van Westen
ADMIN
Articles Anywhere is not responsible for the styling of the data. It is only responsible for outputting it with the HTML elements (including classes and such) as you tell it to.
The styling (how elements are laid out) is down to your template CSS styling.
So check your HTML output to see if the "grid" elements are structured correctly as you expect.
Any further questions about what classes you need to get whatever result you want, has nothing to do with Articles Anywhere, and should be directed to your template developer.
trey braid
trey braid
<<<<<<<Peter I thought I'd circle back after and let you know 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 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] [link][title][/link]</p>
<p>[height] | [weight]</p>
<p>[school] | [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
Forum
GRID/ COLUMN LAYOUT
trey braid
trey braid
SEE LINK > billingsblizzardhockey.com/NEW/index.php...m-mm/roster#forwards
<<<Throught I'd see about displaying 6 columns across>>><<<would I also need to add Bootstrap for a mobile device?>>>
I added this within the "FORWARDS" ARTICLE and instead of the text right under the image, it is to the right of the image. Would I need to add some additional CSS; so, everything is stacked like your Grid/Column layout Example in the tutorials?
<p>{articles category="Roster" tags="Forwards"}</p>
<p>{if first}</p>
<div class="grid grid-cols-6 gap-4">
<p>{/if}</p>
<div class="panel">
<p>[image-fulltext layout="true"]</p>
<p>[number] [link][title][/link]</p>
<p>[height] | [weight]</p>
<p>[school] | [experience]</p>
</div>
<p>{if last}</p>
</div>
<p>{/if}</p>
<p>{/articles}</p>
Peter van Westen
ADMIN
Peter van Westen
ADMIN
The styling (how elements are laid out) is down to your template CSS styling.
So check your HTML output to see if the "grid" elements are structured correctly as you expect.
Any further questions about what classes you need to get whatever result you want, has nothing to do with Articles Anywhere, and should be directed to your template developer.
Please post a rating at the
Joomla! Extensions Directory
trey braid
trey braid
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 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] [link][title][/link]</p>
<p>[height] | [weight]</p>
<p>[school] | [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
You can only post on the extension support forum if you have an active subscription and you
log in
Buy a Pro subscription
Buy a Pro subscription