Advertisement

How to set the gap/distance between two sections? Topic is solved

General questions relating to Joomla! 5.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
Post Reply
antonios
Joomla! Explorer
Joomla! Explorer
Posts: 360
Joined: Fri Jun 20, 2008 2:22 pm

How to set the gap/distance between two sections?

Post by antonios » Mon Jan 13, 2025 1:16 am

Hi,
how can I make sure that the spacing between the news section ("Novedades" in the image) of my site https://permacultura-es.org/Joomla4/, and the section right below this (where 4 round images are shown) is always constant and short?
web.png
I tried to manipulate the margin-bottom parameter of the "Novedades" section but nothing happened
You do not have the required permissions to view the files attached to this post.

Advertisement
User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 31577
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: How to set the gap/distance between two sections?

Post by Per Yngve Berg » Mon Jan 13, 2025 5:15 am

It's the length of the right column that make it long.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1811
Joined: Tue Jun 30, 2020 12:17 pm

Re: How to set the gap/distance between two sections?

Post by Pavel-ww » Mon Jan 13, 2025 6:35 am

antonios wrote: Mon Jan 13, 2025 1:16 am
I tried to manipulate the margin-bottom parameter of the "Novedades" section but nothing happened
Hi.
margin-top: -2100px and other magrin manipulation will not solve the problem. Remove this.

Create an override of the featured articles layout (php editing) by adding your own new module position there.

An alternative option is to use a javascript for the transfer of DOM elements to the place you need

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 360
Joined: Fri Jun 20, 2008 2:22 pm

Re: How to set the gap/distance between two sections?

Post by antonios » Mon Jan 13, 2025 10:49 am

Per Yngve Berg wrote: Mon Jan 13, 2025 5:15 am It's the length of the right column that make it long.
Hi @Per,
as far as I understand it, yes the right side bar has quite many things in it and makes the page long. However the
"row" that I would like to have closer to the "Novedades" row is within the same section where "Novedades" is, so it should not be a problem to have it closer.
Actually the rows which come before the row in question, are all spaced quite close to each other, automatically.

By the way I am using the Astroid framework to organize the page .

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 360
Joined: Fri Jun 20, 2008 2:22 pm

Re: How to set the gap/distance between two sections?

Post by antonios » Mon Jan 13, 2025 10:54 am

Pavel-ww wrote: Mon Jan 13, 2025 6:35 am
antonios wrote: Mon Jan 13, 2025 1:16 am
I tried to manipulate the margin-bottom parameter of the "Novedades" section but nothing happened
Hi.
margin-top: -2100px and other magrin manipulation will not solve the problem. Remove this.
Hi @Pavel-ww
yes, I realize that margin-top -2100 is not useful because it makes the row farther away from the footer, but nothing to make it closer to where I want it.
However, the rows which come before the row in question, are all spaced quite close to each other, automatically.
I wonder why this is not happening with this last row.
Pavel-ww wrote: Mon Jan 13, 2025 6:35 am Create an override of the featured articles layout (php editing) by adding your own new module position there.

An alternative option is to use a javascript for the transfer of DOM elements to the place you need
Is there any tutorial available on how to achieve this?

lefabdu51
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Mon Jan 13, 2025 1:50 pm

Re: How to set the gap/distance between two sections?

Post by lefabdu51 » Mon Jan 13, 2025 1:58 pm

you are with astroid template.
is your component displayed with the astroid component area in the layout tab of your style of template ?
normaly you should have this like png under :
Image
You do not have the required permissions to view the files attached to this post.

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 360
Joined: Fri Jun 20, 2008 2:22 pm

Re: How to set the gap/distance between two sections?

Post by antonios » Mon Jan 13, 2025 3:20 pm

lefabdu51 wrote: Mon Jan 13, 2025 1:58 pm you are with astroid template.
is your component displayed with the astroid component area in the layout tab of your style of template ?
normaly you should have this like png under :
Image
Yes this is what I have:
rows.png
Do you think that I should have built my layout using that "Module position" element? I probably didn't see how to create 4 columns out of it ....
You do not have the required permissions to view the files attached to this post.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1811
Joined: Tue Jun 30, 2020 12:17 pm

Re: How to set the gap/distance between two sections?

Post by Pavel-ww » Tue Jan 14, 2025 7:34 am

antonios wrote: Mon Jan 13, 2025 10:54 am However, the rows which come before the row in question, are all spaced quite close to each other, automatically.
I wonder why this is not happening with this last row.
Hi.

I hope the screenshot will explain why.
1.jpg
--

Component Area and Sidebar are columns inside the Flex container, so they always have the same height, even if in one of the columns less content than in the other.

Your modules are in another block (outside of the Component Area + Sidebar Flex container). You should move them to Component Area. I do not know if your template has a position as, for example, content bottom position, that locate inside component area. If not, you should create an override of the featured articles layout. You can find information about this in the Joomla documentation. But keep in mind that this may differ from the documentation depending on your template.

All margins you use are useless and break the layout. As far as I see, you do not remove them yet.

Judging by your screenshot from the admin panel, your template does not have a sufficiently worked out visualization of blocks and sections, and this misleads.
2.jpg
--

It would have to look like this, then you would understand
You do not have the required permissions to view the files attached to this post.

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 360
Joined: Fri Jun 20, 2008 2:22 pm

Re: How to set the gap/distance between two sections?

Post by antonios » Sat Jan 18, 2025 1:06 am

I see your point @Pavel-ww, however I didn't (seem to) create those four blocks as a section separate from the one where the Component Area + Sidebar Flex container are, but as part of it, actually as a row within that section, So I don't understand why it is not included as an area right below the Component Area. I find confusing the way this comes out displayed.

Anyway, eventually I tried to include a "Module position" row, which I see fits right below the Component Area and apparently cannot be made of a different columns size than Component Area.

There is a position named "Main bottom" and I created a module for each of the 4 blocks however when they are displayed they appear each below the next one and I wonder if there is any mechanism (css?) to allineate them on the same line.

Fortunately I eventually found a new module type derived from Astroid, which allows me to do exactly what I want to do. So I guess the problem is solved now.

Thank you all for your helpful & illustrative comments!!!

Advertisement

Post Reply

Return to “General Questions/New to Joomla! 5.x”