user1269141 user1269141 - 1 month ago 11
CSS Question

Responsive Sidebar does not work properly in the smartphone version

I have a problem with sidebar of this page. I can not make it go under in the responsive version, especially in the smartphone version. Sidebar remains attached to the contents of the left but does not wrap

This is the link for the codepen

If codepen does not work, this is the link for the website.

archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: 350px;
bottom: inherit;
right: inherit;
clear: both;
float: left;
}


Html
there will certainly be errors because it is a copy of a source of a website wordpress.

Answer

There are a few problems here:

Your container .archive-posts-w.with-sidebar has display: table;. Change that to display: block for smaller screens (i.e. in your media query)

The CSS for the part above your sidebar should be like this (for smaller screens):

.archive-posts-w.with-sidebar .archive-posts {
    display: block;
    vertical-align: top;
    width: 100%;
}

And for .archive-posts-w.with-sidebar .archive-sidebar you have a max-width setting of 350px, also inherited from everal other rules, so change this rule (for smaller screens) to

.archive-posts-w.with-sidebar .archive-sidebar {
    display: block !important;
    position: relative;
    top: inherit;
    left: 0;
    width: 100%;
    max-width: none;/* <-- this one is changed */
    bottom: inherit;
    right: inherit;
    clear: both;
}
Comments