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

The right column in a relatively positioned layout descends as an element in the left column is revealed

Currently in the process of constructing a registration form for our website, everything is going smoothly with one minor hiccup. The form consists of two columns where users enter their information. Initially, when designing elements for the first (left) ...

jqueryhtmlcsspositionmultiple-columns

Adding hyperlinks that do not redirect

I have 2 separate divs displayed on a website: <button class="form-control margin btn btn-warning hide_all" id="addLinks">Link Pages</button> <button style="display: none" class="form-control margin btn btn-primary hide_all" id="hideLinks"& ...

javascriptjqueryhtmllaravel-blade

Concealing specific HTML elements with ng-view in AngularJS

I recently started a project in AngularJS and I'm utilizing ng-view with $routeProvider for templating. However, I've encountered a minor issue where I don't want the navbar to display on specific pages like the landing, login, and registrat ...

javascripthtmlcssangularjs

Minifying HTML, CSS, and JS files

Are there any tools or suites that can minify HTML, JavaScript, and CSS all at once? Ideally, these tools should be able to: Identify links from the HTML document and minify the associated JavaScript and CSS. Remove any unused JavaScript functions and CS ...

javascripthtmlcssminify

Enhancing list item appearance by replacing bullets with Font Awesome icons

I need to create a list similar to this example Although I successfully replaced the bullet with a fontawesome icon, the result is not quite right as shown here You may notice a difference in spacing between the two. Here is my CSS code: .custom_list l ...

csshtmlfont-awesome

Implementing a hamburger menu and social media sharing buttons on websites

Currently working on my personal website and delving into the world of Web Development, I have some inquiries for seasoned developers. My first query revolves around incorporating a hamburger menu onto my site for easy navigation to other pages. After att ...

javascripthtmlcsswebhamburger-menu

Learn the process of applying distinct CSS classes to various elements within an AJAX response

The client initiates an AJAX call via jQuery. Upon fetching data from the database, I return the response which includes the application of numerous classes and styles to various HTML tags. Unfortunately, this process results in code that appears unsightly ...

javascriptjqueryhtmlcssajax

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

javascripthtmlcssanimation

Steps to ensure that a particular tab is opened when the button is clicked from a different page

When I have 3 tabs on the register.html page, and try to click a button from index.html, I want the respective tab to be displayed. Register.html <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist"> <l ...

javascripthtmljquerycssbootstrap-4

Using HTML and CSS to capture user input data and store it in an array

I've created a form that allows users to add and remove multiple fields, ranging from one to three. My goal is to retrieve the form data and store it in an array. index.html <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmlcss

Guide for manually initiating the mouseleave event on a smartphone or tablet

Is there a way to change the color of a link to orange when it's hovered over? On mobile devices, the link should turn orange when touched and stay that way until the user clicks away. I'd like to manually trigger the mouseout event to remove th ...

javascriptjquerycsstouchscreenmouseleave

What causes the difference in output between passing p=3+3 using GET, which results in 3 3, and using POST, which results in

It's really quite puzzling - I've noticed that sending the same parameter through various methods yields different results. ...

phphtmlformspostget

Enable the set body to have certain sections that are scrollable by setting overflow=hidden

I am currently working on a website that features the following structure: <body> <section></section> <section></section> ... </body> To prevent scroll bars on the body, I have set the CSS property body{overflow:hidden ...

cssscrolloverflow

Issues arise when implementing a sticky position using CSS with incomplete functionality

I want to create a website with a menu bar that stays at the top even on long pages. However, when I use position: sticky in CSS, the menu disappears after scrolling a certain distance. Does anyone know how to fix this issue? HTML: <nav> <ul cla ...

csssticky

IE compatibility mode causing ckeditor dropdown to be hidden

When using the CKEditor editor bar inside a green div with another div below it, I noticed that when clicking on "font" or any other option that opens a dropdown menu, it gets hidden behind the bottom div. This issue seems to occur in browsers like Chrome ...

javascriptjqueryhtmlcssckeditor

What sets srcset apart from media queries?

Can you explain the contrast between srcset and media query? In your opinion, which is more optimal and what scenarios are ideal for each? Appreciate it! ...

javascripthtmlcssmedia-queriessrcset

Adding a translucent overlay on top of a background image within a div, while keeping the text on top

Here is the current code that I am working with: <div class="square"> <div id="wrapper"> <h2>Text</h2> <h3>Text</h3> </div> </div> .square { padding: 10px; width: 150px; height ...

htmlcssimagebackgroundhover

Having trouble centering an icon in a cell within AG Grid?

I am struggling with aligning my checkmarks within the cells of my AG Grid. Currently, they are all left aligned but I need them to be centered. Adjusting the alignment for text is not an issue, but I can't seem to center the material icons. It appear ...

cssangularag-grid

How to align items at the center in material-ui styling

I have a row of cards inside a container that I want to align in the center with equal spacing around them. I am using the material-ui UI library for the layout. Despite adding the justifyContent: center property, the cards are not evenly spaced. This is ...

cssreactjsmaterial-ui

BeautifulSoup: Retrieve text from HTML lists that are designated exclusively with bullet points

Seeking assistance on how to extract the text specifically within a bulleted list from a Wikipedia article using BeautifulSoup. I am aware that list items are enclosed in <li> tags in HTML, regardless of the type of marker used before each item in t ...

pythonhtmlbeautifulsoup