What steps can I take to avoid horizontal scrolling on mobile due to a table overflowing?

My website displays a table within a bootstrap container, row, and column. While everything looks good on larger screens, the content within the table is causing a horizontal scroll on smaller screens, making the footer look distorted. This results in a messy appearance of the site. Is there a solution to this issue? Below is an example of the code I am using:

<div class="container">
 <div class="row">
  <div class="col-12">
   <table class="table">
    <tr>
     <td>
      <!-- code goes here -->
     </td>
     <td>
      <!-- overflowing code goes here -->
     </td>
    </tr>
   </table>
  </div>
 </div>
</div>

To see this issue in action, you can visit the following link on my website: StudyAfrica - University

I have conducted several searches in an attempt to resolve this problem but have not found a suitable solution. Your help would be greatly appreciated.

Answer №1

The issue arises because a certain link does not adhere to the break-word rule. Typically, WordPress handles this automatically, but it excludes links to prevent a messy appearance. To resolve this, assign a class to the link and adjust the font size to 12px or smaller until it fits within the table.

Applying the word-break: break-all; rule disrupts the table layout:

https://i.sstatic.net/D

On the other hand, using a specific class to resize the font for the link may not be user-friendly:

https://i.sstatic.net/k

Alternatively, consider using text linked to the website, which appears cleaner with a smaller or larger font size:

https://i.sstatic.net/54P5M.png

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

Unable to invoke requestPointerLock() function within Vue.js component

Incorporating the requestPointerLock() method within a Vue.js component has posed some challenges for me. In the scenario where the pointerShouldLock data property of my component is set to true, I intend for the pointer to be locked during the beforeUpdat ...

I am sending an AJAX request to a remote server in order to retrieve access records

Currently, I am attempting to retrieve data by sending an ajax request to a remote server controller from my current remote page. Below is the code for my first remote view page: <?php include 'header.php'; ?> <script src="/assets/js/ ...

Why is my Typescript event preventDefault function ineffective?

Despite all my efforts, I am still unable to prevent the following a tag from refreshing the page every time it's clicked. <p> <a onClick={(e) => handleClick} href="&qu ...

Implementing asynchronous loading of an image onto a webpage using JavaScript

Is it possible to asynchronously load an image specified in the src attribute of an HTML image tag? I am trying to invoke a Java class using an image src tag, but I want this to happen asynchronously without affecting the current functionality of the web ...

Comparing Angular extend to $provide.decorator: A breakdown

I find myself in a state of confusion. Can you please provide some clarity on the distinction between angular.extend() and $provide.decorator? When and why would one use the latter option? Does decorator serve a different purpose compared to extend? Desp ...

Angular styling for input elements that are in the pristine state

Hey there, I'm working with a CSS class that applies a red border to an input field when it is required and invalid, and changes to green when it becomes valid. CSS .ng-valid[required], .ng-valid.required { border-left: 5px solid #42A948; /* green ...

Changing the main domain of links with a specific class attribute during an onmousedown event - is it possible?

We are facing a situation where we have numerous webpages on our blog that contain links from one domain (domain1.com) to another domain (domain2.com). In order to avoid manual changes, we are attempting to achieve this without altering the link (href). Th ...

Styled Components do not have the ability to define :hover states

export const WatchVideoButtonWrapper = styled.div` position: absolute; bottom: 80px; right: 33px; background-color: ${(props) => props.bgColor}; color: ${(props) => props.color}; border-radius: 100px; transition: all 0.1s; ...

JQuery button.click() handler executes without a user click

Currently, I am in the process of tidying up the code for my auction game. However, I have encountered an issue where my function is triggered immediately after endAuction() is called rather than waiting for the button click event. Unfortunately, I am no ...

Nuxt.js Development Script Fumbles

Recently, I've been working on a website using Nuxt.js and have been really enjoying the process. However, I'm encountering an error that's puzzling me whenever I attempt to run $npm run dev: 0 info it worked if it ends with ok 1 verbose cl ...

Why isn't a password appearing in the "generated-password" div from the password generator?

The function toIncludeCharacters() appears to be functioning correctly as it returns lowercase letters upon upload, but generatePassword() is currently producing a blank output. After clicking the "Generate Password" button, three blank outputs are return ...

What is the best way to retain AJAX data even when navigating back without losing it?

After receiving an Ajax response, I display a set of data on my home page. When I click on any of the data, it takes me to another page. However, when I click the back button on the browser, it just navigates me back to the homepage without showing the A ...

A guide to eliminating missing tags from HTML code using Asp.net

There have been instances where the HTML code we receive from certain websites does not have proper tag endings, causing issues with our UI. For example: <br /><p>hello the para start here </p> <p>some text and no ending tag As yo ...

Steps for including a subdocument within a mongoose schema

I am currently working on setting up a subdocument within a mongoose schema using node.js/Express. There are two schemas in play: Member and Address Member.js // app/models/member.js // Loading mongoose to define the model var mongoose = require(' ...

"Enhancing Webpages with AngularJS: The Power of Binding and Re

Using AngularJS to load AJAX content and ng-repeat to generate a list of items. I have a placeholder {{noun}} in the content, expecting it to be replaced with data from $scope.noun when the AJAX content is loaded. However, this does not happen automaticall ...

What is the best way to display nested JSON in JSX within a React Native application?

I need help with rendering nested JSON inside my JSX. Below is the JSON response: [{ "data": { "total_students": 13, "seats": "", "categories": [{ "id": 28, "name": "Economy", "slug": "econom ...

Duplicate a form based on the selected option

My goal is to duplicate a form based on the numerical value selected from the drop-down menu. You can find the corresponding code in this JSFiddle. Here is the HTML code: <div class="travel_tour-info"> <h3>How many people are you booking for? ...

I am unable to eliminate the parentheses from the URL

I am in need of creating a function that can extract the content inside "()"" from a URL: Despite my efforts, the function I attempted to use did not provide the desired result. Instead of removing the "()" as intended, it encoded the URL into this format ...

Designing a dynamic button that expands on hover to catch the eye

My instructor has provided us with this code snippet: <a class="btn btn-tertiary" href="#"> <span class="circle"> <i class="arrow-right"> </i> </span>Create profile </a> .btn.bt ...

unexpected issue when trying to append a child element after creating its innerHTML

Upon executing this script, I expect to see the initially empty div with id="checkboxes" transformed into: <div id="checkboxes"> <label><input type="checkbox">option1</label> <label><input type="checkbox">opt ...