Responsive Design Tutorial

Trendy WordPress Theme – Additional Layout Tutorial

There has been some interest for Trendy WordPress Theme to come with standard layout on all browser sizes. So for all of you that would like that we decided to make one quick tutorial.

Live preview: Trendy Standard Layout

Trendy Site template has this option available for download here

 

Tutorial for WordPress Theme:

All you need to do is to log in to your WordPress Dashboard and go to the “Appearance” – “Editor”.

Inside style.css file scroll almost to the end of the file. Find these lines of code:

/* Additional large screens 1280+ */
@media only screen and (min-width: 1280px) {
.page {
width: 1280px;
}
.contentpart {
float: right;
padding-right: 0px;
}
.header {
float: right;
}
.footer {
float: left;
}
.footer .columns {
clear: both;
}
.footer .container, .bottom .container {
width: 100%;
padding:10px 20px;
}
.bottom {
width: 100%;
clear: both;
}
.bottom .columns {
float: right;
text-align: left;
}
/*nav*/
.navigation {
float: left;
}
.navigation .container {
padding: 35px 0 0;
width: 100%;
}
.navigation .container .sixteen.columns {
width: 280px;
margin: 0;
}
nav.primary ul li {
clear: both;
display: block;
width: 100%;
border-bottom: 1px solid #0e0a17;
border-top: 1px solid #281e44;
}
nav.primary ul li > a {
display: block;
padding: 0 30px;
}
nav.primary ul ul li a, nav.primary ul li a {
line-height: 39px;
}
nav.primary ul ul {
top: 0;
left: 100%;
}
}

Just remove this part of the code! Afterwards clear the browser cache and your site layout will look like in the live preview.

Hope you gonna find this useful!

2 thoughts on “Trendy WordPress Theme – Additional Layout Tutorial”

    1. Hi Olga,

      this theme is available for download in the members area. It is placed in “retired” themes section. We decided not to list it on our site any more as it is an older theme that hasn’t been updated lately. The theme is, however, fully functional and included in our WordPress plan package.

      Cheers,

      Marko

Leave a Reply to Anariel Design Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.