Making tables mobile device friendly

Explorer ,
Sep 10, 2021 Sep 10, 2021

Copy link to clipboard

Copied

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>

TOPICS
Bootstrap , Browser , Code , How to , Interface , Publish

Views

94

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 10, 2021 Sep 10, 2021

Copy link to clipboard

Copied

Have you looked at the Bootstrap docs for responsive tables?

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


Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 10, 2021 Sep 10, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 10, 2021 Sep 10, 2021

Copy link to clipboard

Copied

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/

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 10, 2021 Sep 10, 2021

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 10, 2021 Sep 10, 2021

Copy link to clipboard

Copied

LATEST
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, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines