[Resolved] Changing how Widgets are displayed

[Jiren]

I would like to change the way the widgets on my right sidebar are displayed when I, for example, make my browser smaller or use a mobile device.

Target Site with max. resolution (look the right sidebar)

Now if you open the target site with a mobile device or even decrease window width the sidebar changes slightly. Compare that to my site, the sidebar is always “full width” if I decrease window width.

I want to have a container look like theirs. Is this possible?

[Jiren]

Can anyone help me in this case, please.

[David]

Hi there,

do you want to maintain the margins around the content as well keep the sidebar a set width ?

[Jiren]

For test purposes, yes keep margins around content.

I don‘t understand what do you mean by the second question exactly.

I just want that the sidebar has a „container“ around the content instead of full width layout, if I decrease the window width/open it on mobile devices.

[David]

If i understand correctly then try this CSS:

@media (max-width: 768px) {
    #right-sidebar {
        padding: 10px 20px;
        box-sizing: border-box;
        background-color: #fff;
    }

    #right-sidebar .inside-right-sidebar > aside {
        border: 1px solid #ccc;
    }
}

[Jiren]

Yes, you understood that correctly. It worked with the first try. Thank you very much, David and it looks awesome now.

[David]

Awesome – glad it worked!

[Author]

Posts