Gap between expanded sidebar and content is too wide

[poole]

Gap between expanded sidebar and content is too wide

[laymonk]

I forgot to even ask whether this was a deliberate design decision .. was it? .. The reason why it became a sticking point for me is that I would have wanted to use the right side of the main document area as a side-panel for various bits on various pages.

Please, help me with some insight when you are able to. Thanks.

[mdo]

It was deliberate—the entire page moves over for the sidebar. The sidebar doesn't overlay the content, though that could easily happen I think. I'll have to peep the CSS.

[hnrch02]

Remove this line from the CSS and you're set.

[laymonk]

Thanks for the quick response. The suggestion by hnrch02 certainly fixes the problem. Only thing is that now, the icon and sidebar overlaps with some of the text in the main content area .. depending on the width of the display. At narrower widths, the content area slides underneath the sidebar .. the desired effect is achieved only at a certain content width.

So, I guess it's safe to say that the structure is better with the original configuration than with the change suggested by hnrch02 .. I guess changing this setup requires other considerations (including setting a limiting (or minimum)) x-axis value. My CSS skills are somewhat limited, and so I am totally unsure how difficult this would be to do, or if it will affect general responsiveness of lanyon.

Please, let me know if this is something you are willing to work towards adjusting. I have to say though that even as it is, its a brilliant theme. So, I will start using it as is while hoping to adjust it at some point. I am also aiming to use it to improve my general understanding of CSS.

[laymonk]

OK, I have looked some more at this and my understanding of CSS is a much improved too .. :-) ..

The solution suggested by hnrch02 works visually, but disables the links in the side-bar because an overlap between the side-bar and the 'container content' is created when we apply the transform/translateX.

Apparently, transform creates new virtual elements (a translated element and an underlying unchanged original) .. So, we end up with an overlap where the transform/translated sidebar overlaps the original untranslated container-content and the visible z-ordering suggests the container-content stays on top and thus the link elements on the sidebar are not available to mouse events/interaction and thus stop working ..

This link here has more details of the origin of the problem .. So, the solution suggested by hnrch02 is no real solution .. since removing .wrap from the transform breaks navigation.

The solution to this is to change the left margin of the container but this has been specified relatively .. leaving only the option of playing with .content's max-size as the only way to manage this. I am sure there are other options for managing this: perhaps switching to a fixed size for the container and content. Will keep poking around to figure out ways around this.

This is really helping iron out kinks in my CSS understanding

[hnrch02]

Apologies, I didn't test the solution I posted, but removing the aforementioned line from the CSS and adding the following does the trick.

#sidebar-checkbox:checked ~ .sidebar {
  z-index: 10;
}

[laymonk]

thanks a million .. logically, I can see this working. Thanks for the suggestion .. will try that soon as I can.

In the meantime, I had looked at max-width for .container and that did not help much. But changing the .wrap to something like 75-80% worked to some degree.

But with all of these settings, including your latest suggestion, the mobile friendliness of the theme is probably impacted because as you reduce the width of the display, the content first slides under the side-bar panel before folding the lines ..

[mdo]

Feature coming in v2 with e7212c3.