LoginSecure Slideshow: Padding is not set but there is still padding?
This is most likely a template issue. Most template frameworks and page builders have options built in to remove margins and padding from the surrounding div and in most cases, they automatically add margin and padding when you have not specifically set it. This is definitely true when you have a template that is not developed on top of a framework.
Troubleshooting steps
STEP 1A: Removing Margin and Padding via template framework or page builder.
- Open your template framework or page builder and locate the HTML element that holds the slideshow.
- Now open the options of the element and search for the margin and padding settings.
- Set both to 0px.
- Can't find margin and padding settings then please continue to step 2 or create a ticket.
- Now open the options of the element and search for the margin and padding settings.
STEP 1B: Removing Margin and Padding via a custom .css file in template.
- Almost every template has a location that allows you to add a custom .css (or .scss) file. Check your template supplier for the correct location of this file and in some cases, you have to create it manually. For instance by the default Joomla! Protostar template you need to create a user.css file inside the templates "css" folder. Now, this can be different from your template so check your template supplier instructions.
- After having located/created the custom .css file you can open it directly in Joomla!.
- In the Joomla! Administrator go to Extensions > Templates > Templates.
- Click on your template name this will open up all the files of the template.
- Now go to the custom .css file and open it.
- Collect the ID or CLASS name of the surround div of the slideshow or one of its parents.
- You can get this ID or CLASS name by utilizing your browser's Developer Tools. If you are not familiar with any of the previous terms than please create a ticket.
- Now create the CSS code (look at below examples) into the custom .css file and save.
(change surround/surround wrapper div to your template classes/ids).
-
- Surrounding DIV with ID: surround
- #surround{margin: 0; padding: 0;}
- Surrounding DIV with CLASS: surround
- .surround{margin: 0; padding: 0;}
- Surrounding DIVs parent with ID: surround-wrapper
- #surround-wrapper div{margin: 0; padding: 0;}
- Surrounding DIVs parent with CLASS: surround-wrapper
- .surround-wrapper div{margin: 0; padding: 0;}
- Surrounding DIV with ID: surround
- After having located/created the custom .css file you can open it directly in Joomla!.
- If you don't feel comfortable to add CSS then you can also opt for a HTML Override and forcing no margin and padding by utilising the LoginSecure Framework functions nomargin and nopadding. See STEP 2B.
STEP 2A: Forcing no margin and padding on the HTML element via template framework or page builder.
- Open your template framework or page builder and locate the HTML element that holds the slideshow.
- Now open the options of the element and search for the setting that allows you to add a class.
- Now insert the classes "no-margin-all" and "no-padding-all".
- More info can be found here:
How to use Extra Classes for CSS Targeting? (https://loginsecure.eu/helpdesk/knowledgebase/view-article/55-how-to-use-extra-classes-for-css-targeting)
How to enable Extra Classes for CSS Targeting? (https://loginsecure.eu/helpdesk/knowledgebase/view-article/56-how-to-enable-extra-classes-for-css-targeting)
- More info can be found here:
- Now insert the classes "no-margin-all" and "no-padding-all".
- Can't find class settings then please continue to step 2B or create a ticket.
- Now open the options of the element and search for the setting that allows you to add a class.
STEP 2B: Forcing no margin and padding on the HTML element via a template override.
We are not going to go in debt on how to create the override as you can find this information easily at this Joomla! page (https://docs.joomla.org/J3.x:How_to_use_the_Template_Manager).
- In your template override locate the surround div of the slideshow.
- Add here the classes "no-margin-all" and "no-padding-all" and press save.
Hopefully, the above steps solved your issue but if not then do not hesitate and please create a ticket so that we can help you get it solved a.s.a.p.