[D.J.Participant]

Hi – I’m testing my site in various resolutions and I just had a quick question. Is it possible to keep the sidebar (which disappears on smaller resolutions) in smaller screen sizes?

X version 3.2.3 – Icon stack with child theme.

The point in which the sidebar moves from the right side to the bottom of the page seems to be in monitors of 12″ or smaller.

Here’s a live 12″ monitor resolution simulator of my site.

At 13″ and above the sidebar is on the side (where I’d prefer it).

I understand on mobile devices that moving the sidebar to underneath the content makes sense, but is there any way on 12″ or smaller monitors to keep the sidebar on the right and auto-adjust the header and main content to shrink to accommodate that?

Just curious – thanks!

[ChristopherModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[D.J.Participant]

Oops – here you go!

[ThaiModerator]

Hi There,
Thanks for writing in!
Try adding following CSS under Appearance > Customize > Custom > CSS:

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
.x-main {
  width: 70%;
  float: left;
}
.x-sidebar {
  width: 29%;
  float: right;
  padding: 1%;
}
}

Hope it helps.

[D.J.Participant]

I added it but it didn’t seem to work.

Here’s it at the lower resolution with the CSS you provided but the sidebar still being pushed to the bottom

Any other ideas? Thanks!

[Rue NelModerator]

Hello There,

Thanks for the screenshots!

Please try to add the following css code in the customizer, Appearance > Customize > Custom > CSS. This is for tablets and small desktop screens.

@media (min-width: 481px) and (max-width: 1024px) {
 .x-main.full {
  width: 70% !important;
  float: left !important;
 }
 .x-sidebar {
  width: 29% !important;
  float: right !important;
  padding: 1%;
 }
}

Please let us know if this works out for you.

[kirk74Participant]

I wanted t achieve this as well. tried the above code an it didn’t work for me.

[Paul RModerator]

Hi @kirk74

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[kirk74Participant]

Thx so much, I will set it in private reply … ICON is working really well.. It is just a small tweak.. that when window resized smaller, that the sidebar doesn’t drop to the bottom quite so early .. mine is droppign when the wideo is 1200 px wide..

Just before it drops below, there is stil a gap either side of the background (in between main content and the sidebar) – for me this is around 70 px width each side.. even if this gap closed up as the window got smaller.. so mayybe the sidebar drops at about 1060 px wide instead of 1200, that would make a big difference.

But even better would be that the sidebar can stay at even slightly smaller window sizes..

Thx so much

[kirk74Participant]

This reply has been marked as private.

[kirk74Participant]

I think I worked it out.. I loooed in icon.css and found all the @media (min-width: 1200px) items and changed them to 1000

Also there was:

@media (min-width: 980px) and (max-width: 1999px){
.x-hide-lg{
display:none !important
}

}

which I changed to:

@media (min-width: 980px) and (max-width: 999px){
.x-hide-lg{
display:none !important
}

}

And it seems to have worked… SUPPORT – if you could please advise whether or not you see anything wrong with this approach ..

This is a summary of the code I added:

@media (min-width: 1000px){
.x-navbar-fixed-left-active,.x-content-sidebar-active{
padding-right:250px
}

}

@media (min-width: 1000px px){
.x-navbar-fixed-right-active,.x-sidebar-content-active{
padding-left:250px
}

}

@media (min-width: 1000px){
.x-navbar-fixed-left-active.x-full-width-active{
padding-right:0
}

}

@media (min-width: 1000px){
.x-navbar-fixed-right-active.x-full-width-active{
padding-left:0
}

}

@media (min-width: 1000px){
.x-content-sidebar-active .x-navbar-fixed-top{
right:250px
}

.x-sidebar-content-active .x-navbar-fixed-top{
left:250px
}

}

@media (min-width: 1000px){
.x-iso-container.cols-4>.hentry{
width:24.95%
}

}

@media (min-width: 1000px){
.x-content-sidebar-active .x-sidebar{
right:0;
border-left:1px solid #dfdfdf;
border-left:1px solid rgba(0,0,0,0.075)
}

}

@media (min-width: 1000px){
.x-sidebar-content-active .x-sidebar{
left:0;
border-right:1px solid #dfdfdf;
border-right:1px solid rgba(0,0,0,0.075)
}

}

@media (min-width: 1000px){
.x-full-width-active .x-sidebar.nano{
border-top:1px solid #dfdfdf;
border-top:1px solid rgba(0,0,0,0.075)
}

}

@media (min-width: 1000px){
.x-sidebar{
position:fixed;
top:0;
width:250px;
height:100%;
margin:0;
border-top:0;
z-index:1031;
-webkit-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}

}

@media (min-width: 1000px){
.x-sidebar .max.width{
padding-left:20px;
padding-right:20px
}

}

@media (min-width: 1000px){
.x-hide-xl{
display:none !important
}

}

@media (min-width: 980px) and (max-width: 999px){
.x-hide-lg{
display:none !important
}

}

[kirk74Participant]

OH DEAR – update! When the sidebar stays at lower resolutons (1000px wide), I have just noticed that the sidebar cannot be scrolled…

any ideas..?

thx

[NicoModerator]

Hi There,

Upon checking your site, sidebar works perfectly fine on a 1000px wide monitor.

Would you confirm that it has been fixed already or caching issues?

Let us know how it is.

Thanks.

[kirk74Participant]

Thx. It looks good but if you look closer the sidebar doesn’t scroll

[kirk74Participant]

I am on iPad now and I can see the sidebar but it doesn’t scroll at all

[Author]

Posts