How to mobile optimize the size on my slider in HTML?

[SaaaD]

I have a wordpress website called www.ellaror.seOn the first page you can se a slider that is working and covering the whole width of the "content" div.But when I browse the website on my phone it gets smaller but not the slider, it is still 1000px width. Here is the CSS that I have added on my own that becuase i wanted the slider a little bit more wider so it will cover the whole page and a little bit to the left and up:\[code\]#soliloquy-container-268 {margin-top: -100px;width: 1000px;margin-left: -76px;\[/code\]We also have this CSS code snippet in our HTML (\[code\]#soliloquy-container-268\[/code\]):\[code\]style="max-width: 1000px; max-height: 300px;"\[/code\]I know that the slider won't get smaller because I have given it \[code\]width:1000px;\[/code\] but is there any smart way to make so the slider will cover the whole content page and gets smaller at the same time when you browse it on you phone?