CODEWITHSUNDEEP
htmlcssiphone
Salini
Salini

Reputation: 347

css code desktop view and mobile view is not working

What I want is the below: like this

so I have the css code:

and html code is:

<body>
 <div class="contanier">

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

    </div>
</body>

I am following this site:

desktop and mobile view

But I am getting like this: like this

here the desktop view is ok..but I am not getting the mobile view ..In mobile view the content in not going below. where is the problem? what more I have to add?

with this code I am not getting the space.

but in this code the "rightcol" is not going down.

According to the suggestion..I am getting space between "container" and "right section",i.e:
enter image description here

Upvotes: 1

Views: 487

Answers (2)

niXful-Autistic
niXful-Autistic

Reputation: 217

#rightcol {
     display: inline-block; /* alternative to float */
}

link here: http://learnlayout.com/inline-block.html

Upvotes: 0

Rachel Gallen
Rachel Gallen

Reputation: 28553

Display your divs inline-block on desktop and block on mobile

Here is a fiddle

        * {
  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>

Upvotes: 1

Related Questions