Jquery – Changing CSS Padding Left based on Screen Resolution

cssjquery

I have a background image positioned here
batikdharsono (dot) com.
You can see the top left image is defined with this CSS code.

#top {
background-color: #000 !important;
padding-bottom:10px !important;
padding-top:10px !important;
padding-left: 30% !important;

background-image:url('http://www.batikdharsono.com/x_img/batik-bird.png');
background-size: auto 100%;
background-position:center left;
background-repeat:no-repeat;
}

If screen resolution is 1024×768, the logo is positioned quite properly / not too far away from the navigation menu on its right.

But if screen resolution is higher such as 1366×768, the logo will be far away from the navigation menu on its right.

I've tried to use some jquery code such as

<script type="text/javascript">
jQuery(document).ready(function() {
    if (window.innerWidth) {
        if (window.innerWidth < 1100) {
              jQuery('#top').css('padding-left', '30% !important');
        } else {
              jQuery('#top').css('padding-left', '20% !important');
        }
     }
});
</script>

But it doesn't work. Is there any fix to my jquery code? or i can just change the CSS?

Thank you.

Best Solution

You can just change css with media query like this :

CSS : 

#top{
    padding-left:20%;
}

@media screen and (max-width: 1100px){
    #top{
        padding-left:50%;
    }
}

DEMO : http://jsfiddle.net/9nk4hccn/

You can also see more details about media query on the link of Luke H comments

Related Question