How to create left content, right sidebar in post template?

Support
#1

Hi. I am struggling to get my single post to have left content with a right sidebar - all using html and not the standard x template feft content right sidbar template - rather using the default X post template ( I assume). This is due to using FormidablePro to allow members to publish their own blog conent.

My issue is that the html seems to be correct but I can not get teh left and righ divs to appear side by side, using inline-block elements with set widths - 70
% left and 24% right. The post show different layouts based upon membership levels as can be seen here

https://mysalus.org/storefront/c3lx/ - basic level
https://mysalus.org/storefront/hg-wellness/ - premium level

I have tried various methods of floats ( left, right) etc. but noting seems to be working to get the two divs side-by-side and I am just checking to see if there would be any issue with the default x post template I am using? I also looked at the reference kb https://theme.co/apex/forum/t/add-sidebar-to-portfolio-posts-page-inside-renew-stack/28027/6 but I believe this is different and that the template for single post full width is different from the portfolio template?

Any insights here would be greatly appreciated.

Thank you.

#2

Hello There,

Thank you for the very detailed post information. To resolve this, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)


@media(min-width: 980px){
   #left_content{
    float: left;
   }

   #right_sidebar {
    float: right;
    margin-right: 20px !important;
   } 
}

We would loved to know if this has work for you. Thank you.

#3

Thanks for the quick response! Unfortunately adding the css did not address the immediate iss, but I think will help with the responsiveness of the elements which I am striving for.

Before I get to responsiveness, the fundamental elements are not behaving as I would expect by setting the inline-block and width properties of the containing divs.

and

Perhaps I am going about this wrong but at “full width” I can not get the two elements to appear side-by-side - either by using inline-block or float approaches. If this is not single post template related I will continue to try to figure out the html structure. Perhaps I have been looking at it too long but I can’t seem to figure it out.

Thanks for your help

#4

Hello There,

I can see that you have used content band. Please be advised that you can insert a row and several columns in the content band. The css should not be necessary from the start if you have followed how to create a content band, row and columns layout in the page.

Are you using Visual Composer when you have inserted the Content band? Please check this documentation: https://visualcomposer.io/docs/content-elements-structure/row-options/, https://visualcomposer.io/docs/content-elements-structure/

If you are using the native X theme shortcodes, you can check this as well: http://demo.theme.co/integrity-1/shortcodes/content-band/, http://demo.theme.co/integrity-1/shortcodes/container/, http://demo.theme.co/integrity-1/shortcodes/columns/

Hope this helps.

#5

Thank you for the references. Got the layout working in full width. Will now look at the break points and follow your suggestion with css for responsive.

#6

You are most welcome. :slight_smile:

#7

Hi. i am trying now to get the post layout to be responsive. I have added the above css with mods to try to get the left and right segments to go to 100% width on the break-point at 908px - but that is not happening as can be seen here https://mysalus.org/storefront/mysalus-p-b-c/

@media(min-width: 980px){
#left_content{
float: left;
width: 100% !important;
}

#right_sidebar {
float: right;
margin-right: 20px !important;
width: 100% !important;
}
}

For the desktop I have my #left_content set to a width of 71% and #right_sidebar set to a min-width of 25% which seems perfect for desk-top but then when collapsing to below 980px the elements are not resizing to 100% width of the view screen.

Not sure what I am missing here?

As always, appreciate your help

#8

Hi there,

Since you are trying to target the smaller screens than 980, instead of using min-width, try using max-width in the media query.

To learn more about CSS media query, please check this link: https://goo.gl/L3ZHNg

Hope this helps.

#9

Thank you for the quick reply and css media reference. Unfortunately after trying several changes including changing to max-width did not help. It appears that the @ media css in the cutomizer css is not taking affect on the page as I can see with the phone-size that the style is not changing in the DOM - both elements appear to be retaining their page styling.

Thoughts on what to try next?

#10

Hi @dsthompson,

These are the correct ID selectors,

#sf_left_content

#sf_right_sidebar

and not these

#left_content

#right_sidebar

It’s the reason it’s not taking effect. And please change the float value to none. Like float: none; since it’s meant to be full-width (block type). This is the correct one,

@media(max-width: 979px){
#sf_left_content{
float: none !important;
width: 100% !important;
}

#sf_right_sidebar {
float: none  !important;
margin-right: 0px !important;
width: 100% !important;
} 
}

Thanks!

#11

Thanks for the quick response. I had already made the changes to the selectors sf_ after posting, hoping that using selectors without the prefix was the issue, then got distracted before updating here.

Any way the float: none makes sense and have applied the change you suggest. Chrome was part of my problem not seeing changes but I can now see them in Firefox (for some reason - even after clearing browser cache’s).

Still the sf_left_content appears to ignore the width: 100% and appears to remain at 74%. I am wondering if this is due to having tabbed content in the sf_left_content div wrapper?

? Screenshot attached

Getting very close!

#12

Hi there,

I tried the code that @Rad provided and it should work fine. It could be that there are some CSS errors in the codes you have in the Global CSS that is why is it not working as expected.

To confirm that, please copy all your CSS codes to the textbox here: http://csslint.net/

It should provide you some information if there are some CSS errors that needs some fixing.

Hope this helps.

#13

Thank you for the reply. Ran my css through the diagnostics. It found a couple errors that I fixed. Unfortunately that did not fix the issue.

#14

Hello There,

Please provide us access to your site so that we can inspect all your custom css. There might be some errors or broken curly braces that you haven’t noticed yet. We need to take a closer look.

Thanks.

#15

Will do so now thanks

#16

Hi,

There is a missing close bracket in your css code. I went ahead and fix it then added the code that my colleague provided above.

It now works as intended.

Kindly check in your end.

Thanks

#17

Thanks so much. Just checked in it is indeed fixed. Guess my tired eyes are not seeing well.

Really appreciate all the X team support!

#18

Glad to hear it’s sorted.

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.