Altering the page layour widths

[snakebyte99]

Hi,

I am using the page template with left sidebar and rightsidebar. I think its named “3 column middle” in your kleo layout options.

I want to change the widths of each column from 25% 50% 25% to 20% 45% 35%.

What is the best way to go about this?

I have attached an example as of mock upof how I want it to look. This was done in CSS but is broken when you resize.

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

Hi,

Please try the below CSS in your KLEO Child theme’s style.css, make sure to completely purge any caching and your front-end cache to see the changes.

COPY CODE

@media screen and (min-width: 800px) {

.sidebar.sidebar-main.col-sm-3.col-sm-pull-6.sidebar-3lr {
    width: 20% !important;
}
.template-page.col-sm-6.col-sm-push-3.tpl-3lr {
    width: 45% !important;
}
.sidebar.sidebar-extra.col-sm-3.sidebar-3lr {
    width: 35%;
}
.template-page.col-sm-push-3 {
    left: -moz-calc(20% - 1px);
    left: -webkit-calc(20% - 1px);
    left: -o-calc(20% - 1px);
    left: calc(20% - 1px);
}
.col-sm-pull-6 {
    right: 45%;
}

}

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[snakebyte99]

Hi works perfectly thank you

[Kieran_SQ]

Glad I could help 🙂 Feel free to open a new ticket any time with any other questions and we’ll be happy to assist.

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Author]

Posts