Jquery – Changing CSS Padding Left based on Screen Resolution


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-size: auto 100%;
background-position:center left;

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');

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 :



@media screen and (max-width: 1100px){

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

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