Blog Sidebar on Top - Mobile Device

[EIGENARTdigital]

Hey there,

I just finished a new website project with the x theme. There is a single problem left - in the blog area.

I want to place the Blog Sidebar on mobile device on top of the screen. So there is the sidebar above and the content below.

I tried some different CSS Code but it didnt work.

Can you please give me a solution for that problem?

The website is - werbering-grafing.de

Thanks for help and have a nice day!
Andy / EIGENARTdigital

[Prasant]

Hello Andy,

Thanks for asking.

Please add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  .x-container.max.width.offset {
    display: table;
}

.x-main.left {
    display: table-footer-group;
}

aside.x-sidebar.right {
    display: table-footer-group;
}

}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[EIGENARTdigital]

Hey Prasant,

thanks for the code - worked fine!

I will watch your video recomments as well.

Thanks and enjoy the day
Andy / EIGENARTdigital

[Prasant]

Glad to hear that.

[EIGENARTdigital]

Hey there,

I have one more problem with a css code for mobile device.

I want to set one headline and text (class: .textmitglied) align center (just on mobile device). And I used the following code, but doesnt work:

@media only screen and (max-width: 767px) {
.textmitglied {align:center!important;}
}

Can you tell me, what I did wrong?

Thanks for help again!

[mldarshana]

Hi Andy,

The CSS rule that you have used is incorrect. Please use the following CSS rule instead.

@media (max-width:767px){
  .textmitglied {
    text-align: center;
  }
}

Hope that helps.