Creating a responsive table layout with CSS

I currently have the following code:

.fiftyFiftySection {
  background-color: #000;
}

.odometer {
  font-size: 3em;
  text-align: center;
}

table td {
  column-width: 1000px;
  text-align: center;
}

@media (max-width: 500px) {
  table td {
    column-width: 100px;
  }
}
<section class="fiftyFiftySection" id="fiftyFiftySection">
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>
        <img src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png" 
style="width:400px; height:300px;">
      </td>
      <td>
        <h4 style="color: #ffffff;">Current Estimated Payout</h4>
        <!-- <br> -->
        <img src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt="" 
style="height: 50px; width: 30px;">
        <div id="odometer" class="odometer">000000</div>
      </td>
    </tr>
  </table>
</section>

However, there is an issue in the mobile version where the columns do not align properly. I want the image to be on the left and the counter on the right when viewed on a mobile device, but they are not spaced correctly. How can I adjust this for mobile?

htmlcss

Answer №1

Your image currently has a fixed width of 50-50, which needs to be changed to a relative length. Also, add object-fit:contain to the image so it doesn't distort:

.fiftyFiftySection {
  background-color: #000;
}

.odometer {
  font-size: 3rem;
  text-align: center;
  color: chartreuse
}

table {
  width: 95vw;
}

img {
  width: 100%;
  object-fit: contain;
}

table td {
  text-align: center;
  background-color: rgb(110, 70, 55);
}

@media (max-width: 500px) {
  table td {
    background-color: #424c5f;
    min-width: 100px;
  }
}
<section class="fiftyFiftySection" id="fiftyFiftySection">
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>
        <img src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png">
      </td>
      <td>
        <h4 style="color: #ffffff;">Current Estimated Payout</h4>
        <!-- <br> -->
        <img src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt="" style="height: 3rem; width: 3rem;">
        <div id="odometer" class="odometer">000000</div>
      </td>
    </tr>
  </table>
</section>

Upgrade: Instead of using tables for layout, consider using modern flex and grid layouts. Here is an example utilizing Flexbox: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
For instance,

.fiftyFiftySection {
  height: 300px;
  background-color: #000;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.left-side {
  width: 70%;
}

.right-side {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 100px;
  height: 100%;
  text-align: center;
  background-color: rgb(88, 87, 87);
}

.odometer {
  font-size: 3rem;
  text-align: center;
  color: chartreuse;
  overflow-wrap: break-word;
}

img {
  width: 100%;
  margin: 0 auto;
  object-fit: contain;
}

@media (max-width: 500px) {
  .right-side {
    background-color: #424c5f;
    min-width: 100px;
  }
}
<section class="fiftyFiftySection" id="fiftyFiftySection">
  <img class="left-side" src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png">
  <div class="right-side">
    <h4 style="color: #ffffff;">Current Estimated Payout</h4>
    <!-- <br> -->
    <img src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt="" style="height: 3rem; width: 3rem;">
    <div id="odometer" class="odometer">000000</div>
  </div>
</section>

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

``When you click, the image vanishes into thin

Could you please explain why the image disappears once I close the lightbox? Access with password: chough ...

javascriptjqueryhtmlcss

Bootstrap grid columns cannot properly handle overflowing content

Utilizing bootstrap version 5.2.3 I'm facing a challenge not with bootstrap itself, but rather my limited comprehension of the flex system and overflow. Displayed below is a scenario where the first div has a fixed height of 100vh. My goal is to kee ...

htmlcssflexboxoverflowbootstrap-5

Trouble displaying certain HTML code and its output on the browser?

I am in the process of developing a user profile page. I have designed a form with various fields, but the code within the section is not displaying correctly in the browser. I attempted to inspect the elements, but the code within that section remains inv ...

htmlcss

Open the navigation menu by clicking on either the navigation links or anywhere outside of it

Seeking a solution for my mobile navigation menu that closes when clicking outside the links or on one of them, without using jQuery. How can I achieve this with JavaScript ES6? Current code snippet: const navSlide = () => { const burger = docum ...

javascriptcssmenutogglenavbar

Menu only appears with a double click on the label button

Currently, I'm facing an issue where I have to click the label "button" (hamburger menu) twice in order to show the menu for the second time. My belief is that there might be a conflict between CSS and jQuery causing this behavior. The desired funct ...

javascripthtmljquerycss

What are the differences in using ng-controller versus data-ng-controller?

When working with Angularjs, how do I determine whether to use data-ng-controller or ng-controller? In terms of current best practices for good software design, when is it appropriate to use each one? The information cited suggests that data-ng-controlle ...

javascripthtmlangularjsng-controller

Is there a way to dynamically update text using javascript on a daily basis?

I am currently developing a script to showcase different content and images every day. While I have successfully implemented the image loop to display a new picture daily, I need assistance in achieving the same functionality for the title. My aim is to c ...

javascriptjqueryhtmldynamic

Arranging the navigation bar at the top of my chatbot in HTML

Is there a way to position the navigation bar above the chatbot on my website? The following CSS code excerpt is from the "navigation bar css" file: *{ padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border ...

htmlcss

Position the image between two div containers in the center of the screen, ensuring it is responsive and does not overlap with any text

I've been working on trying to position an image between two divs on my webpage. So far, I've managed to place the image there but it's not responsive (only displays correctly at a width of 1920) and ends up overlapping the text in both divs ...

htmlcssresponsive-design

Every time I use formsubmit.co on my Github pages, I encounter a 404 error

Currently, I'm in the process of constructing a website with Bootstrap 5 and have integrated a form that is intended to be completed and forwarded to my email address. I've chosen to utilize formsubmit.co for this purpose. However, when I attempt ...

htmlcssfrontendbootstrap-5github-pages

What are some tips for keeping design proportions consistent on mobile apps?

Hey there, I have a question that may seem basic to some, but as a newbie in coding, I appreciate your patience. I've been working on an Ionic app and I'm struggling with maintaining CSS proportions of HTML elements. For instance, here's th ...

htmlcssionic-frameworkmobileresponsive-design

In Safari, the CSS filter value may not be applied immediately, whereas in Chrome it is

While dragging the input range, the brightness value (also a CSS property) updates but the image is not instantly affected in Safari. (It works well in Chrome) How can the changes be applied to the image while dragging? var app = Vue.createApp({ data() ...

cssvue.jsinputfilterrange

Adaptable Website Design (Without Header)

Check out my current website layout on codepen. I'm looking for a more responsive way to code this with CSS, so that the text doesn't get pushed over when the window is resized. Also, I want to improve the efficiency of coding the CSS for this l ...

htmlcsslayoutpositionresponsive

Having trouble setting a background image for a specific DIV element in HTML

I am in the process of updating my webpage, and need some assistance implementing a small background image. Here is what I have done so far: https://i.sstatic.net/nTxtD.png Below is the marked section where I am trying to add the background image: https ...

javascripthtmlcss

I am developing a quiz application using JavaScript, and I am wondering how I can smoothly transition from one question to the

I'm working on developing a quiz application and I'm facing an issue where my quiz is skipping question 2 when moving from one question to the next using the "next" button. I have a total of 3 questions in my quiz and for some reason, it jumps fr ...

javascripthtmlcssfunction

Retrieving HTML table data using PHP

In the scenario where I have an HTML form with a table like the one below: <form method="POST" action="a.php"> <table name="dataTable"> <tr> <td>row one col one</td> <td>row one col two</td> <td>row o ...

phphtml

Showing text beside an image within a division

In my div, I have an image along with a paragraph and h6 text. My goal is to position the text on the right side of the image without it wrapping underneath. I've experimented with floating both left and right, clearing, setting display to inline-blo ...

htmlcss

A PHP drop-down menu maintains a fixed position

I have set up a database called pogoda with a city table containing columns for city and cityid. Using PHP, I am creating a dynamic list and submitting the chosen value into subsequent code. To ensure that the drop-down list has a default starting positio ...

phphtmlmysql

Tips for resizing a chartjs within bootstrap columns to accommodate various web browsers

I am using chartjs charts within bootstrap rows and columns. The number of columns per row can be dynamically changed. For example, I could rebuild my rows with the following markup: const twoColumn = spacerColumn + "<div class=&ap ...

cssbrowserchart.jsresize

What is the best way to create a miniaturized image of a webpage for sharing on Facebook?

I'm looking for a way to post a link to users' Facebook walls with a thumbnail image of their created page. The page is in HTML format and stored as a series of 'elements' in the database, each with its size, position, and content. Is i ...

phphtmlfacebookthumbnails