Kim Kwanka

Glad I could help, take care ??

You have to check all the media-queries in your style.css, they look something like this:

@media (max-width: 767px) {
...
}

Now look through each of them and check to which weight % your .site-content is set and change accordingly. You will have to look for these:

.sidebar .site-content {
	width: 65%;
}

and change them to 100%. You might have to add “!important” to make it work:

.sidebar .site-content {
	width: 100% !important;
}

The alternative is to copy the media queries from your style.css into your custom css code, remove everything but the parts that starts with

.sidebar .site-content {

and add the 100% width there. Then I guess you wouldn’t have to add the “!important” since your custom css gets imported last so that it overwrites the rules set in style.css.

Regards,

Kim

With custom css alone you probably won’t be able to change the order, but play around changing “left” to “right” and vice versa.

.logo {
float: left;
}

.social-icons{
float: right;
}

.search-block{
float: right;
}

But for changing the order you will probably have to change the php/html directly.

Regards,

Kim

It’s all in the <div class= “header-content”>…</div>.

To reduce the height change the padding from 20px to something else:

.header-content {
    padding: 20px 0;
}

To rearrange the stuff you have to look at the class .logo, .social-icons and .search-block.

Atm the logo is “floating left” the other two are floating right.

You have to play around a little with float: right; and float: left; and maybe rearrange the order in the actual html/php if changing the floats isnt enough.

Hope that gives you a little pointer on where to start =)

Regards,

Kim

If I assume correctly you want to left-align your main content area.

If so, you have to set

.site-content{
    float: left;
}

But then your sidebar will be on the right side instead of left.
This is because in your html the sidebar comes after your main content area. So if you wanted to have it on the left again, you’d have to move their html around.

Regards,

Kim

You’re welcome ??

This video tutorial guides you through the process of converting a finished skeleton website(another framework similar to bootstrap but much leaner) into a working wordpress theme. It should help you understand the basics even though it’s not specifically for bootstrap:

https://webdesign.tutsplus.com/tutorials/skeleton-to-wordpress-getting-up-and-running–webdesign-7943

You might also want to checkout “starter” themes like Bones, BlankSlate or Underscores to get an understanding of the underlying wordpress structure.

Best regards,

Kim

Well, it IS possible but it won’t be as easy depending on what you want to achieve.

“col-md-4” is the sidebar’s grid class which roughly means “It’s a column and on medium sized screens it will take up 4 spaces.

This is a basic responsive grid which makes the auto adjusting on smaller screens possible. This is great an all but that makes it harder to finetune.

You could change the “col-md-4” to “col-md-3” or 2 and it would be smaller, but you have to change the content’s class from col-md-offset-4 to col-md-offset-3 or col-md-offset-2 accordingly. Then you might have to adjust the
font-size of .site-title
which is harder since you will have to edit the css in all the media-queries.

This should do it:

.entry-title {
    font-size: 16px;
}

If you set your “site-navigation” class’ property display to none (CSS) it won’t show. This might be the easiest way since you won’t have to delve into the actual code:

.site-navigation {
    display: none;
}

Enter it into the “Custom CSS” part of your themify dashboard and you should be good ??