Improve The Visual Appearance Of The Article Slider Addon Lines
Fernando Bautista
Best regards, and I hope you are all well.
On my website's homepage (https://portalnews.co), I have an article module called "Business World" to display a carousel of articles. I show 16 articles, and it looks fine on desktop. However, on mobile, the lines at the top are completely stacked. I don't see how to change this.
Could you please tell me how to add more space between those lines so they aren't so close together on mobile, using some CSS code?
Thank you very much for your kind collaboration.
Mehtaz Afsana Borsha
Accepted AnswerSorry about that. If that's the case, you can set 16 articles and give them to me so I can check the problem and fix it with CSS.
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us and sorry for your issue. Could you please give me a screenshot of that portion where you want to give some space?
-Regards.
Fernando Bautista
Accepted AnswerKind regards, Mehtaz, and thank you for responding.
It's the article module on the homepage called "Business World." Since it's a carousel, I currently have 16 articles to display.
When accessing from a desktop computer, there's no problem, but when accessing from a mobile device, the lines at the top appear stacked (I've highlighted them in red in the image).
https://drive.google.com/file/d/1m2XV2kijxps6Om-kU3LKnc3oIHHW6CBx/view?usp=sharing
Perhaps the space on mobile is too small for the 16-article carousel, and the lines to move from one article to another look incorrect. A CSS code would probably fix this, but I don't know how to apply it.
Thank you for your kind collaboration.
Mehtaz Afsana Borsha
Accepted AnswerHi
You can try this CSS in your custom.css file
.sppb-addon-articles-carousel .bx-pager.bx-default-pager{
bottom: 10px !important;
}Fernando Bautista
Accepted AnswerHello, and thank you for responding.
The code didn't work. When viewing the website from a mobile device, the lines appear stacked, just like the image I shared. I cleared the Joomla and browser cache, and it still looks the same as the photo.
I added the code to the CSS code area in the template options using this resource (custom CSS):
https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta
But it doesn't work.
Mehtaz Afsana Borsha
Accepted AnswerCould you please keep a full site backup and give me your super admin access? So that I can check.
Fernando Bautista
Accepted AnswerHello, and thank you for your kind help, but no, it doesn't work.
The lines look thicker, but it doesn't allow you to view 16 articles. If I add 8 articles, they appear to be 8 distinct lines. However, when I add 16 articles, those short lines practically merge and don't allow you to view the articles individually.
Maybe this can't be fixed, and it's best to leave 8 articles. It's a shame because I need to display more than 8 (my clients ask to be on the homepage for at least a month, and by properly displaying only 8 articles, which is what it displays properly, I fall short in my service offering).
Let's leave it at that. In any case, thank you very much for your help. Maybe if you could give me some CSS code, it might work. It's really more of a visual issue than a problem with the articles addon itself.