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

Acquiring the value of an input box in VBA through HTML

Can someone provide guidance on how to retrieve the value from an input box on an Internet Explorer page using VBA? I have tried various solutions but none seem to work. Below is the HTML code I am working with. I specifically need the value of the bolded ...

htmlvbainputbox

Press the button to use PHP to remove a row from MySQL by its corresponding ID

Hey there, I'm facing an issue with my HTML form. I have a button named "delete" and next to it, there's an input field where the logged-in user is supposed to enter a number corresponding to an ID and then press the delete button to remove the r ...

phphtmlmysql

Create a video player in your HTML code using the class "afterglow", and also link a separate class to it for additional styling

I'm encountering some challenges with a project that involves a JS file for a Bootstrap modal popup and an HTML5 video player. The issue I'm facing is that I am unable to link the class for the video player theme. Can anyone here assist me in ide ...

javascripthtmlvideo-player

Having difficulties showcasing a variety of images stored in the database

I'm having some trouble with my e-commerce site. I can't seem to display different product images from the database on my homepage. The code I have only shows one image for all products, even though they should each have their own unique image up ...

phphtmlmysqlsql

Can someone guide me on how to create scrolling effects for my content? [html/css]

insert image description here Image dedicated to MrXQ I require assistance in verifying the accuracy of the following code - all content displayed below has been altered from the original for privacy concerns My objective is to have the headers scroll o ...

htmlcss

Tips for fixing the position without affecting the width

I'm trying to figure out how to keep my #header fixed in position without it expanding in width. Despite checking my code multiple times, I can't seem to identify the factor causing my header to become wider and shift downwards unexpectedly. I in ...

htmlcss

Adding an arrow to a Material UI popover similar to a Tooltip

Can an Arrow be added to the Popover similar to the one in the ToolTip? https://i.stack.imgur.com/syWfg.png https://i.stack.imgur.com/4vBpC.png Is it possible to include an Arrow in the design of the Popover? ...

javascriptcssreactjstypescriptmaterial-ui

Ways to clear all CSS rules from a class without deleting the class itself using jQuery

Clear out all CSS properties within a class without actually removing the class itself using jQuery For instance : .ui-widget { font-family: Verdana, Arial, sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; left: 350 ...

jquerycss

Obtain the class attribute of a CSS element with whitespaces using PHP's XML/HTML

I'm currently facing an issue with the PHP XML DOM parser. When parsing HTML from the real world, I noticed that many elements have multiple CSS classes due to spaces in the 'class' attribute. However, when using getAttribute() on a DOMNode, ...

phpxmldomcss

CanJS utilizes mustache templates to escape HTML tags

I have a requirement to present a series of choices to the user. I am using a mustache template along with the CanJS JavaScript framework to showcase these options. The problem arises when attempting to display an option such as: Potato Rs. 12 The mustac ...

javascripthtmlmustachecanjscanjs-view

Creating an image in JavaScript from PNG data

Sorry if this is a basic question, but I'm still learning about working with images. I have a PHP script that generates a PNG image. The final two lines of the script are header('Content-Type: image/png'); imagepng($image); I am trying to ...

phpjqueryhtmlpng

Using CSS Clip Path to conceal elements

My current design uses clip-path for a gradient effect at the top of the page. Ideally, I want the two angles to meet seamlessly without any visual issues. I initially positioned the top so that they touch perfectly and nothing interferes with the angled ...

css

Fixing the problem with Materialize drop-down menus

Here are some key details: The tool I'm currently utilizing: The current outcome displayed: The desired outcome to achieve: I have incorporated a dropdown feature into the navigation bar of my website. Prior to adding the following class: .siden ...

htmlcss

Passing Data Between Blazor App Pages Using .NET Core

Recently, I began learning how to create websites using the Blazor template. I'm having trouble figuring out how to pass data from one page to another. It's quite different compared to .NET CORE MVC web applications and I haven't been able t ...

htmlasp.net-coreasp.net-core-2.0blazor

How can we target every nth child element universally?

I am working with an HTML structure that has a specific layout, and I need to target all odd <span> elements globally without considering their parent elements. Is there a way to style 1, 3, 5, 7, 9 in red color? I attempted to use :nth-child(odd) b ...

htmlcsscss-selectors

Revising the hierarchy between !important in CSS and jQuery

(Attempting to modify CSS properties within a Chrome extension content script) Is it feasible to override CSS properties that have been marked as !important on the webpage? For example, if I aim to eliminate an important border: $(".someclass").css(&apo ...

jquerycsscontent-script

Creating a custom jQuery plugin for exporting data

I am crossing my fingers that this question doesn't get marked as 'already answered' because I have thoroughly searched previous questions and unfortunately, my specific case is not listed anywhere. I have successfully created a jQuery func ...

javascriptjqueryhtmlfunction

Can an identification be included in a label element?

My inquiry is as follows: <label for="gender" class="error">Choose</label> I am interested in dynamically adding an id attribute to the above line using jQuery or JavaScript, resulting in the following html: <label for="gender" class="err ...

javascriptjqueryhtmlcssforms

What is the best way to transfer data from an HBS template (HTML) to an Axios POST request?

Just diving into nodejs and express! I want to pass the user input (an email) to axios.post request's data when the "submit" button is clicked. I've verified that hard-coded data in the axios request is functioning correctly. data_email.hbs &l ...

htmlnode.jsexpresshandlebars.jsaxios

What is the best way to create a dynamic hyperlink that leads to a detailed information page based on the specific link clicked?

I'm currently working on a web page that displays a list of users, and I want each user's name to be clickable, leading to a page with specific details about that user. I'm new to this field, so I'm unsure where to start. My idea is to ...

javascripthtmlnode.jsmongodbexpress