Hello!
First: Thank you for this great theme! High respect for offering this for free!
My problem is the following:
I want to set up one page (not post) with the full-width template because there is an (interactive) image in it which is 1139px wide. The image gets loaded and works but it looks displaced because it reaches over the content border into the grey area. Is there an easy solution to adjust the site, so it looks correct (only in content area)?
With best regards
Talesteller
@Talesteller
Could you please post your website URL where this problem appears or at least post a screenshot, so I can see how it looks.
I have attached a screenshot of the browser window. It happens with firefox and chrome no matter how big the window is.
Some more background-info:
From all methods I could find to achieve an interactive image (or imagemap) I found this solution the smartest because it didn’t required much overhead regarding javascript and stuff:
http://www.cssplay.co.uk/articles/imagemap/
I wrote the html and css first in an editor and then paste the html code via “raw html” plugin into the page editor and the css into the theme-options. As far as I understand this is the only way to get this stuff into the wordpress system. The project isn’t public yet because there nearly 100 parameters which need boxes and description which needs a lot of time/work. But before I finish this I wanted to be safe that it looks at the end good and not like now. 
With best regards
Talesteller
I have an idea where the cause could lie:
The image gets loaded via the CSS part and not within the html-page itself. If I put an empty space into the html part exactly the same width like the image, that must do the trick.(?)
Unfortunately, this information doesn’t help and I need your website to be live to see what is going on. Yes, I do see that your embed goes outside the content area but without inspecting your website source I can’t provide you any guidelines.
Ok, no problem. Here is the link:
http://talesofsynvoiz.de/test-synvoiz-overview/
About my idea: the trick didn’t worked.
Ok, I see.
It could be fixed but I have made some layout improvements that will break solution that I could provide now. To avoid that, make sure to download updated theme version from Github and replace it with currently installed one. Once you are done with that you can notify me again and I will help you from there.
Sorry for inconvenience.
Short question regarding the manual update process since I never have done this before:
Will this reset the Theme settings?
Overwrite all files via FTP in the themes folder or should I just overwrite the newer ones?
Sorry - this is new for me.
Theme settings will be still in place since they are written in database. You should leave “sparkling” folder in place and move move all files from Github over existing files in this folder by replacing them. You will get asked if you want to replace those files and feel free to click “yes”.
Thanks for the info. I have update the theme to version 1.7.1.
Now you can add this code to Theme Options - Other - Custom CSS
@media (min-width: 1200px) {
.page-id-178 .container {
width: 1300px;
}
}
The only disadvantage is that it will not scale well on mobile. Theme itself will work just fine but your embeded code will not change it size because it is applied as background to element which means that there is no box around it that could resize it based on device screen size.
But resizing this kind of image to for mobile device would still make no sense because it would become way too small to click on something.
Thanks for the solution! This will work just fine. Mobile devices aren’t a concern in this case especially because the important part is in the text boxes below the image.
Thanks again for your help! I wish you all the best in next year!