Description:
I inserted a section:
I renamed the ID to section-test-ID
I renamed the Class to section-test-class
I set the Width to 90%
I set the Max-width to 1440px
On the front end, the width of the section is inherit from class: 100%
Environment info
Since the Section block is a composite element (it is essentially a main container + wrapper), the properties you apply in the advanced tab are shared between those two elements.
We automatically add a 100% width to the main container.
All sizing values are applied to the wrapper div: in this case 90% width and 1120px max-width.
I’m not quite sure what you mean by:
Defined in section-test-ID
All Cwicly styles are applied to the class and not to the ID.
In the case you don’t want those values in the block to be applied, simply removing them will suffice.
I understand now.
My issue comes from the background-color set to this section: it is applied to the full width (100%) instead of 90% or 1120px.
You can target your wrapper with relative styling to apply your desired changes.
As an alternative, you can just simply use 2 Div’s which you can style directly via block options.
For example:
The class of your wrapper will always be your section class with the -wrapper suffix, see image.
Following your answer, I looked at the Araminta’s video.
This feature is quite genius! Thank you for your advice and thank to the Cwicly team for such a great feature.
But I tested and it doesn’t fix the issue.
What hapens:
<section id=“section-test-ID” class=“section-test-class”>
section-test-class is applied:
)<div id=“section-test-ID-wrapper” class="section-test-class-wrapper cc-wrapper>"
section-test-class-wrapper is applied:
The settings set in backend is now applied, but too late! The background-color is already applied.
Use the “Relative Styles” can’t fix that!
Isn’t it possible not to share the whole properties between the two elements, but affect them only to one of the both.
This is actually the case.
Can you please confirm you removed the background-color from the section block?
Please read again, what Louis noted:
Styles are shared but the containers are not dependent on each other.
If you apply a style (no matter which one) inside the sections panel option, it gets applied tho either the main container or the wrapper, not both of them.
Let me explain the origin of the issue.
I modified the template index.
I removed the Section and the post Content.
I replace both by a Cwicly Post Content with appropriate layout (flex), sizes (100%), paddings and background.
Then the issue appeared.
For now, I will reset the template.
Thank you for all!
You can check here: alespandie
PS: I tested with Edge and the result is … weird!
Your cc-main.css file didn’t load, so default stylings, plus all of your additional stylings for your blocks didn’t apply.
You are running your site on https but the url inside your general WP options was set to http, which is an issue.
Could you please check again and tell me if there are any issues you still face?
Edit:
I just created the relative style for the section wrapper and applied a BG color.
Everything is working as intended.
Feel free to use that solution as a blueprint for your upcoming cases.
Thank you again @Marius and sorry to bother you.
In fact, I moved to https adding a certificat Let’s Encrypt. I didn’t check the changes of URL in database. Generally, all is ok but thank you for your intervention.
The issue is still there.
As you can see on display, the main background is light green, the text background is dark green but the text borders are white. They should be dark green…
My feeling is: the main rule is not to change index template main section. This is, I think, the most reasonnable rule.
I’m pretty sure you have a general misunderstanding of how the section block is working.
As long as you are not able to understand how it actually works, it’s pretty difficult to help you, to be honest.
I might be wrong, but as far as I can see, there is no issue existing.
If you want the entire sections background to be dark green, you need to remove the relative styling and change the sections BG color from the current var(--cc-color-4) to var(--cc-color-1).
If you are able to tell me in detail what you want to achieve and what the current issues are, I will try guide you and explain how it works and why it is working that particular way.
I don’t know if it is one of the reasons of my problem, but I got a flurry of error messages from the host of my site (disk full).
Therefor, I am not sure that my templates and/or my pages are correctly saved (pretty sure not).
I will fix this issue first and come back to sections: I definitively want to understand where are my problems.
I am not really a newbie and I wrote many sites before, so I think I am able to understand how sections works: such a problem will not stop me and I want to understand.
Thank you to help me in this job.
Best regards
Are you able to record a screencast, I think this is the easiest way to follow your issue.
You could tell then what the problems are, you are facing, and other people would know exactly what your steps were.
I already hat 1-2 really long topics written with Louis and if I would’ve shared a screencast first and foremost, things would have been much easier.
You know, sometimes it’s just a communication problem/misunderstanding, a quick video solves that in most cases instantly.
I’m here to help and would be happy to solve this issue with you together so you will know how to handle things properly in the future.
Thank you @Marius.
My target is to dig into Cwicly because of its hight qualities.
This is a misunderstood point about templates and the way to customize them.
If you know how they works, you will not have any trouble.
If new users don’t know and want to customize templates, they will certainly face the problem I faced.
I understood where my mistakes were, but I think that it is important to dissect them in order to avoid new users to fall into the trap.
Now, my hosting issue is fixed and I started a short report: what was my target and how I proceeded.
I will post it as soon as it is finished.
PS: I don’t feel very comfortable with video, so I prefer texts and screenshots.
Thanks for your feedback and giving some background info so I can understand your situation better.
Regarding the screencast, you don’t need to talk, it’s all about following your actions step by step to get a better idea of your issues. But of course, this is not a requirement per se.
Feel free to give us another update here as soon as you find the time, I will check regularly 
Here is the target (the page is nammed: test_1):
A light green background in template.
A page with sections that backgrounds are dark green.
Native Template and page: test_1
To reach this results, I made the following modifications in the section:
The HTML is: 7 containers before paragraph!
I wanted to reduce this number of container so I created a custom template (template_2)
template_2 and page: test_2
In this custom template_2, the only block I added is a “Cwicly post Content” with these settings:
The result is:
The HTML is:
The number of containers before paragraph is: 5
But the result is not ok.
The border of the sections of the page are full size instead of boxed and here is the problem.
This is not possible to set this issue without writing a CSS code for each section of the page.
You will see online that the background-color is set in the line:
<section id=“section-cfd48d2” class=“section-ce767b6”>
and the width is set in the line:
<div id=“section-cfd48d2-wrapper” class=“section-ce767b6-wrapper cc-wrapper”>
therefor it is not possible to set a boxed section with background-color.
It is not very important but it could be some headache…
This is why I requested to set all the properties to one of both line.
If it is to section: no problemo. The settings of the block is enough
If it is to wrapper: no problemo. The settings could be set with Relative Styles (descendant)
PS:
https://cwcl.pur-plan.com/?loginpress_code=IKdUpwNGOBJOfLi0sScldWdRBpZ9fu
Thanks a lot for this really detailed post, this helps a lot.
So as it seems, the way you went with template_2 is indeed the right one in your case.
Sections, as Louis mentioned, will have a width of 100% by default. You can’t change that within the sections block options, because the sizing options in the panel do only affect the section wrapper, see:
These 2 elements, <section> and <div> is the output of your single Cwicly section block.
If you set a background color, the styles will only apply on the <section>. This is how it works and you can’t change it for good reasons. So what you actually want in this specific scenario, is to leave the background color for the section block empty.
And, as mentioned before, setting a width of e.g. 1440px, will only affect the <div>.
As you stated in your post before, you are already aware of it, which is great.
So, if you want to apply a background on the <div> only, you need to do this via Relative Styling.
The correct way to do, is the following:
This is the same image I posted on my first answer here in this thread.
So after creating your class inside the Realtive Styling modal properly, you need to enter the editor to change styles on your section wrapper:
If done successfully, you can apply a background color to it:
You are right, it would actually require custom CSS, but since you can create your own classes in Cwicly with Relative Styling, everything can be done visually, no need to write a single line of “code”.
Hopefully I understood you right, because that’s actually the same answer I gave you in my initial reply in this thread.
If you need more help regarding this, happy to help.
@Marius, @Louis
Could you please help me again on the site.
I removed all the dark green background-color to section in page “test_2”.
I set the Index template to page “test_2”, reset the Index template, regenerate HTML and CSS, erase all historic of browsers (Chrome & Edge): the background-color is always displayed.
I think this is some cache somewhere: if it is in Cwicly, it could be a bug…
https://cwcl.pur-plan.com/?loginpress_code=IKdUpwNGOBJOfLi0sScldWdRBpZ9fu
PS: the background-color comes from class: section-ce767b6 that is the main section in the page.
This section has no background-color defined.
I found out the origin of the problem:
I have a reusable section block with a class: section-ce767b6 with the background-color that is displayed on page “test_2”.
The background-color of the reusable section block is applied.
Is this behavior is correct, it is good for me.
