When viewed on mobile browsers, the side-by-side divs in a tabbed layout appear to be

Looking for some help with responsive design for the "PORTFOLIO ATTRIBUTES" tab on my website. On desktop, the content displays fine, but on mobile it overlaps and cuts off. Here's the link to the page in question: .

Any suggestions on how to maintain the side-by-side layout and responsiveness across all screen sizes? The top chart and table are just right on mobile views. Appreciate any advice. Code snippet provided below:

<div id="attributes" class="tab-pane fade"><div style="width:65%;display:inline-block"><iframe src="/charts/DIVCONleaderspie.htm" width="100%" height="450px" scrolling="no" frameBorder="0"></iframe></div><div style="width:33%;float:right"><table style="width:100%;font-size:14px;padding:0px"><thead style="text-align:left"><tr><th style="color:#FFFFFF;background-color:#005580" scope="col">TOP 10 HOLDINGS</th><th style="color:#FFFFFF;background-color:#005580" scope="col">WEIGHT<sup>*</sup></th></tr></thead><tbody><tr><td>Starbucks Corp.</td><td>5.16%</td></tr><tr><td>Yum! Brands, Inc.</td><td>4.63%</td></tr><tr><td>Celanese Corp.</td><td>4.37%</td></tr><tr><td>Nike Inc.</td><td>4.11%</td></tr><tr><td>Moody's Corp.</td><td>4.04%</td></tr><tr><td>CR Bard Inc.</td><td>3.88%</td></tr><tr><td>CVS Health Corp.</td><td>3.86%</td></tr><tr><td>Wabtec Corp.</td><td>3.80%</td></tr><tr><td>Visa Inc.</td><td>3.73%</td></tr><tr><td>Polaris Industries Inc.</td><td>3.68%</td></tr></tbody></table></div><br /></div>
htmlcssresponsive-design

Answer №1

Avoid using inline styles in this case, it's a topic that deserves its own discussion. For mobile devices, consider having these columns expand to 100% width with the following CSS:

@media screen and (max-width: 300px) {
    .my-element {
        width: 100%;
    }
}

Alternatively, if you're using Bootstrap, wrap both divs in a .row div and give them a class of col-md-6 to eliminate the need for inline width styles.

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

Functionality that can be utilized repeatedly

I've been struggling to implement a feature for repeatable blocks in my web form. The issue I'm facing is that when I click the buttons, nothing happens even though they work fine when tested in the console. I've been stuck on this problem f ...

javascriptjqueryhtml

The one-click button is functional on larger screens, while on mobile devices, only a double click will register

I am facing an issue in angular where a button works perfectly fine with one click on larger screens, such as Macbook. However, on iPhone, it requires a double click to function properly (it works fine on Android too). The alert triggers with a single cl ...

javascriptcssbuttononclickdouble-click

"Help needed: The HTML dialog element is obstructing the invisible reCAPTCHA challenge popup. Any solutions for resolving this

Visit this link to access the example in incognito mode. Click on the "open" button to open the sample signin form, then click on the "Sign Up" button to trigger the challenge. There seems to be an issue with using recaptcha inside a dialog. I'm not ...

javascriptcssvue.jsrecaptchainvisible-recaptcha

Troubleshoot: Why is my Google Chrome not playing videos? Uncover the solution with a

I have created a webpage with an HTML video tag that loads dynamically from a JSON file. I am currently using Chrome 50 for this project. The response is successful, and when inspecting the page using Chrome's developer tools, I can see the video tag ...

javascriptjsonhtmlgoogle-chromevideo

To modify the text within the pagination select box in ANTD, follow these steps:

Is it possible to modify the text within the ant design pagination select component? I have not been able to find a solution in the documentation. I specifically want to replace the word "page" with another term: ...

javascripthtmlcssreactjsantd

Eliminating the impact of a CSS selector

I have a complex mark-up structure with multiple CSS classes associated: classA, classB, classC, classD. These classes are used for both styling via CSS and event binding using jQuery selectors. The Challenge: I need the jQuery events to be functional whi ...

javascriptjqueryhtmlcss

Display a horizontal progression indicator during the page download process

Occasionally, website pages may take a while to download without the user even realizing it. This can be problematic if the user clicks on an image or button with an event handler attached, as it may break the page functionality. To address this issue, I ...

jqueryhtmlcssprogress-bar

What techniques can I implement to optimize the speed of this feature in JavaScript?

I have developed a feature that highlights any text within a <p> tag in red based on a user-specified keyword. The current implementation works well, but it is slow when dealing with over 1000 lines of <p>. Is there a faster way to achieve this ...

javascriptjqueryhtml

Unable to move cursor in contenteditable section

I am currently working on developing a rich text editor in React, but I have encountered an issue that has me stuck. The problem I am facing is that as I type each character, the insertion point does not update accordingly, causing the cursor to remain stu ...

javascripthtmlcssreactjs

When using CSS @media print with inches, different dimensions are displayed post-printing

I'm currently working on a project that involves printing a single div from my webpage. However, I've encountered some issues with the @page tag not affecting the print output as expected. I attempted to manually set the dimensions of the element ...

htmlcssreactjsprintingmedia-queries

Having issues with the Vue.js documentation example not functioning properly in Codepen?

My goal is to replicate a checkbox example from Vue.js's documentation. However, when I import Vue into codepen.io and copy the code for multiple checkboxes into the JS field, then paste the HTML into the designated field, something isn't working ...

htmlvue.jscodepen

Retrieve the value from an input field when the value is returned from JavaScript

Scenario: I'm currently working on creating a QR reader to retrieve a specific value. You can check out the progress here: What's functioning: scanning. When I scan a QR code, a value is displayed in the text box. Here's the code snippet b ...

javascriptjqueryhtml

Enhance the collapsible feature in Vue.js by integrating Bootstrap and anim

In the process of creating a side bar menu with collapse show/hide functionality, I am encountering some issues. The current CSS implementation is making the collapse action appear abrupt and unnatural. I am looking to achieve a smooth sliding transition ...

cssvue.jsvuejs2bootstrap-4

Expanding the height of an image in a multi-select dropdown using CSS

I have an image that is included in all text fields and drop downs like so: However, when it comes to a multiple select drop down box, the image appears differently: I would like the image to display as shown above for multiple select drop downs. I atte ...

htmlcss

Creating a customizable navigation bar using only CSS

I'm currently working on creating a navigation bar using only HTML and CSS, without the need for JavaScript to open and close it. However, I've encountered an issue where the navigation bar remains open even after setting display: none or visibi ...

css

Ionic 4: Facing issues with setting complete background image on ion-card

https://i.stack.imgur.com/3lH6h.png I'm currently attempting to set a background image for an Ion-card in order to completely cover the card's area. However, I'm facing an issue where the background image does not cover the entire area and ...

cssangularionic-frameworkionic4

The custom component at the beginning of the MDX file in a Next.js project is not adhering to the

My nextjs project is running on the following versions: "@mdx-js/loader": "^2.1.5", "@mdx-js/react": "^2.1.5", "@next/mdx": "^12.1.6", "next": "^12.1.6", Within my project, I ...

htmlreactjsnext.jsmdxjs

Create a rectangular container with text using CSS

Looking to achieve a square box design using CSS with specific dimensions? Want to insert text inside the square and ensure it is horizontally centered within the square? Check out this code snippet: #myid { width: 100px; height: 100px; ...

htmlcss

Ensure that the dimensions of a div remain consistent across all screen resolutions, specifically for desktops and not mobile devices

Currently I am in the process of creating a highly secure and encrypted social network, but I have hit a stumbling block. I hadn't considered how my website would display on other desktops and laptops (not mobile devices). The issue is that I set all ...

htmlcss

Struggling to retrieve data from the HTML Dom? I have already tried using getAttribute() and getText() methods within Selenium WebDriver

I attempted to extract text/value from the Html Dom using getAttribute() and getText() methods in WebDriver, but I wasn't able to retrieve any values in the console. Could someone please assist me in resolving this issue? The image provided does not c ...

javahtmlselenium-webdriverdomtestng