Component column spacing Topic is solved

General questions relating to Joomla! 3.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
charli_rault
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Mon Sep 23, 2019 1:08 pm

Component column spacing

Post by charli_rault » Sun Dec 29, 2019 12:19 pm

Hi guys!

Hopefully someone can help me with this...

I have a 3 column layout and the first row turns out perfect, but the second row is "off-centre".

You can see it on my site: www.placebook.co.za

Any advice on how I can get it to line up nicely? I'm still a Joomla beginner and have tried everything that I can think of :geek:

Thank you in advance!

 
User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 38450
Joined: Sat Apr 05, 2008 9:58 pm

Re: Component column spacing

Post by Webdongle » Sun Dec 29, 2019 12:42 pm

looking at the css you have span4 but only 3 images.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

charli_rault
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Mon Sep 23, 2019 1:08 pm

Re: Component column spacing

Post by charli_rault » Sun Dec 29, 2019 12:51 pm

Thank you for responding. Can you please advise on which file I should edit? Can't figure it out...

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 38450
Joined: Sat Apr 05, 2008 9:58 pm

Re: Component column spacing

Post by Webdongle » Sun Dec 29, 2019 1:15 pm

Nope sorry, I am not familiar with the Template. It may be a setting in the Template. Perhaps ask at https://www.joomlart.com/forums/gavick ?
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

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

Re: Component column spacing

Post by Per Yngve Berg » Sun Dec 29, 2019 2:20 pm

span4 is correct (4*3=12)

The problem is the "margin-left" that make room between the items. It also comes on the 4. which will be the first on the next line.

1) You can have a <div class="row-fluid"> around every row.

2) Have a selector that overrides the left margin on every 4. item.

Code: Select all

ul.thumbnails li:nth-child(4n+0) {
  margin-left: 0px;
}

charli_rault
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Mon Sep 23, 2019 1:08 pm

Re: Component column spacing

Post by charli_rault » Sun Dec 29, 2019 3:33 pm

"WEBDONGLE": Thanks but unfortunately I don't have a subscription *free template) so can't post there...
If you have any other ideas, I would appreciate it :)

"PER YNGVE BERG": Thank you for your reply but as I'm still quite a novice with Joomla, I don't understand how to do it...
Is there an "easier" way? Something that a novice like me can manage? :-[

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

Re: Component column spacing

Post by Per Yngve Berg » Sun Dec 29, 2019 4:07 pm

Put the code into the file /templates/meet_gavern/css/override.css

charli_rault
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Mon Sep 23, 2019 1:08 pm

Re: Component column spacing

Post by charli_rault » Mon Dec 30, 2019 7:53 am

You are the absolute best!! Thank you so so much... It worked :D :D :D
Thanks for taking the time to help me. Have a great day!

charli_rault
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Mon Sep 23, 2019 1:08 pm

Re: Component column spacing

Post by charli_rault » Tue Apr 07, 2020 2:51 pm

Hey everyone! I've encountered another problem that I hope you can help with...

The fix provided by "PER YNGVE BERG" worked perfectly for only 6 items (2 rows of 3), but now that I have added another 3 items (3 rows of 3), it's not lining up nicely.

Any suggestions?

Thank you :)

charli_rault
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Mon Sep 23, 2019 1:08 pm

Re: Component column spacing

Post by charli_rault » Thu Apr 09, 2020 10:18 am

Hello!

Just bumping this post, in the hopes that someone sees it and can assist :)

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

Re: Component column spacing

Post by Per Yngve Berg » Thu Apr 09, 2020 11:09 am

It an issue with how many lines the Title of the last item of the previous line is. The last ones you added is shorter.

charli_rault
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Mon Sep 23, 2019 1:08 pm

Re: Component column spacing

Post by charli_rault » Thu Apr 09, 2020 11:35 am

Thanks for the reply. I lengthened the titles so that they all line up now.

The second and third row line up perfectly but the first row (Demo 1,2,3 and 4) seems to be a little "off"... A little more to the left than the next 2 rows

charli_rault
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Mon Sep 23, 2019 1:08 pm

Re: Component column spacing

Post by charli_rault » Thu Apr 09, 2020 1:30 pm

I've been fiddling around but can't work out how to get the second and third rows to line up with the first row...?

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

Re: Component column spacing

Post by Per Yngve Berg » Thu Apr 09, 2020 1:59 pm

Add a height to the tilte, so you can have shorter ones line up.

Code: Select all

.deal_list .deal_name {
    height: 60px;

}

charli_rault
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Mon Sep 23, 2019 1:08 pm

Re: Component column spacing

Post by charli_rault » Fri Apr 10, 2020 11:00 am

Thank you

I will just make all the titles 2 lines to make it easier in future.

My problem is that the columns aren't lining up nicely... The first row lines up perfectly, but the second (and third) row is more to the right.

I've attached a screenshot so you can see what I mean.

Thanks again for all your help!
You do not have the required permissions to view the files attached to this post.

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

Re: Component column spacing

Post by Per Yngve Berg » Fri Apr 10, 2020 11:54 am

We have already solved this:

Per Yngve Berg wrote:
Sun Dec 29, 2019 2:20 pm
span4 is correct (4*3=12)

The problem is the "margin-left" that make room between the items. It also comes on the 4. which will be the first on the next line.

1) You can have a <div class="row-fluid"> around every row.

2) Have a selector that overrides the left margin on every 4. item.

Code: Select all

ul.thumbnails li:nth-child(4n+0) {
  margin-left: 0px;
}

 

Post Reply

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