Slider on the site and in the preview looks different

Design problems

Text color, background look different

Many people use CSS codes with !important property, or other strong CSS codes without specifying which part of the website should it affect. It is not a good thing, because it overwrites the proper codes. To find out what codes affect the parts of your slider check out this documentation.

Bold fonts aren't bold anymore

If you only have problem with the boldness of your font and you are using Google Fonts, the problem can be that the Google Font you're using is called in by something else (theme or another plugin) of your site. It can happen that their call overrides ours, because Google Fonts have an exact name, and there can only be one font with that name on your site.

The reason this is related to the boldness, because each font can have different font weights, and if the theme/plugin calls in the font with a different weight, that will override ours. So the solution is to either remove or modify the other Google Font call to call in the font weight you need.

Buttons have a "sub-button"

There are themes, which use autop functions in their content, which means that they add <p> and maybe <br> tags everywhere in the code. You can check this out by looking at the code of your slider, by right clicking on the slider, and Inspect element. If there are empty <p></p> tags in the slider's code, then it must be the case. You can try out to put the slider's shortcode between [raw][/raw] tags like this:

[raw][smartslider3 slider="1"][/raw]
	

If it doesn't work, try the iframe shortcode publishing.

[smartslider3 slider=71 iframe="autop"]
	

If that would have an issue too, in most cases you can remove this from your theme by adding this code into the first line of your header.php file:

<?php remove_filter( "the_content", "wpautop" ); ?>
	

But if this won't work either, then you should contact your theme's developers to give you a solution for this issue!

You could also try to search within your theme's files for this code. If you have a page builder, search within the files of that code too. You should search for the word "autop", which will probably point you to the right location and you could try to remove this code from your theme (or page builder). 
Please note, that we do not support theme/page builder customization, so either you or your theme/page builder developer has to resolve this issue!

SiteOrigin page builder

If you're using SiteOrigin page builder, they have this autop function, too. It's used automatically in their Text widget, but we have our own widget and you should use that instead.

If you need to use their text widget for any reason, then it has an Automatically add paragraphs option, which you should disable.

Text remains bold/italic

This problem happens when you used the Text layer, or some other layer where the <b> or <i> tags were entered manually, and were not closed properly. Make sure that every opened <b> or <i> is followed by a </b> or </i> that closes them.

If you're using more HTML tags, then they should be closed in the opposite order they were opened. E.g.:

<b><i>This text is bold and italic. There's also a <a href="#">link</a>.</i></b>
	

Notice how the <b> tag, that was opened first is closed last.

Texts are too large on mobile

If you used the size modifier to make the fonts smaller or larger on mobile, but they don't look like the setting you made, it can happen that your theme is overriding your settings with some code. You should check it out using your browser's developer tools.

Animations aren't correct

If the slider's animation looks weird or the slider doesn't load into it's correct place, then the problem can be that there are CSS transition codes coming from your theme, targeting the slider or its layers. Find these codes and remove them using using your browser's developer tools.

This is a known issue with MageeWP theme. Find these codes in the style.css file and remove them.

:hover {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
	

Slider doesn't resize correctly

Theme/page builder caused problems

JavaScript or CSS animation modifies the slider's parent

Sometimes themes and page builders are using JS codes or CSS animations to modify how a place on your website looks like. If you put our slider into that place, this could cause slider size calculation issues issues.

You can confirm that you have this issue, if resizing the browser will make your slider jump into its correct placement.

Go to Slider Settings → Developer tab and paste the following code to the JavaScript callbacks  field:

_N2.r('#n2-ss-10', function(){
    setTimeout(function(){
        _N2['#n2-ss-10'].responsive.doResize();
    }, 300);
});
	

This code will trigger the resizing of our slider 300ms after your page finished loading or the browser is resized. Usually 300ms is enough, but you can try to change this value. You could try to increase it to for example 2000ms, just to see if this is the solution for your problem, because after 2 seconds it should surely work, if this is the solution. Then you could try to decrease this value until it still works.

In WordPress or Joomla with a JavaScript code that runs on all your pages, you could use a code like this too:

window.onload = function(){
	setTimeout(function(){
		var sliders = document.getElementsByClassName('n2-section-smartslider'), id = 0;
		for(i = 0; i < sliders.length; i++) {
			  id = sliders[i].dataset.ssid;
			  _N2.r('#n2-ss-' + id, function() {
				  _N2['#n2-ss-' + id].responsive.doResize();
			  });
		}
	}, 300);
}
	

This way you won't need to write this code to each slider separately, as the IDs will be identified automatically.

Unclosed float CSS

If there are unclosed float CSS codes on your page, those elements doesn't have widths in the regular way, so they can mess up width calculations.

Solution: Go to Slider Settings → Developer tab and turn on Clear before .

Configuration issues

Layout

The size your slider has on the frontend is defined by your layout, which can be Boxed, Full width or Full page Pro

If you want your slider to fill up the whole browser width, make sure to use Full width and not auto. Similarly, if you want the slider to only fill up its parent, you should select Boxed.

Fill mode

It's based on the Slider settings → Slides tab →Slide background image fill option how your images look like in the slider. By default the Fill option is used which will make the image as big as it needs to be to cover the whole slider.

If you have Center selected, that is not responsive, it will just display your background images with their original sizes.

If you have Fit selected, this mode works that way that it adjusts the image within the slide to ensure that the image is always fully visible and is never cropper. If this mode causes your problem, you should either switch to Fill or make sure that your slider and images have the same size.

The fill mode option is available at each Slide. If it's correct on the slider level, make sure to check it at the slide.