Easy Single Column Page/s, Just  minor Changes to The Css

As you can see, this page is single column so it's ideal for a sales page, or perhaps something like an Amazon store. The custom css used on the "standard" setup with two columns is show below. Then there is the modified css with a description of the changes made, and what they do.


#PageWrapper{background-color:transparent;}
#Header{width:100%; max-width:1150px;}
#HeaderWrapper {background:#000; height:58px;}
#FooterWrapper {background-color:#000;}
#ColumnsWrapper {background:url()#fff; width:100%; max-width:1150px;}
#ContentColumn .Liner {padding:0 5%; background:url(); border-top:transparent;}

@media only screen and (max-width: 768px) {
.desktopOnly {display: none !important;}
.mobileOnly {display: block !important;}
.ResponsiveNavWrapper .ResponsiveNavButton {color:transparent !important;}
}

The Revised CSS to Get a Single Column



#PageWrapper{background-color:transparent;}
#Header{width:100%; max-width:1150px;}
#HeaderWrapper {background:#000; height:58px;}
#FooterWrapper {background-color:#000;}
#ColumnsWrapper {background:url()#fff; width:100%; max-width:1150px;}
#ContentColumn .Liner {padding:0 5%; background:url(); border-top:transparent;}

#NavColumn{display:none;}
#ContentColumn {width:80%; float:none; margin:0 auto;border:1px solid red; padding:20px;}

@media only screen and (max-width: 768px) {
.desktopOnly {display: none !important;}
.mobileOnly {display: block !important;}
.ResponsiveNavWrapper .ResponsiveNavButton {color:transparent !important;}
.ContentColumn {width:95%; float:none; margin:0 auto; padding:0;}
}

There are only two lines added to the desktop view css...

#NavColumn{display:none;}

#ContentColumn {width:80%; float:none; margin:0 auto;border:1px solid red; padding:20px;}

The first hides the Nav Column. The second increases the width of the Content Column to 80%, removes the float, and centers it. You don't even need to add that padding, as the only reason I did that is because I put a red border around the column to show where it is... you would probably not need or want to do that.

And in the mobile view, there is only one line added...

ContentColumn {width:95%;padding:0;}

Because this view is for single narrow column on smaller devices, we want it to be closer to fullwidth. That 20px padding that I added on desktop view is removed here. 

Add That CSS to the Head Section of the page

As you have your base custom css set up in Site Designer, these changes are added to the page you want to make single column, do not touch Site Designer. Add this to the head section of the page, in the "This Page Only" part....


<style>
#NavColumn{display:none;}
#ContentColumn {width:80%; float:none; margin:0 auto;border:1px solid red; padding:20px;}

@media only screen and (max-width: 768px) {
.ContentColumn {width:95%; float:none; margin:0 auto; padding:0;}
}
</style>

Comments

Have your say about what you just read! Leave me a comment in the box below.