Elxis CMS Forum

Support => General => Topic started by: armpouniotis on June 30, 2020, 15:40:35

Title: About responsive divs
Post by: armpouniotis on June 30, 2020, 15:40:35

Hi there !

I want the 1st div to be on top of the 2nd div (when screensize is less than 600px):

<div class="main">
    <div class="mainLeft"><?php $eDoc->component(); ?></div>
    <div class="mainRight"><?php $eDoc->modules('right'); ?></div>
</div>

Css:

.main{
width: 100%;
float: left}
   
.mainLeft{
   width: 80%;
   float: left;}

.mainRight{
   width: 20%;
   float: left;}

@media screen and (max-width: 600px) {
.mainLeft {
    width: 100%;
  }
.mainRight {
    width: 100%;
  }
}

Unfortunately, nothing happens

Any help ?
Christos

Title: Re: About responsive divs
Post by: webgift on July 10, 2020, 21:53:19

You could use a container (that contains these two divs) with display flex
and order these items using order property.
See this page: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Title: Re: About responsive divs
Post by: armpouniotis on July 10, 2020, 22:52:46

Yes !

thank you very much !

Christos