Theme Ethos Woocommerce Integration Problems II

Continuation from this trend https://theme.co/apex/forum/t/theme-ethos-woocommerce-integration-problems/66310/11

At this stage am just setting up the feel and look of the shop as well the post; for the shop I would use the sidebar but not for the post, is this possible? and for the post I would like to have the content as close of the top as possible, hence
.x-conntainer>.offset { margin: -18px auto; } I did try to use negative margin but doesn’t work properly; also for the video content section I would like to use width 100% but this configuration of the general theme affect the shop as well…

Hi @germancordido,

Thank you for writing in,

Please navigate to Theme Options > Layout and Design and set the Content Layout to Content Left, Sidebar Right




This should not affect the layout of your pages if you’re using any of the Blank - No Container or Blank - Container page template.


Then navigate to Theme Options > Blog and set the Layout to Fullwidth.

Then navigate to Theme Options > WooCommerce and set the Shop Layout to Use Global Content Layout

Please do mind that anything beyond this requires customization and that would fall outside of the support that we can offer.

Please update that to this,

.single-post .x-container .offset,
.single-post .x-container .entry-content{
	margin-top: 0px !important;
} 

Regarding the video, please set your video embed code width property to 100%, then remove this 900px max-width you applied on the column where the video is placed.

Hope it helps,
Cheers!

Thanks for your help Friech, so far so good.

I still have some issues with the full width, the shop and product pages are ok with this css:
woocommerce .x-container.max.width.main { max-width: 900px;}
However the Cart and Checkout gets the 100% full width, I would like to keep it as the shop and products pages

Hi @germancordido,

Please update that CSS to this:

.woocommerce .x-container.max.width.main,
.woocommerce-cart .x-container.max.width.main,
.woocommerce-checkout .x-container.max.width.main {
	max-width: 900px;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

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