The CSS code isn't functioning properly on both desktop and mobile views

Question

The CSS code isn't functioning properly on both desktop and mobile views

Here is what I desire to achieve: https://i.sstatic.net/8H4fv.png

The CSS code I have is:

And the HTML code looks like this:

<body>
 <div class="contanier">

    <div id="rightcol">Right Section</div>
<div id="content">Content Section</div>

    </div>
</body>

I am referencing this site for guidance:

desktop and mobile view

However, with my current setup, the display is not as expected. The desktop view appears fine, but on mobile, the content does not stack below. What seems to be causing this issue? What adjustments do I need to make?

This code snippet lacks spacing.

In another version of the code, the "rightcol" element remains at the same level instead of moving down.

Implementing the suggestion provided has resulted in space between "container" and "right section," as shown here:
https://i.sstatic.net/nCr1T.png

html css iphone

Answer 1

Answer №1

Make sure your divs are styled as inline-block on desktop, and as block on mobile devices

Check out this demo

        * {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  font-family: 'Cabin', sans-serif;
}
.contanier {
  margin:auto;
  height: 1500px;
  display: block;
  width: 70%;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
}
#rightcol {
  background: #f00;
    position:relative;
    display:inline-block;
  width: 20%;
  margin-left:auto;
  margin-right:auto;
  height: 500px;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
}
#content {
  background: #fff;
  position:relative;
    display:inline-block;
 margin-left:auto;
  margin-right:auto;
  width: 59%;
  height: 500px;

   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
}
@media screen and (max-width: 700px) {
    #rightcol, #content{display:block!important; width:100%;}
    
   .contanier {
    -webkit-flex-flow: column;
            flex-direction: column;
   }

   #rightcol, #content {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }

  #rightcol{
    min-height: 50px;
    max-height: 50px;
   }
}

<body>
  <div class="contanier">

    <div id="content">Content Section</div>

    <div id="rightcol">Right Section</div>
    

  </div>
</body>

Answer 2

Make sure your divs are styled as inline-block on desktop, and as block on mobile devices

Check out this demo

        * {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  font-family: 'Cabin', sans-serif;
}
.contanier {
  margin:auto;
  height: 1500px;
  display: block;
  width: 70%;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
}
#rightcol {
  background: #f00;
    position:relative;
    display:inline-block;
  width: 20%;
  margin-left:auto;
  margin-right:auto;
  height: 500px;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
}
#content {
  background: #fff;
  position:relative;
    display:inline-block;
 margin-left:auto;
  margin-right:auto;
  width: 59%;
  height: 500px;

   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
}
@media screen and (max-width: 700px) {
    #rightcol, #content{display:block!important; width:100%;}
    
   .contanier {
    -webkit-flex-flow: column;
            flex-direction: column;
   }

   #rightcol, #content {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }

  #rightcol{
    min-height: 50px;
    max-height: 50px;
   }
}

<body>
  <div class="contanier">

    <div id="content">Content Section</div>

    <div id="rightcol">Right Section</div>
    

  </div>
</body>

Answer 3

Answer №2

#rightcol {
     display: inline-block; /* use instead of float */
}

reference:

Answer 4

#rightcol {
     display: inline-block; /* use instead of float */
}

reference:

The CSS code isn't functioning properly on both desktop and mobile views

Answer №1

Answer №2

Similar questions

The dropdown menu in the navigation bar is getting hidden behind the content

The class is failing to be applied to the parent div that holds an id starting with the letter x

Having trouble getting my jQuery fade in effect to work

Tips for positioning a highcharts pie chart and legend in the middle of a page

Forwarding the geographic coordinates directly to the system's database

Tips on dynamically passing values according to media queries

Positioning html images to overlap each other without losing the ability to click

Showing a hidden div after an unsuccessful AJAX call

Add drop caps to every individual word within a hyperlink

Utilize JavaScript conditions to dynamically apply styles within your web application

The update of the attribute in jQuery on a checkbox is not causing the change event to trigger

Does activating a hyperlink on an anchor element count as a cross-origin request?

What is the proper way to specify the type for a <video> element reference in React when utilizing Typescript?

How can I change the Safari blue outline to black?

Tips for resolving a sluggish webpage with database content

Stop the anchor tag from activating Chrome's status bar

Is there a possible method to obtain a smartphone number from a website?

Display extensive text content in HTML for mobile devices

Trouble with CSS Vertical Alignment: Solutions to Fix it

Guide to changing the background colors of multiple elements when hovered over by the mouse?