This topic has 8 replies, 3 voices, and was last updated 9 years by 
-
-
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.
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 solutionI 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:
2). In buddypress-after-wrap.php:
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,
RobertHi,
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 solutionthe url is nautility.com
the attached picture describes the issue (I think)…
Thank you much in advance!
Mike
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 solutionHello,
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
The forum ‘KLEO’ is closed to new topics and replies.
