Hello!

I wanted to make a background image being fully visible in all resolutions. It was suggested to me to use this code to achieve it:

body {background:none !important;}
.header-outer { background: #fff url(http://idevsky.com/images/1.jpg) no-repeat
center center;background-size: contain;width: 100vw;height: calc(100vw / 1.5);}

It does show the image the way I want, but there's an unwanted "side-effect" to it for some reason. Now I get a small horizontal scrolling. So my question is how to avoid it? Here's the site's URL:

http://idevsky.com

It seems it's the grey bottom footer causing it by having a margin-right value of -230px set in joomlaplates.css

.footer-outer {
    position: relative;
    z-index: 0;
    padding: 20px 0;
    color: #fff;
    margin-right: -230px;
}

 

It seems it's the grey bottom footer causing it by having a margin-right value of -230px set in joomlaplates.css

.footer-outer {
    position: relative;
    z-index: 0;
    padding: 20px 0;
    color: #fff;
    margin-right: -230px;
}

Are you SURE it's there? I think I removed yesterday that margin-right: -230px; code, 'cos it was causing troubles. Now I've just doubled checked that file and I don't see it there. Maybe it's the cache in your browser? Try in another one please or just clear your current browser's cache.

Are you SURE it's there? I think I removed yesterday that margin-right: -230px; code, 'cos it was causing troubles. Now I've just doubled checked that file and I don't see it there. Maybe it's the cache in your browser? Try in another one please or just clear your current browser's cache.

 

I've never visited the site before I clicked the link so I have a visit count of one which means there wouldn't have been any cached files.