Adaptable layout - transitioning from a two-column design to a single-column layout

I'm facing an issue with two divs that are floated left to appear inline

<div class==".container" style="width: 100%">
    <div class="leftColumn" style="width: 50%; float:left">
        test
    </div>

    <div class="rightColumn" style="width: 50%; float:left">
        test
    </div>
</div>

However, when the screen width falls below 400px, I want these divs to stack on top of each other. Here's my current media query:

@media(max-width: 400)
{
    .leftColumn{background-color: Red; float: none}
    .rightColumn{background-color: Blue; float: right} 
}

Any assistance on resolving this problem would be greatly appreciated.

htmlcssresponsive-design

Answer №1

By implementing the following CSS code, you can achieve a similar outcome:

@media(max-width: 400) {
       .leftPanel, .rightPanel{width:100%;} 
    }

Answer №2

Finally cracked the code!

I realized that the issue was caused by the inline styles on the div elements.

<div class="rightColumn" style="width: 50%; float:right">
    example
</div>

Once I removed the styling, everything fell into place perfectly.

Answer №3

Aha! Inline styling was causing some issues, and also make sure to define your media queries accurately by including the "px":

http://jsfiddle.net/XmqNy/

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

When the height of the window decreases, scrolling is not implemented

Having trouble adjusting the height of my Responsive Modal when the window height decreases. The content is slipping under the window and the scroll bar isn't adjusting accordingly. It seems like the nested div structure is causing issues. https://i.s ...

htmlcssmaterial-uifrontend

Is there a way to incorporate pseudo-dynamic css into my projects?

I'm struggling with managing custom colored elements on my website. For instance, I have a hundred navigation squares on the site, each with its own unique color. The only solution I can think of is creating separate CSS classes for each color, but t ...

javascriptcss

What is the best way to line up three divs horizontally and center the contents inside each one?

I'm brand new to CSS and need some help simplifying things. I am trying to create 3 divs that are all the same size, placed next to each other, with centered content in each one. Currently, I have a central div with a rotating image, and on the left a ...

htmlcss

JavaScript: Retrieving the names of children within a <div> element

Within my structure setup, there is a tower div with inner elements like this: <div class="tower"> <div class="E0">abc</div> <div class="GU">123</di </div> The challenge I am facing is that I need to access the in ...

javascripthtmlclass-names

Adjust the vertical positioning according to the percentage of the width

Currently, I am attempting to modify the position of my navigation bar on the screen in relation to the screen width rather than the height. I previously attempted using top: 10% in CSS, but realized this is based on the screen's height instead of its ...

htmlcss

Preventing an image from being repeated when using Canvas drawImage() without having to clear the entire canvas

How can I prevent multiple instances of the same image from smearing across the canvas when drawing it? The platforms seem to stick together and not separate properly. Why do I have to clear the entire rectangle for everything to disappear? Does anyone ha ...

javascriptcsshtml

The left-floating elements are only partially functional

I recently encountered an issue with my HTML page that features a basic image gallery enhanced by lightboxes (fancybox). The images are meant to align left, with the first row containing three images and the second row containing two. <div class="image ...

htmlcsscss-float

Implementing a backdrop while content is floating

I am facing an issue with a div that has 2 columns. The height of the left column is dynamically changing, whereas the right column always remains fixed in height. To achieve this, I have used the float property for both column divs within the container di ...

htmlcss

Leverage AngularJS to dynamically load CSS stylesheets using ng-repeat

I have organized my stylesheets into separate modules for each include, and I am trying to dynamically load them. However, I am facing some difficulties as when they are rendered, all I see is the following markup for each sheet that should be loaded: < ...

htmlcssangularjsheaderangularjs-ng-repeat

What is the significance of the colon found within a VueJS/Vuetify/HTML component tag?

Incorporating Vuetify into my project has led me to this VueJS, Vuetify, or HTML inquiry. The component in question displays as follows: <v-list-tile v-for="item in menuItem.items" :key="item.type" :style="`background: ${item.colour}`" :h ...

htmlvue.js

Optimal Procedure for New Users Form (Jade / Angular) in HTML

I'm currently working on integrating a form into my app for users to create tasks. This form should only appear the first time a user attempts to create a task. As someone who is not very experienced with frontend development, I find myself wondering ...

htmlangularjsformspug

Activate Input by Clicking on Label in Internet Explorer version 8

I am trying to implement a widget in JQuery colorbox that allows users to load files. My approach involves using an input tag with type='file' and styling it with visibility:hidden. Additionally, I have created two labels that are styled like but ...

javascriptjqueryhtmlcssinternet-explorer-8

Is it possible to access the service and 'self' directly from the HTML template?

When working with Angular 6, one method to access component properties from a service is to pass 'self' to the service directly from the component. An example of this implementation is shown below: myComponent.ts public myButton; constructor(p ...

htmlangulartypescriptserviceself

What is the best way to format a condensed script into a single line?

There are times when the script in the web browser is packed into one line like function a(b){if(c==1){}else{}}. I have attempted to locate something that would display it in a more normal format. function a(b) { if(c==1) { } else { } } Howev ...

javascripthtmlbrowser

Is there a way to display multiple images in a JSON message object?

If you're looking for a fun way to generate random dog images, then check out my DogAPI image generator! Simply enter a number between 1-50 into the form text box, hit send, and watch as it displays that amount of random dog photos. I'm almost t ...

javascriptjqueryhtmljsonobject

Ways to verify the content within two separate p elements

<p> expanded state:</p> <P> true </p> Merging the text from both tags into a single output. Final Output: expanded state: true ...

javahtmlseleniumselenium-webdriver

How to temporarily disable CSS hover effects

I have a menu with some links <ul id="nav"> <li> <a href="#">Project</a> <div class="subs"> <div> <ul> <li> <h3>Save</h3> <ul> <li> <a i ...

jquerycss

The printed Bootstrap web page is being truncated

I have a unique dynamic webpage created with Bootstrap that needs to be printable. I am implementing media queries for styling the page when printing: /** Custom Print Styles **/ @media print { header, .menu, footer { display: none; ...

jqueryhtmltwitter-bootstrapcss

Using a timer to make Ajax calls twice on a single webpage

Can multiple ajax calls be made simultaneously on the same page to different receiving div tags? I am struggling to find a solution to this issue. I have a total of 3 pages: a home page, and two PHP pages named status and alert which echo the results. Wi ...

javascriptphphtmlajax

How to Prevent Scrolling When Modal is in Use on Full Page JS

I am trying to achieve the functionality where when the modal is open, I want to prevent full-page scrolling in JavaScript. The issue arises when I open the modal and try to scroll, it ends up moving the content that's behind the modal, which is actua ...

javascripthtmljquerycssfullpage.js