Adaptable tables for mobile and desktop devices

I'm currently in the process of creating a dynamic table with three different elements that are displayed in a particular arrangement:

[![Here is what it looks like on a desktop device][1]][1]

However, I am looking to modify this layout to appear differently on mobile devices:

[![Here is the desired appearance on a mobile device][2]][2]

Below is the code I have developed thus far:

<tr>
            <td>
    <table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper"><tr><td class="stylingblock-content-wrapper camarker-inner"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
 
  <tr>
   <td style="background: #ffffff; padding: 0px 50px 20px 50px;">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
     <!-- LIST ITEM -->
      <tr>
       <td style="width: 60px; height: auto; padding: 0px 0px 0px 0px; " valign="middle" width="121">
        <img alt="" border="0" class="verticalAlignTop" height="121" src="https://i0.wp.com/www.un.org/pga/73/wp-content/uploads/sites/53/2018/09/Dummy-image-1.jpg?ssl=1" style="width: 121px; height: 121px;" valign="middle" width="121"></td><td style="vertical-align: top; padding: 0px 0px 0px 20px; text-align: left; font-family: Arial, Helvetica, sans-serif; color: #333333; font-weight: 400; display: block" valign="top">
        <h3 style="font-size: 18px; line-height: 25px; margin: 0px 0px 0px 0px; mso-line-height-rule: exactly; font-weight: 700; color: #333333;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</h3></td> <td style="vertical-align: bottom; padding: 20px 0px 0px 20px; text-align: left; font-family: Arial, Helvetica, sans-serif; color: #333333; font-weight: 400; display: inline-block" valign="bottom">
          <p style="font-size: 15px; line-height: 22px; margin: 0px 0px 0px 0px; mso-line-height-rule: exactly;">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum </p></td> </tr>
       </table></td></tr></table></td></tr></table>

If you have any suggestions or solutions, they would be greatly appreciated!

Thank you for your assistance! [1]: https://i.sstatic.net/QC3Q7.png [2]: https://i.sstatic.net/yGqV9.png

htmlcssresponsive-design

Answer №2

Tables aren't designed for that function. Maybe experimenting with grid layouts could be helpful

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the CSS selector for a dropdown menu element upon selection

I have customized a select box using CSS, but I am facing an issue where the custom arrow remains upward even after selecting an option. I want the arrow to point downwards once an option is chosen and revert to the default position when clicked outside. ...

htmlcss

Tips on how to slideDown/Up only when a particular element does not contain the error class

In the code snippet below, I am able to slide the sibling div up and down. However, I now want to restrict this behavior when the element within it is assigned an error class. Javascript $('input').on('focus blur', function(e){ ...

javascriptjqueryhtmlcss

Conceal and reveal text using JavaScript

I am attempting to create a function where text appears and disappears when clicking on the '+' sign, but I am facing difficulties in getting it to work. Additionally, when I apply this function to other sections, the original one stops working a ...

javascripthtmlcss

A versatile jQuery function for extracting values from a :input selector

Is there a universal method in jQuery to retrieve the value of any :input element? I pose this question because I have a webpage containing select and checkbox inputs, as seen in the code below: for (var i = 0; i < arguments.length; i++) { ...

javascriptjqueryhtmlselector

a video player with interactive multi-angle viewing capabilities including zoom and pan features

Looking for a versatile video player to analyze videos for my teenage swimming team. I want something that can play videos with multiple angles, similar to this one: An HTML5 video player like this would be perfect: The video player should be able to be ...

htmlflashvideo

Is there a way in PHP to retrieve database values and display them in HTML text boxes when a button is clicked, all without

Is there a way to dynamically fetch values from a database and display them in text boxes without the need to refresh the page? Here is the PHP code snippet I have been working on: <?php include 'Connection.php'; $sql = mysqli_query($conn ...

javascriptphpjqueryhtmlajax

How do you feel about sharing HTML files online?

I have a project in .NET 2.0 where I am creating a control that allows users to input HTML into a textarea and then upload it. The issue is that .NET requires me to set ValidateRequest=false on the page for the upload to work, which can potentially creat ...

.nethtmlsecurity

Hover-over functionality not functioning properly on select images

My website, located at , is fully functional. When you visit the homepage, you will see some words that turn black when you hover over them. I recently switched this site, which was originally created in Dreamweaver, to Umbraco, a .net based CMS. My site ...

javascriptjqueryhtmlcss

What is preventing me from modifying the input file name in PHP?

After executing the code below, an error message pops up: "Notice: Undefined index: uploadFile in C:\xampp\htdocs\ImageTest\processImage.php on line 17" However, when I switch every occurrence of 'uploadFile' with 'fi ...

phphtmlglobal-variables

I can't get any sound to play on my JavaScript program

I've been experiencing an issue with playing audio. I've set up a function to play a random sound when clicking on an image, but nothing is happening. Here is the code I am using. var sound1 = new Audio("InDeed.wav"); var sound2 = new Audio("I ...

javascripthtmlaudio

What steps can I take to ensure that my website is properly displayed and that my navbar appears beneath the logo on smaller screens? It is currently functioning well on desktops

Currently exploring web development for a new restaurant site, I've encountered an issue with the display on smaller screens. The page doesn't show full width and the navbar disappears entirely. How can I adjust the layout to ensure it looks good ...

htmlcssoptimizationnavbarresponsive

Exploring the benefits of using Div and semantic elements in web

After spending more than two months learning HTML, I still find myself uncertain about the most practical coding approach. Despite knowing that it's important not to overthink it, I often wonder if I should stick with simplicity or add extra elements ...

htmlcss

The checkbox display and hide functionality is mistakenly inverted

I have a form set up with an input field that should show or hide depending on whether a checkbox is clicked. Currently, the field is showing and hides when the checkbox is clicked. How can I reverse this behavior so that it works the other way around? ...

htmljquerycssbootstrap-4

Error Loading Message Appears with jQuery Mobile 1.3.1 and Flot Integration

I am trying to implement a flot interactive example with jQuery Mobile 1.3.1 in my project. However, I am encountering an issue with the latest version of jQuery Mobile where there is a strange frame around the chart and a "loading" text at the bottom of t ...

jqueryhtmljquery-mobilejquery-pluginsflot

Responsive screen sizing in Vue.js

https://i.stack.imgur.com/8qwpn.png I added a margin-left to my component due to it being blocked by the side-bar and the "Roles" table. Is there a way to shift my table to the right when the screen width is less than 992? I need it to be responsive acro ...

javascriptvue.jsresponsive-design

How to locate every JavaScript event connected with an HTML element by utilizing Google Chrome

Looking for an easy method to identify all JavaScript events linked to a specific HTML element in Chrome? For example: HTML element <a href="#" class="cancel_link refresh_page">Cancel</a> Script: <script type="text/javascript"> $ ...

javascriptjqueryhtmlgoogle-chrome

Filtering elements upon loading

I have successfully implemented data filtering on my website using data-filter. While everything is working great, I am interested in displaying items with specific attributes upon loading. For instance, I want to load only green objects by default inste ...

jqueryhtmlcss

Attempting to locate the following div element using a particular class name, however, I consistently retrieve the final one

I have a magician and I'm attempting to design a progress bar. The current step that the user is on should be purple and should advance as the user moves through the form. However, when trying to proceed to the next step, the progress bar incorrectly ...

javascripthtmljquerywizard

Positioning MDL cards in HTML documents

Seeking guidance on positioning MDL cards alongside existing text. I've attempted various methods without success so far, and the desired outcome has not been achieved. The goal is to have text aligned to the left (which is currently satisfactory) wi ...

htmlcssmaterial-designcss-positionmaterial-design-lite

Basic selection menu layout

I have put together a basic menu for my WordPress site without relying on classes or IDs: <div class="main-menu"> <nav> <ul> <li> <a href="#" class="menu-link">home</a> ...

javascriptjquerycss