Responsive design involves ensuring that web elements such as divs are properly aligned

Question

Responsive design involves ensuring that web elements such as divs are properly aligned

I am currently working on aligning 2 divs in a specific way that is responsive. I would like the right div to stack on top of the left div when the screen width reaches a certain point, as opposed to them both taking up 50% of the container's width.

The form is located on the left side while the content is on the right. My goal is to have the content display on top of the form to better fit a mobile screen width. The current setup works well for desktop and laptop screens, but not for smaller devices.

Can this be achieved with CSS alone or will I need JQuery to accomplish this? Please inform me if you need further clarification.

Here is the CSS code:

#left {
float:left;
width:65%;
border-radius: 25px;
background-color: #F8F8F8 !important;   
}

#right {
float:right;
width:35%;
background-color: white !important;
padding-left: 40px;
}

javascript jquery html css

Answer 1

Answer №1

From my understanding, the JSFiddle linked below demonstrates exactly what you are looking for.

http://jsfiddle.net/username/example/2/ (A big thank you to Username for resolving the CSS issue)

Here is a method to achieve this using pure CSS and @media queries:

#left {
    float: left;
    border: 1px solid black;
    width:calc(65% - 26px);
    border-radius: 25px;
    background-color: #F8F8F8 !important;
}
#right {
    border: 1px solid black;
    float: right;
    width:calc(35% - 40px); 
    background-color: white!important; 
    padding-left: 40px; 
} 
@media screen and (max-width:500px) {
    #left { 
        display:block; 
        width:100%; 
    } 
    #right { 
        display:block; 
        width:100%;
   }
}

Answer 2

From my understanding, the JSFiddle linked below demonstrates exactly what you are looking for.

http://jsfiddle.net/username/example/2/ (A big thank you to Username for resolving the CSS issue)

Here is a method to achieve this using pure CSS and @media queries:

#left {
    float: left;
    border: 1px solid black;
    width:calc(65% - 26px);
    border-radius: 25px;
    background-color: #F8F8F8 !important;
}
#right {
    border: 1px solid black;
    float: right;
    width:calc(35% - 40px); 
    background-color: white!important; 
    padding-left: 40px; 
} 
@media screen and (max-width:500px) {
    #left { 
        display:block; 
        width:100%; 
    } 
    #right { 
        display:block; 
        width:100%;
   }
}

Answer 3

Answer №2

One way to achieve this is by utilizing media queries to determine the screen width at which you want the stacking effect to take place.

For example, if you decide on a width of 768px, you can remove the float properties and set the widths to 100%. By structuring your HTML in such a way that the content for the right section appears before the content for the left section, it will naturally display above the left side when rendered.

Answer 4

One way to achieve this is by utilizing media queries to determine the screen width at which you want the stacking effect to take place.

For example, if you decide on a width of 768px, you can remove the float properties and set the widths to 100%. By structuring your HTML in such a way that the content for the right section appears before the content for the left section, it will naturally display above the left side when rendered.

Answer 5

Answer №3

#wrapper {
  display: flex;
}

#top {
  order: 1;
  width:60%;
  border-radius: 20px;
  background-color: #EAEAEA !important;   
}

#bottom {
  order: 2;
  width:40%;
  background-color: #FFFFFF !important;
  padding-left: 30px;
}

@media only screen and (max-width: 767px) {
  #top, #bottom { width: 100%; }
  #top { order: 2; }
  #bottom { order: 1; }
}

If you are not concerned about supporting IE9 and earlier versions, you can utilize display: flex and adjust the order of the elements to stack as desired at specific breakpoints.

Answer 6

#wrapper {
  display: flex;
}

#top {
  order: 1;
  width:60%;
  border-radius: 20px;
  background-color: #EAEAEA !important;   
}

#bottom {
  order: 2;
  width:40%;
  background-color: #FFFFFF !important;
  padding-left: 30px;
}

@media only screen and (max-width: 767px) {
  #top, #bottom { width: 100%; }
  #top { order: 2; }
  #bottom { order: 1; }
}

If you are not concerned about supporting IE9 and earlier versions, you can utilize display: flex and adjust the order of the elements to stack as desired at specific breakpoints.

Answer 7

Answer №4

Can you create a website layout without using jQuery and only relying on CSS? The answer is yes! All you need is a solid grid system.

Instead of manually coding media queries to adjust your layout based on screen size, consider utilizing a grid system. Not only will it handle edge cases more efficiently, but it will also save you from having to start from scratch each time. Some popular grid systems worth exploring include:

Skeleton
Foundation
Bootstrap

If simplicity is key for your project, starting with Skeleton might be the way to go. It offers an efficient grid structure without overwhelming you with unnecessary features like pre-styled buttons. However, if you prefer a CSS framework that covers more aspects of design, Foundation and Bootstrap are popular choices worth considering.

Answer 8

Can you create a website layout without using jQuery and only relying on CSS? The answer is yes! All you need is a solid grid system.

Instead of manually coding media queries to adjust your layout based on screen size, consider utilizing a grid system. Not only will it handle edge cases more efficiently, but it will also save you from having to start from scratch each time. Some popular grid systems worth exploring include:

Skeleton
Foundation
Bootstrap

If simplicity is key for your project, starting with Skeleton might be the way to go. It offers an efficient grid structure without overwhelming you with unnecessary features like pre-styled buttons. However, if you prefer a CSS framework that covers more aspects of design, Foundation and Bootstrap are popular choices worth considering.

Responsive design involves ensuring that web elements such as divs are properly aligned

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The integration of cypress-cucumber-preprocessor with multiple testing frameworks appears to be experiencing compatibility issues

What methods can be employed to reduce additional background tasks when altering a state in a React component?

Send information through a form by utilizing a personalized React hook

Issue with the intersection of mouse and camera rays in three.js

Utilizing the arr.push() method to replace an existing value within an array with a new object, rather than simply adding a new

Concealing JW Player Video Link within Source Code

Unusual characteristics of decision-making

Utilizing Repurposed Three.js Shapes

Explaining the jQuery $.post method

Displaying a specific division solely on mobile devices with jQuery

I added an onClick event to an SVG image, however, I am struggling to get the event to execute a jQuery if/else statement

I am looking to enhance my JSON output using JavaScript

What is the best way to retrieve data from a jQuery AJAX call when it returns?

Troubleshooting Problem with JQuery in the YouTube Player API

Exploring the power of asynchronous Mongoose queries using the async await

Is there a method to retrieve the subdirectories and files currently present on a given URL?

What could be the reason for my inability to retrieve data when using the input type "number"?

Is there a way for me to duplicate a complex element multiple times within the same page?

Combining iDangerous Swiper with jquery .click() for Ultimate User Interaction

Setting the current date of a jQuery datepicker to the value of an input tag