Skip to main content
G
gunzelguy
Inspiring
September 10, 2021
Question

Making tables mobile device friendly

  • September 10, 2021
  • 3 replies
  • 472 views

I want to make a page on my website mobile device friendly. This page has a table with links to other pages. I can't really present the links any other way. Here is the old, existing page:

 

https://www.victorianrailways.net/motive%20power/lochome.html

 

I am trying to make a new page from a bootstrap template. To make the new table I select Bootstrap Components>Grid Row with columns. I get what looks like a table and it looks great in a desktop browser until I preview it as a mobile device would see it and the the headings stack on top of each other and the page is a mess. 

 

How do I present this page/info so it looks good on a mobile device?

 

Here is the code Dreamwever is creating for this table.

 

<div class="row">
<div class="col-md-3"><strong><img src="headings/elec.gif" alt=""/>&nbsp;</strong></div>
<div class="col-md-3"><strong><img src="headings/diesel.gif" alt=""/>&nbsp;</strong></div>
<div class="col-md-3"><strong><img src="headings/steam.gif" alt=""/>&nbsp;</strong></div>
<div class="col-md-3"><strong><img src="headings/railm.gif" alt=""/>&nbsp;</strong></div>

This topic has been closed for replies.

3 replies

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
September 10, 2021
quote

<div class="row">
<div class="col-md-3"><strong><img src="headings/elec.gif" alt=""/>&nbsp;</strong></div>
<div class="col-md-3"><strong><img src="headings/diesel.gif" alt=""/>&nbsp;</strong></div>
<div class="col-md-3"><strong><img src="headings/steam.gif" alt=""/>&nbsp;</strong></div>
<div class="col-md-3"><strong><img src="headings/railm.gif" alt=""/>&nbsp;</strong></div>


By @gunzelguy

 

This is a better way to move forward than using tables as suggested by @Joseph Labrecque . The reason that I say this is because the above code starts with a single column for mobile views and 4 columns for larger devices. With a table structure you are stuck with 4 columns in all views despite the restricted real estate in mobiles.

 

Because I am a programmer, I would have coded the above example slightly differently. My code would have been

<div class="row row-cols-sm-2 row-cols-md-4">
<div class="col"><strong><img src="headings/elec.gif" alt=""/>&nbsp;</strong></div>
<div class="col"><strong><img src="headings/diesel.gif" alt=""/>&nbsp;</strong></div>
<div class="col"><strong><img src="headings/steam.gif" alt=""/>&nbsp;</strong></div>
<div class="col"><strong><img src="headings/railm.gif" alt=""/>&nbsp;</strong></div>

</div>

Where the number of columns per row are set within the row element. Here I have added 2 columns for mobile landscape view.

 

For more, see https://getbootstrap.com/docs/5.1/layout/grid/#row-columns

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    September 10, 2021

    Images of text cannot be "seen" by screen readers, language translators or search engines.  Real text headings styled with CSS are preferred for web accessibility.

     

    Nancy O'Shea— Product User & Community Expert
    Joseph Labrecque
    Community Expert
    Joseph LabrecqueCommunity Expert
    Community Expert
    September 10, 2021

    Have you looked at the Bootstrap docs for responsive tables?

     https://getbootstrap.com/docs/5.1/content/tables/#responsive-tables 


    G
    gunzelguyAuthor
    Inspiring
    September 10, 2021

    No, I haven't read that, thanks for the link. Does this have to be hand coded or can Dreamweaver do it without hand coding?

    B
    Community Expert
    Ben MCommunity Expert
    Community Expert
    September 10, 2021

    While DW has some UI components to help with setting up Bootstrap sites, this particular component does not appear to be in the UI.  So at the most you would just have to add the class to your table depending on how you want it to look and scope to the table headers where needed.  Also if you are using DW, you should be using the Bootstrap 4.x docs and not 5.x as DW has not yet updated to that version.

     

    https://getbootstrap.com/docs/4.6/content/tables/

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices