What could be causing my Divs to not adjust their location automatically?

When using JQuery, I have a group of four tabs that initially appear as shown below:

<ul class="tabs">
    <li>
        <input type="radio" name="tabs" id="tab1" checked />
        <label for="tab1">Item One</label>
        <div id="tab-content1" class="tab-content">
            <p>Text Here </p>
        </div>
    </li>
</ul>

On a computer screen, the tabs display correctly. However, on mobile devices, when the screen is reduced in size, the other tabs collapse beneath (as intended). Yet the text within the div does not adjust automatically downwards. This results in the other tabs being positioned behind the visible text.

Is there a way to resolve this issue?

Thank you,

To view the complete code, please visit this JSFiddle page: https://jsfiddle.net/hesbwgsm/2/

Answer №1

Due to the presence of .tabs li in your CSS, .tabs has a width of 75%, but you have not assigned any width to the li elements inside the ul.

Please update this with your code.

.tabs li {
  float: left;
  display: block;
  width: 25%;
}

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

use jquery to select option by its value

I am faced with a choice of 4 options: <input type="radio" name="tag" value="1"/> <input type="radio" name="tag" value="2"/> <input type="radio" name="tag" value="3"/> <input type="radio" name="tag" value="4"/> On my previous page ...

Inspect every div for an id that corresponds to the values stored in an array

I am in the process of developing a series of tabs based on a preexisting set of categories using the JavaScript code below. Now, I am looking to expand this functionality to target specific IDs within the DIV ID corresponding to values from an array in JS ...

What is the best way to ensure that a specified number of list items (li) will align properly within the width of an unordered list (ul

I'm attempting to make all the li elements' width match that of my ul element. Here is the code I am using: http://jsfiddle.net/4XR5V/2/ I have looked at some similar questions on the website and tried adding: ul { width: 100%; display: tab ...

An unforeseen repetition of jQuery Ajax calls

I'm currently working on an application that utilizes ajax calls to load content. However, I've encountered a situation where an ajax call goes into a loop but seems to end randomly. Below is the code sequence starting from a double click event l ...

Tips for showing an inline <span> within <div> elements

Is there a way to showcase inline spans within a div element while ensuring they are displayed equally in size and space, based on the user's screen? And how can I ensure that these spans are positioned behind other div elements? body { width: au ...

Obtain the content of every cell in a constantly updating table

I have created a dynamic table as shown below: <table id="sort" class="table"> <thead> <tr> <th>Column Name from DB*</th> <th>Record Le ...

Press a button to activate a function on a dynamically created table using Ajax

On my website, I have an ajax function that dynamically generates a table and displays it inside a designated div. Below is the PHP code called by the Ajax function. echo "<table border='1' cellspacing='12' cellpadding='4' ...

The jqgrid setCell function will erase any previously set formatter

When I use the setCell method in my jqgrid to set values for textboxes, it ends up removing the textbox formatter. Is there a way to keep the textbox intact and only replace the value? $("#acc_jqgrid").jqGrid('setCell', sel_id, 'jqgrid_accD ...

Trouble Ensues When Using Two Jquery Datatables with the Same Class

I am facing an issue with two jQuery datatables that have the same class names. The search functionality works in one table but not in the other. I need some help reviewing my code to figure out how to fix this. jQuery $('.dataTable th.searchClass&a ...

Defining the active element in the menu using JavaScript

I need help with my navigation menu: <ul> <li id="active"><a href="/">Home</a></li> <li><a href="/about/">About Us</a></li> <li><a href="/services/">Our Services</a>< ...

What is the best way to conceal part of a chart or a div in Angular?

I have a large chart that I need to showcase on my website, but due to its size it would take up too much vertical space and potentially overwhelm the user upon their first visit. My goal is to provide a preview of the chart, similar to an excerpt of text ...

Optimizing Static File Caching in Yii

Having a frustrating issue with Yii where my local development environment caches CSS and JS files. Despite making changes to the file, the edits do not reflect in the output and sometimes causes corruption leading to broken functionality. This problem see ...

Using Selenium in Python, identify and choose a class

Hello, I am currently working on automating a process using selenium, python, and GLPI. I have been struggling with selecting a user from a menu bar, despite trying various methods like linkText, cssSelector, and xpath. I suspect I may be doing something w ...

What could be causing the misalignment of divs with margins?

I'm facing an issue where I can't seem to get two h2 elements with top margin set and placed inside divs floating left to line up properly. Any help would be appreciated. <html> <head></head> <style> h2{ ...

What is the process for transforming JSON into a different format?

Currently, I have a JSON array structured as follows: var data = { report: [ { Name: "Nitin", comment: [ { count: 0, mName: "Feb" }, ...

Creating a navigation menu that uses images to simulate borders instead of using traditional border styling in CSS

My goal is to create a menu with a design like this: | one | two | three | four| Through CSS and borders, it's possible to achieve a similar look by: .myContainer > ul > li{ border-right: 1px solid purple; } .myContainer > ul > li ...

Is there a way to load an image onto the ngx-image-cropper without triggering the imageChangedEvent event?

My latest project involved creating a custom cropper using ngx-image-cropper, which allows for cropping and rotating images. For the sprint demo, I needed the images to be displayed as soon as the application loads without having to trigger the fileChangeE ...

How can you toggle the visibility of a div based on detecting a specific class while scrolling?

My webpage features a sticky header that gains an extra .header-scrolled class when users scroll down. I am looking to switch the logo displayed in the header once it has been scrolled. Below is a simplified version of my HTML code: <header class=".he ...

Issues with jQuery Slider not functioning properly within asp.net webform

I have implemented an Awkward slider to display images for my article. I made some CSS modifications to change the design and it worked perfectly fine when used on an HTML page. However, when I tried using it with an ASP.NET web form, it failed to work fo ...

Restore font-weight if a different list item is chosen

I previously inquired about setting the font-weight to bold on a text element when selected. Thanks to @Eric, this has been successfully implemented! However, I am facing an issue where clicking on one text makes it bold, and then clicking on another text ...