The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Mobile & Desktop Image Optimization
SanTrapGamer
post Aug 13 2020, 09:12 AM
Post #1





Group: Members
Posts: 4
Joined: 13-August 20
Member No.: 27,488



So, I have the following coding that has two images that reference hyperlinks. My issue is that prior to these, I'm using <table> with rows of 10 images in each row. When I get to the last few images (coding attached), they don't size down proportionally like the rows previously. So, I've been manually adjusting the size to hopefully match those on the Desktop view, but the images don't size properly on mobile.
CODE
<a href="https://www.metagamevgc.com/urshifu" target="_blank"><img src="https://projectpokemon.org/images/sprites-models/homeimg/poke_capture_0892_001_mf_n_00000000_f_n.png" width="128"></a><a href="https://www.metagamevgc.com/urshifu-rapid-strike" target="_blank"><img src="https://projectpokemon.org/images/sprites-models/homeimg/poke_capture_0892_000_mf_n_00000000_f_n.png" width="128"></a>



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 13 2020, 09:40 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(SanTrapGamer @ Aug 13 2020, 04:12 PM) *

prior to these, I'm using <table> with rows of 10 images in each row. When I get to the last few images (coding attached), they don't size down proportionally like the rows previously.

Are those images part of the table, or do they come after it? We'd probably need to see the complete page including any relevant CSS and javascript.

Or you could simply strip away unnecessary code until you get a minimal code example and post it here.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SanTrapGamer
post Aug 13 2020, 09:55 AM
Post #3





Group: Members
Posts: 4
Joined: 13-August 20
Member No.: 27,488



QUOTE(Christian J @ Aug 13 2020, 10:40 AM) *

QUOTE(SanTrapGamer @ Aug 13 2020, 04:12 PM) *

prior to these, I'm using <table> with rows of 10 images in each row. When I get to the last few images (coding attached), they don't size down proportionally like the rows previously.

Are those images part of the table, or do they come after it? We'd probably need to see the complete page including any relevant CSS and javascript.

Or you could simply strip away unnecessary code until you get a minimal code example and post it here.


So, the coding was originally part of a table; however, when I had them within the <table></table> they were spread out way too far. The only way I could get them to stay right next to one another was to take them outside of the table and use the coding like I provided. If you'd like to see the images in action you can check them out at https://www.metagamevgc.com/vgc-2020-ioa.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SanTrapGamer
post Aug 13 2020, 09:56 AM
Post #4





Group: Members
Posts: 4
Joined: 13-August 20
Member No.: 27,488



QUOTE(Christian J @ Aug 13 2020, 10:40 AM) *

QUOTE(SanTrapGamer @ Aug 13 2020, 04:12 PM) *

prior to these, I'm using <table> with rows of 10 images in each row. When I get to the last few images (coding attached), they don't size down proportionally like the rows previously.

Are those images part of the table, or do they come after it? We'd probably need to see the complete page including any relevant CSS and javascript.

Or you could simply strip away unnecessary code until you get a minimal code example and post it here.


Here's the <table></table> that follows just prior to the coding in the OP.
CODE

<table>
     <tbody>
          <tr>
               <td>
                    <a href="https://www.metagamevgc.com/rockruff" target="_blank">
                         <img src="https://files.pokefans.net/sprites/home/small/0744-000.png">
                    </a>
               </td>
               <td>
                    <a href="https://www.metagamevgc.com/lycanroc" target="_blank">
                         <img src="https://files.pokefans.net/sprites/home/small/0745-000.png">
                    </a>
               </td>
               <td>
                    <a href="https://www.metagamevgc.com/lycanroc-midnight" target="_blank">
                         <img src="https://files.pokefans.net/sprites/home/small/0745-001.png">
                    </a>
               </td>
               <td>
                    <a href="https://www.metagamevgc.com/lycanroc-dusk" target="_blank">
                         <img src="https://files.pokefans.net/sprites/home/small/0745-002.png">
                    </a>
               </td>
               <td>
                    <a href="https://www.metagamevgc.com/fomantis" target="_blank">
                         <img src="https://files.pokefans.net/sprites/home/small/0753-000.png">
                    </a>
               </td>
               <td>
                    <a href="https://www.metagamevgc.com/lurantis" target="_blank">
                         <img src="https://files.pokefans.net/sprites/home/small/0754-000.png">
                    </a>
               </td>
               <td>
                    <a href="https://www.metagamevgc.com/comfey" target="_blank">
                         <img src="https://files.pokefans.net/sprites/home/small/0764-000.png">
                    </a>
               </td>
               <td>
                    <a href="https://www.metagamevgc.com/sandygast" target="_blank">
                         <img src="https://files.pokefans.net/sprites/home/small/0769-000.png">
                    </a>
               </td>
               <td>
                    <a href="https://www.metagamevgc.com/palossand" target="_blank">
                         <img src="https://files.pokefans.net/sprites/home/small/0770-000.png">
                    </a>
               </td>
               <td>
                    <a href="https://www.metagamevgc.com/kubfu" target="_blank">
                         <img src="https://projectpokemon.org/images/sprites-models/homeimg/poke_capture_0891_000_mf_n_00000000_f_n.png" width="256">
                    </a>
               </td>
          </tr>
     </tbody>
</table>


This post has been edited by SanTrapGamer: Aug 13 2020, 10:08 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 13 2020, 12:35 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(SanTrapGamer @ Aug 13 2020, 04:55 PM) *

If you'd like to see the images in action you can check them out at https://www.metagamevgc.com/vgc-2020-ioa.

The image downsizing is probably done through the javascripts on the page, maybe it specifically targets that table.

QUOTE
the coding was originally part of a table; however, when I had them within the <table></table> they were spread out way too far. The only way I could get them to stay right next to one another was to take them outside of the table

Maybe you can do something else to make them stay next to each other within the table. Surely there must be some documentation for these scripts?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SanTrapGamer
post Aug 13 2020, 12:41 PM
Post #6





Group: Members
Posts: 4
Joined: 13-August 20
Member No.: 27,488



QUOTE(Christian J @ Aug 13 2020, 01:35 PM) *

QUOTE(SanTrapGamer @ Aug 13 2020, 04:55 PM) *

If you'd like to see the images in action you can check them out at https://www.metagamevgc.com/vgc-2020-ioa.

The image downsizing is probably done through the javascripts on the page, maybe it specifically targets that table.

QUOTE
the coding was originally part of a table; however, when I had them within the <table></table> they were spread out way too far. The only way I could get them to stay right next to one another was to take them outside of the table

Maybe you can do something else to make them stay next to each other within the table. Surely there must be some documentation for these scripts?


Yeah, I've been scouring the web the last couple of days since I started this project. We go through Squarespace as our domain provider. They have very little helpful resources when it comes to the use of HTML, Javascript, CSS, etc from their website. There might be a possibility of using another method to get the images to work how I would like them to.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 13 2020, 01:26 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Why don't you start with finding out how the images that work are scaled down?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:11 AM