CSS: section margin

Margins in CSS refers to the spacing that exists around an HTML element. The margin value is the thickness of the empty space around the HTML element. A margin acts as a baseline from where the browser calculates the position of an adjacent element in a web page. These are helpful in neatly organizing our HTML elements by adding some space around them.

here is an example:

.boxBlue{
margin-top: 20px;
margin-right: 40px;
margin-bottom:40px;
margin-left:20px; }

To learn more about the CSS, refer to this: https://www.scaler.com/topics/css/

Hi Denis,

You just need to add the section right below the Header and that will be the full width section like in the project attached.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Hella,

ok I understand yout explanation.

I tried to buil the post page, adding a 2 cols grid, because using the default sidebar,
the right sidebar goes over the breadcrumb position.
I noticed that sidebar starts, from the top, immediately after the header section: see attached screenshot.
You can see all sections with different colors.

the fact is that I'd like to color (fill) the breadcrumb section, and I'd like
a 100% width section ... but in this way I am not able to do it.

thanks again,
denis

Hi Denis,

Yes, I was originally looking into the Blog template, but the problem was with the Post template. You have added the Grid with two columns and one was used as the sidebar. That caused the whole section to be stretched down. You have stretched it that way. To accommodate the height you have set, the huge bottom margin was added to the text in the first column. I have set the Grid to have only one column for the post content. The sidebar can be enabled under the Page options in the right tab. Then I have set the post section height to be right to fit the text height so there was no additional space and margin.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

this one works fine: look here

can you tell where was the bug? and how to correct it?
it was an error generated by me?

thank you,
denis

Hi Denis,

And this one?

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Hella,

I tried with your attached project, but I still get same issue.
I tried with a fresh joomla installation. look here

anyway I found the css line

.u-section-2 .u-text-2 {line-height: 1.7; margin: 34px 40px 632px 0}

in the default_styles.php file that I can edit manually via joomla administrator

thank you,
denis

Hi Denis,

Looks like some settings were strangely arranged. Please try to export the theme from this project attached. I have reset the responsive settings and changed the Grid on the Blog template.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Hella,

here is the demo: click here

thank you,
denis

Hi Denis,

Please attach your Nicepage theme exported as a Project and also provide a link to the page of your site where we could see the issue.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp