TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

March 29, 2024, 05:05:51 AM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,105
  • Total Topics: 21,213
  • Online today: 310
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 1
  • Guests: 308
  • Total: 309
  • lurkalot

Pages

Started by jernatety, May 20, 2018, 02:44:32 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

jernatety

This has to do with pages, instead of opening a new topic I'll mention here.

Check out my test page/article. I have icons in a table with padding. When I view this on my phone it's responsive and expands or contracts based on the display size.

https://www.youthhockeyinfo.com/index.php?page=3

But when I put this same table code in an HTML/Java code block on my front panel it's not responsive at all. Even if I use style tags to be responsive. I'd like to have some space in between each image instead of the tiny square it currently is, seen here on the front panel

http://www.youthhockeyinfo.com/index.php

@rjen

Tables are not really suited to be responsive.

You should only use tables is you are displaying tabular information and can really not do without.
Otherwise you better use DIVs in Inline Blocks...

Checkout this page for example: https://www.fjr-club.nl/index.php?page=Modellen-Verenigde-Staten

I used to have the images in tables, with all sorts of issues, now in divs and the when the screens get smaller the divs stay the sam size but reorder with the screen..

Sample code for your site to test...

<div>
<strong style="color: rgb(0, 51, 102);">List of Images in DIVs responsive</strong> <br /> <br />
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/AAHA_MEDIUM.png" alt="Matte Phantom Blue" title="Matte Phantom Blue" />
</div>
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/AYHL_MEDIUM.png" alt="Matte Phantom Blue" title="Matte Phantom Blue" />
</div>
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/CGHL_MEDIUM.png" alt="Matte Phantom Blue" title="Matte Phantom Blue" />
</div>
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/DVHL_MEDIUM.png" alt="Matte Phantom Blue" title="Matte Phantom Blue" />
</div>
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/HVHL_MEDIUM.png" alt="Raven" title="Raven" />
</div>
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/INDY_MEDIUM.png" alt="Raven" title="Raven" />
</div>
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/LIAHL_MEDIUM.png" alt="Raven" title="Raven" />
</div>
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/MAWHA_MEDIUM.png" alt="Raven" title="Raven" />
</div>
</div>
Running Latest TP on SMF2.1 at: www.fjr-club.nl

jernatety

Quote from: @rjen on May 24, 2018, 05:00:04 PM
Tables are not really suited to be responsive.

You should only use tables is you are displaying tabular information and can really not do without.
Otherwise you better use DIVs in Inline Blocks...

Checkout this page for example: https://www.fjr-club.nl/index.php?page=Modellen-Verenigde-Staten

I used to have the images in tables, with all sorts of issues, now in divs and the when the screens get smaller the divs stay the sam size but reorder with the screen..

Sample code for your site to test...

<div>
<strong style="color: rgb(0, 51, 102);">List of Images in DIVs responsive</strong> <br /> <br />
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/AAHA_MEDIUM.png" alt="Matte Phantom Blue" title="Matte Phantom Blue" />
</div>
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/AYHL_MEDIUM.png" alt="Matte Phantom Blue" title="Matte Phantom Blue" />
</div>
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/CGHL_MEDIUM.png" alt="Matte Phantom Blue" title="Matte Phantom Blue" />
</div>
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/DVHL_MEDIUM.png" alt="Matte Phantom Blue" title="Matte Phantom Blue" />
</div>
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/HVHL_MEDIUM.png" alt="Raven" title="Raven" />
</div>
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/INDY_MEDIUM.png" alt="Raven" title="Raven" />
</div>
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/LIAHL_MEDIUM.png" alt="Raven" title="Raven" />
</div>
<div style="display: inline-block;">
<img style="border-width: 0px;" src="https://www.youthhockeyinfo.com/Themes/default/images/icons/MAWHA_MEDIUM.png" alt="Raven" title="Raven" />
</div>
</div>


Thank you for both the advice and example. I am very limited to my overall ability to code anything. I kind of rely on tables mostly because they're easy to look up for samples. I appreciate your help!

@rjen

I am not much of a coder myself, but given a working example it is fairly easy to build further on that...
Running Latest TP on SMF2.1 at: www.fjr-club.nl

jernatety

Quote from: @rjen on May 24, 2018, 05:36:24 PM
I am not much of a coder myself, but given a working example it is fairly easy to build further on that...

I learned something new today, appreciate it very much. Working perfectly  :)

jernatety

#45
Another page question. Would meta key word, description, title etc tags. work on article pages?

Explanation why I'd like to use them. A site similar to mine went offline 2 months ago. The owner isn't going to re-launch. Instead he's trying to sell the domain name. There were a lot of members and it got a lot of traffic when it was still active. I'd like to put key search terms in meta to try and get my site into that sites google search results.

lurkalot

Quote from: jernatety on May 24, 2018, 07:29:10 PM
Another page question. Would meta key word, description, title etc tags. work on article pages?

Explanation why I'd like to use them. A site similar to mine went offline 2 months ago. The owner isn't going to re-launch. Instead he's trying to sell the domain name. There were a lot of members and it got a lot of traffic when it was still active. I'd like to put key search terms in meta to try and get my site into that sites google search results.

I'm not really up on this SEO stuff, so afraid I'm not going to be much help.  I know the articles do get picked up by google, so adding the right keywords throughout the articles should help.  I just searched for AMPLITUBE 4 REVIEW and found it third place on page one of google, out of About 273,000 results.

While here, just like to say, I do like your nav menu down the left of your site, looks very neat.  8)

jernatety

Quote from: lurkalot on May 26, 2018, 07:41:53 PM
Quote from: jernatety on May 24, 2018, 07:29:10 PM
Another page question. Would meta key word, description, title etc tags. work on article pages?

Explanation why I'd like to use them. A site similar to mine went offline 2 months ago. The owner isn't going to re-launch. Instead he's trying to sell the domain name. There were a lot of members and it got a lot of traffic when it was still active. I'd like to put key search terms in meta to try and get my site into that sites google search results.

I'm not really up on this SEO stuff, so afraid I'm not going to be much help.  I know the articles do get picked up by google, so adding the right keywords throughout the articles should help.  I just searched for AMPLITUBE 4 REVIEW and found it third place on page one of google, out of About 273,000 results.

While here, just like to say, I do like your nav menu down the left of your site, looks very neat.  8)

Ok, cool. And thanks. The idea is to make the site as user friendly as possible. It's going to be parents using the site mainly for travel directions and I it to be as simple to navigate as possible on all platforms.