LoginSecure Slideshow: Margin is not set but there is still margin?

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.

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;}
  • 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.

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.


KB Article: https://loginsecure.eu/helpdesk/knowledgebase/view-article/72-loginsecure-slideshow-margin-is-not-set-but-there-is-still-margin