Change size of an image slider

Question

I downloaded a template for my website. Demo site is HERE.

There is a picture slider in the home page which expands to the width of the whole screen. I have noticed that all the pictures in the slider are blank Articles with images specified by "Full article image" and these articles belong to a "slider" Category.
There appears to be no difference between this "Slider" category and other article categories.

I wonder how I can change the size (width and height) of this image slider such that it will not occupy the entire width of the screen?

Answer 1

The slider extends to cover the full width of the site width, which is a common use-case for home-page slideshows.

If there aren't any settings in the template or the module that is being used for the slideshow, then you could add your own custom css to set your desired width/height for the slideshow.

You should check with the template provider/developer for the proper way to add your own custom css to the template.

At the end, if you won't care about template updates that could override any customization you may add, you could search for the main template.css file and put there your css.

I don't know what exactly you want to do with the dimensions of the slideshow, but here is an example:

#showcase-row {
    width: 50%;
    margin: 0 auto;
}

This will make the container of the slideshow of 50% width, and align it in the center.

Here is a question about creating CSS overrides that might be helpful: How do I override the CSS styles in my template?