Page Having No Margin Topic is solved

This forum is for general questions about extensions for Joomla! 4.x.

Moderators: pe7er, General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
etpourquelque27
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Oct 12, 2021 9:31 am

Page Having No Margin

Post by etpourquelque27 » Sun Nov 27, 2022 3:27 am

There is one page on my site having no left and right margins regardless of browsers used. If I set the row to "Fluid" in backend or include CSS padding within "Addon", the page is still not formatted. In order to view the problem, please click on FYI link in main menu. An image is attached as illustration.
Gratitude is offered in advance for your support.
page-1.jpg
You do not have the required permissions to view the files attached to this post.
Last edited by toivo on Mon Nov 28, 2022 6:02 am, edited 1 time in total.
Reason: mod note: moved from 4.x General Questions

User avatar
toivo
Joomla! Master
Joomla! Master
Posts: 15491
Joined: Thu Feb 15, 2007 5:48 am
Location: Sydney, Australia

Re: Page Having No Margin

Post by toivo » Sun Nov 27, 2022 3:57 am

etpourquelque27 wrote:
Sun Nov 27, 2022 3:27 am
In order to view the problem, please click on FYI link in main menu.
What is the URL of this website?
Toivo Talikka, Global Moderator

etpourquelque27
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Oct 12, 2021 9:31 am

Re: Page Having No Margin

Post by etpourquelque27 » Sun Nov 27, 2022 4:33 am

I hope you don't mind if I send it to you privately?

User avatar
toivo
Joomla! Master
Joomla! Master
Posts: 15491
Joined: Thu Feb 15, 2007 5:48 am
Location: Sydney, Australia

Re: Page Having No Margin

Post by toivo » Sun Nov 27, 2022 5:06 am

Please don't.
Toivo Talikka, Global Moderator

etpourquelque27
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Oct 12, 2021 9:31 am

Re: Page Having No Margin

Post by etpourquelque27 » Sun Nov 27, 2022 5:08 am

Sorry, I send it by accident before I read your last message.

etpourquelque27
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Oct 12, 2021 9:31 am

Re: Page Having No Margin

Post by etpourquelque27 » Sun Nov 27, 2022 5:10 am

Did you mean: "You don't mind", or "Don't send it"?

User avatar
toivo
Joomla! Master
Joomla! Master
Posts: 15491
Joined: Thu Feb 15, 2007 5:48 am
Location: Sydney, Australia

Re: Page Having No Margin

Post by toivo » Sun Nov 27, 2022 5:13 am

I meant "Don't send it" - support and assistance here should be open to every member of the forum.
Toivo Talikka, Global Moderator

etpourquelque27
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Oct 12, 2021 9:31 am

Re: Page Having No Margin

Post by etpourquelque27 » Sun Nov 27, 2022 5:19 am

Thank you for your enlightenment.

etpourquelque27
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Oct 12, 2021 9:31 am

Re: Page Having No Margin

Post by etpourquelque27 » Sun Nov 27, 2022 6:22 am

Here is the complete CSS of the FYI page.

.sp-simpleportfolio .sp-simpleportfolio-filter {
text-align: left;
margin-bottom: 43px;
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li {
margin: 0;
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a {
font-size: 16px;
color: #222;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
display: inline-block;
cursor: pointer;
position: relative;
padding: 0 15px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
background: transparent;
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li.active > a {
color: #19B861;
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a:hover {
color: #19B861;
}

.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-overlay-wrapper .sp-simpleportfolio-overlay {
background: rgba(25, 184, 97, 0.7);
}

.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-btns a {
display: inline-block;
padding: 0;
letter-spacing: 0;
vertical-align: middle;
cursor: pointer;
background: transparent;
text-decoration: none;
text-transform: uppercase;
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
color: #fff;
font-size: 16px;
border: 1px solid #fff;
-webkit-border-radius: 50%;
border-radius: 50%;
display: inline-block;
margin: 0 3px;
-webkit-transition: 0.5s;
transition: 0.5s;
}

.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-btns a:hover {
background-color: #03833D;
border-color: #03833D;
color: #fff;
}

etpourquelque27
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Oct 12, 2021 9:31 am

Re: Page Having No Margin

Post by etpourquelque27 » Sun Nov 27, 2022 6:59 am

I have managed to fix it by adding padding as opposed to margin.
Here is my question:

When I use margin parameters, the page is not formatted. If I use padding, that works fine. Why is that?

Please see attached image. Thank you!
You do not have the required permissions to view the files attached to this post.

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

Re: Page Having No Margin

Post by Pavel-ww » Sun Nov 27, 2022 7:04 am

etpourquelque27 wrote:
Sun Nov 27, 2022 3:27 am
If I set the row to "Fluid" in backend ...
I think you should set paddings in this row's settings or via css

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

Re: Page Having No Margin

Post by Pavel-ww » Sun Nov 27, 2022 7:14 am

etpourquelque27 wrote:
Sun Nov 27, 2022 6:59 am
When I use margin parameters, the page is not formatted. If I use padding, that works fine. Why is that?
If simplified, margins are used to repel one element from another. If you install the same margins, then you balance the position of the element. Since your block has 100% width, nothing happens. For indentes inside the element, paddings are used, as this does not affect the external size and position of the element.

etpourquelque27
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Oct 12, 2021 9:31 am

Re: Page Having No Margin

Post by etpourquelque27 » Sun Nov 27, 2022 8:02 am

Thank you so much for a clear explanation. I had never thought of margin and indents within the CSS context as you have put it. Your explanation is a paradigm shift for me. I have to keep your note in my archive. Again, thank you a bunch.

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

Re: Page Having No Margin

Post by Per Yngve Berg » Sun Nov 27, 2022 11:05 am


etpourquelque27
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Oct 12, 2021 9:31 am

Re: Page Having No Margin

Post by etpourquelque27 » Mon Nov 28, 2022 1:02 am

Thank you for your input. However, I have already resolved this issue.


Post Reply

Return to “Extensions for Joomla! 4.x”