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?

  • Hello James, what exactly are your wonders about the implementation of the slider? - clarify what kind of answers you are expecting on this part of your question. Regarding the size - search if it the template or the module that is being used have any settings for its size. Otherwise, see if you could place it in another position which has certain size. Finally, you can always write your own css override, or look for another module that may have the features you want.
    – FFrewin
    Commented Feb 11, 2016 at 17:33
  • 1
    Also remember: sharing clear information about an issue, a link to the website, the template demo, or code snippets is always helpful. And in many cases, inquiring for help or further information from the developers of an extension or template is the best way to get certain answers - especially if it is an extension that you have paid for.
    – FFrewin
    Commented Feb 11, 2016 at 17:37
  • Thanks for your reply, @FFrewin I have updated my question to include the demo site. To clarify, I don't really need to know how it was implemented. All I want to know is how to resize the image slider. I can't find any settings for the size. So I guess I have to place it in certain container that can be resized. But I'm not sure what the best way is to do this.
    – james
    Commented Feb 12, 2016 at 11:36

1 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?

  • Many thanks, @FFrewin, could you please give me some hint on how to adjust the height as well? I have tried height: 80%; but the content below does not follow the change, i.e. they are fixed in position.
    – james
    Commented Feb 15, 2016 at 11:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.