Struggles with designing for multiple screen sizes

I need assistance with making my table fit inside its parent element on the locations page when the screen size is below 480px. I have a media query in my CSS that targets sizes between 250px and 780px, but for some reason, the table starts to overflow and go beyond its parent element at widths below 480px. Any help would be much appreciated.

Site:

Here's the HTML code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>OKATOD</title>
        <meta charset="utf-8" />

        <!-- Insert stylesheet link here -->

        <link rel="stylesheet" href="CSS2/locationsTheme.css" type="text/css" />
        
        <meta name="viewport" content="width=device-width; maximum-scale=1; minimum-scale=1;" />

    </head>

    <!-- Body content goes here -->

Here's the CSS code:

/* CSS code goes here */
htmlcssresponsive-design

Answer №1

Dealing with "table data" and responsive design can be quite challenging. When words cannot break into multiple lines, it can lead to table overflow issues. One solution, though not the most aesthetically pleasing, is to adjust properties using media queries like the following:

@media only screen and (min-width: 150px) and (max-width: 480px)
{
    .locationsTable tr td {
        word-break: break-all;
        line-height: 20px;
        font-size: 70%;
    }
}

You can attempt implementing this solution by visiting http://jsfiddle.net/C2wP6/.

Included in the provided solution are:

  • You have the option to decrease the font size.
  • Reducing the line height can also help create more space.
  • Using word-break allows words to break at any point, albeit not being the most elegant solution.

Answer №2

When working with a <table>, it's important to note that it has a set minimum width. This means that certain words, such as Administration, Northeast, and Bartlesville, will take up a specific amount of space in the table and cannot be reduced beyond that point. The overall min-width of your <table> is greater than 480px.

If you find that the table is too wide for screens less than 480px, there is a solution. You can assign a specific width to each column so that the total width fits below 480px. In some cases, this may require breaking longer words, like turning "Administrator" into:

Admin-
istrator

This action helps decrease the total width of the <table> and ensures it displays correctly on smaller screens.

Answer №3

If you're working with tables and aiming for a responsive design, it could be beneficial to think about reorganizing your data.

Check out this demonstration:

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

"Controlling Selected Options in Bootstrap Dual Listbox: A Guide to Limiting Choices

I am utilizing the Bootstrap Dual Listbox plugin to assist users in selecting specific options. I have successfully integrated this plugin into my project. However, I encountered an issue when attempting to impose a limit on the number of options a user ...

jquerycsstwitter-bootstraplistbox

Change from one value to another using a decaying sinusoidal wave

Can someone help me come up with a formula that will smoothly transition from a starting value to an end value over a specified time using a Sin or Cos wave? I'm attempting to replicate a bouncing effect like the one shown in my sample using CSS and ...

javascriptcssmath

CSS3 Feature: Chevron-shaped banner with jagged edges

I'm currently working on building a unique chevron-style banner using CSS3, but I've run into some aliasing problems specifically in Chrome. Despite trying to utilize the -webkit-backface-visibility: hidden attribute, I still can't seem to r ...

htmlcss

Blockage preventing text entry in a textarea

To enhance the basic formatting capabilities of a textarea, I implemented a solution where a div overlay with the same monospace font and position is used. This approach allows for displaying the text in the div with different colors and boldness. However ...

javascripthtmlcsstextarearichtextbox

How can I retrieve the text from two DIV elements simultaneously using JS/jQuery?

Is there a way to loop through all <TD> elements in order to store the Title and Link from each element into separate variables using JavaScript / jQuery? Sample HTML: <td> <div class="class_Title row border-bottom" name="name_Title" i ...

javascriptjqueryhtml

How to Use Django to Load a Text File into an HTML File with the Help of

I came across an interesting code example on a website called w3schools.com that I would like to incorporate into my Django project. The code utilizes the jquery load() function to load a text file into an HTML file. Here is a snippet of the code: <!DOC ...

javascripthtmljquerydjango

Creating a dynamic button with Angular that appears when focused

I want to have a button appear when the user focuses on an input with the ng-model=query. I know there is an ng-focus directive, but how can I implement it? <input type="search" ng-model="query"> <!--this is the button I need to show once th ...

javascriptangularjscss

JavaScript encountered an issue as it attempted to reference the variable "button" which was

I am currently working on developing a new API, but I have encountered some issues with JavaScript: Below is my JS/HTML code snippet: const express = require('express'); const app = express(); const PORT = 3000; submit.onclick = function() ...

javascripthtmlnode.jsexpressbutton

The button's background color will vanish if you click anywhere outside the button or on the body of

Struggling with a tabpane created using HTML, CSS, and JavaScript. The problem arises when the background color of the active tab's button disappears upon clicking outside the button or on the body. While switching between tabs, I can change the color ...

javascripthtmlcss

The issue of Firefox background image flickering is persistent when multiple instances are open and the background-size

I am facing an issue with background images on my webpage. I have two elements that share a background image and are contained within 3 column width containers using Bootstrap. In the second element, I have set the background to be 90% in width, making it ...

htmlcssfirefoxtwitter-bootstrap

Should you prioritize internationalizing your image alt attributes?

Do you localize your alt attribute in img tags for internationalization? Is it beneficial in the long run? ...

htmlinternationalization

As the height is expanded, the background color gradually infiltrates the body of the page

I am currently working on an angular application that utilizes angular-pdf. The controller and view function perfectly, and the PDF is displayed correctly, except for one issue. The height of the PDF exceeds the min-height of the module, causing it to expa ...

javascripthtmlcssangularjs

Achieve consistent heights for divs within table cells without the use of JavaScript

Is it possible to make two divs contained in table cells in a shared row both have the height of the taller div without using JavaScript? Take a look at this simplified example here: http://jsfiddle.net/Lem53dn7/1/ Check out the code snippet from the fidd ...

htmlcssdynamichtml-table

Struggling to Position Advertisement in CSS

I've been struggling to properly center a div using CSS. Adding text-align: center; doesn't seem to do the trick. The issue can be found in the top advert on this website: . Do you have any suggestions? Here's some sample code: HTML: &l ...

htmlcssalignment

Taking data input from three textboxes and storing them in a PHP array

In my HTML form, I have 3 text input fields and one submit button. Each text field is intended for entering the name of an animal, which should then be saved into a PHP array. Here is the structure of my HTML form: <form action="Test.php" method="post ...

phparrayshtmlforms

Learning to retrieve specific properties from an event target in JavaScript

Here is the code snippet I am working with: <h1 msgId = "someId"> Some text </h1> And in my code.js file, I have the following function: document.addEventListener('click', function(e) { target = e.target; }, false); I am tryin ...

javascripthtml

Unable to submit form using the submit button

Can anyone explain why the form won't submit in this scenario? I prefer not to use input type='Submit', but the function call seems to be working. <button onclick='submitForm()'>Save</button> function submitForm() { ...

jqueryhtml

posting data and redirecting fails when using an ajax button

I am encountering an issue where I click a button on a page to navigate to another page with posted data, but it is redirecting without posting anything. Both $_POST and $_SESSION variables are empty. Below is my ajax function: function ajax4(Div_Submit, ...

phphtmlajaxredirectpost

Using d3 to create an SVG with a Bootstrap dropdown feature

I am seeking to create a graph that is not a tree, as some nodes may have multiple parents. When a node on the graph is clicked, a dropdown menu should be displayed with a list of text options. Though I am new to d3.js, I have observed examples of bootstra ...

javascripthtmld3.jssvgbootstrap-4

Determine if the user's request to my website is made through a URL visit or a script src/link href request

Presently, I am working on developing a custom tool similar to Rawgit, as a backup in case Rawgit goes down. Below is the PHP code I have created: <?php $urlquery = $_SERVER['QUERY_STRING']; $fullurl = 'http://' . $_SERVER['SE ...

javascriptphpjqueryhtml