This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

new mobile page width

  • Creator
    Topic
  • #6666
    jobsa
    Member

    I have adjusted the page width with:
    body{width:100%;} #container { width: 1280px; }

    This gives a great laptop width but has mucked up mobile page width. Anyway of setting a new mobile page width?

Viewing 1 replies (of 1 total)
  • Author
    Replies
  • #6676
    Jason Bobich
    Keymaster

    Hello,

    The theme uses CSS @media queries to target different device viewport. You can setup your custom.css something like this:

    /* Your styles for desktop ... */
    .whatever {
    	...
    }
    .whatever-else {
    	...
    }
    
    @media (max-width: 800px) {	
    	/* Your styles for tablets ... */
    	.whatever {
    		...
    	}
    	.whatever-else {
    		...
    	}
    }
    
    @media (max-width: 480px) {	
    	/* Your styles for mobile ... */
    	.whatever {
    		...
    	}
    	.whatever-else {
    		...
    	}
    }

    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

    Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

Viewing 1 replies (of 1 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.