Reordering HTML content with CSS (based on underscores theme)

When it comes to web development, i’m still getting my chops, but I’ve had a site idea for a while that I’ve wanted to implement, and I finally decided to start it using WordPress as a CMS (as I had some familiarity with it). I used the _S (or underscores) theme for my base template, and liked that as a starting point. One of the bigger problems I had with it however, was ensuring that when the screen size was too small to place my sidebar next to my content,  that the side bar move above the content. I accomplished that with the help of this post: http://www.jtudsbury.com/thoughts/rearrange-div-order.php Here’s what that looks like in the styles.css of your underscores theme:

 


/*--------------------------------------------------------------
14.0 Structure
--------------------------------------------------------------*/

/*
Theme Name: Forme
Layout: Sidebar-Content
*/

.content-area {
float: right;
margin: 0 0 0 -25%;
width: 100%;
}
.site-main {
margin: 0 0 0 25%;
}
.site-content .widget-area {
float: left;
overflow: hidden;
width: 25%;
}
.site-footer {
clear: both;
width: 100%;
}
.widget-area ul {
list-style-type: none;
}

/*————————————————————–
Here Comes the screen size change
————————————————————–*/

@media all and (max-width:650px){
.site-content{
display: table;
float: none;
}

.site-content .widget-area {
float: none;
display: table-header-group;
}
.site-main {
margin-left:25px;
}

Above the screen change comment we’re simply inserting the sidebar to the left of the content, and below the screen change comment we’re using the css “diplay: table” property to define a table, and then move the .widget-area class content above the site, finally, we’re changing the margin-left attribute to make the main content line up better with the position of the sidebar & widgets.




Leave a Reply

Your email address will not be published. Required fields are marked *