width quick css two side bars

[dannicastanheira]

Hello,

Need to add some other to default width options to the sidebars via quick css. Does anyone as done this before? You can check the attached file.

Attachments:

You must be logged in to view attached files.

[Radu]

Try like this

COPY CODE

@media (min-width: 768px) {

	.template-page.col-sm-push-3 {
	left: -moz-calc(25% - 1px);
	left: -webkit-calc(25% - 1px);
	left: -o-calc(25% - 1px);
	left: calc(20% - 1px);
	}

@media (min-width: 768px)
	.col-sm-pull-9 {
	right: 80%;
	}
	.col-sm-3 {
	  width: 20%;
	}
}

The sidebar will have 20% and main 80%, u can edit as you wish.

Cheers

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

What support service includes ? What not ?

[mladas]

I am trying to adjust the responsiveness in a manner that “places sidebar below main content” for tablets – in EXACTLY the same manner that it is done for mobile devices. Specifically, tablet sidebar content becomes much to narrow and I would simply like it to show the same as mobile (below main content)

That said, I have searched pretty extensively and only come up with the following support thread, but all of the links no longer exist. I have also looked through responsive.css, etc but with no luck. Thank you

OCTOBER 24, 2013 AT 01:14 #5004

SQadmin
KEYMASTER
Posts: 4075
Hi Anchora, If I understand correctly you want something like this: http://d.pr/i/bIeZ .
It’s ok to have 3 columns but it’s not a good SEO practice to put sidebars before main content so, as a basic structure we sugest to have:

1). In buddypress-before-wrap.php:

http://d.pr/n/bA2k

2). In buddypress-after-wrap.php:

http://d.pr/n/hZOx

I’m usin pull and push classes to switch columns at large resolutions. In mobile view these columns become 100% width and the main content is in its place, before the sidebars like this: http://d.pr/i/gPq4

If you like to hide sidebar at small(mobile) resolution you need to add “hide-for-small” class to the sidebar.

Regards,
Robert

[Radu]

Hi,

Can you provide the url ?

to understand : you want to have phone layout responsive behaviour on tablet ?

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

What support service includes ? What not ?

[mladas]

the url is nautility.com

the attached picture describes the issue (I think)…

Thank you much in advance!

Mike

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

Please provide a dummy account to can see pages and to test the css fix

Cheers

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

What support service includes ? What not ?

[mladas]

This reply has been set as private.

[Radu]

Hello,

Use this css snippet.

COPY CODE

@media (max-width: 991px) {
	.template-page,
	.sidebar,
	.sidebar-extra {
	display:block;
	width:100%;
	}
	.template-page.no-sidebar .wrap-content,
	.template-page.col-sm-push-3 .wrap-content,
	.template-page.tpl-3ll .wrap-content,
	.sidebar-main.sidebar-3rr .inner-content,
	.sidebar-extra.sidebar-3lr .inner-content,
	.sidebar-extra.sidebar-3rr .inner-content,
	.sidebar-extra.sidebar-3ll .inner-content,
	.template-page.tpl-3lr .wrap-content,
	.template-page.tpl-3rr .wrap-content,
	.sidebar-main.sidebar-3lr .inner-content,
	.sidebar-main.sidebar-3ll .inner-content,
	.sidebar-main.sidebar-3rr .inner-content,
	.sidebar-extra.sidebar-3ll .inner-content,
	.template-page .wrap-content,
	.sidebar-left .inner-content,
	.template-page.tpl-right .wrap-content,
	.sidebar-right .inner-content {
		padding-left: 0;
		padding-right: 0;
	}
	.template-page,
	.template-page.tpl-left,
	.template-page.tpl-3ll,
	.sidebar-extra.sidebar-3ll,
	.sidebar-extra.sidebar-3lr,
	.sidebar-extra.sidebar-3rr,
	.sidebar-right,
	.sidebar-main.sidebar-3rr,
	.sidebar-left,
	.sidebar-extra.sidebar-3ll,
	.sidebar-main.sidebar-3ll,
	.sidebar-main.sidebar-3lr,
	.sidebar-main.sidebar-3rr { border: 0; }
}

Add the code to kleo-child/style.css or in Wp-admin -> Theme Options -> General Settings -> Quick CSS

It should work, i tested.

Cheers

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

What support service includes ? What not ?

[mladas]

Absolutely fantastic support. Thank you very, very much!

[Author]

Posts