Changing CSS Padding Left based on Screen Resolution

Question

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 1024x768, 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 1366x768, 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.

Answer 1

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