Where are the settings for the "responsive" features?

[neotopia]

Hi,

our theme breaks not as smooth as I wish it to do.

Can I manually overwrite the settings when the Theme breaks the sidebar into the footer for example? Or when it should reduce the font-size.

cheers

Topic

[Jason Bobich]

Hello,

The theme uses CSS and @media queries to control all of this. To customize how the theme scales down responsively would be CSS customizations you’d need to make to the theme.

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.

Here’s an example of how you might structure some of your custom styles to target different viewport sizes in the way the theme does.

/* Standard Desktop */
.whatever {

}
.whatever-else {

}

/* Tablets */
@media (max-width: 768px) {
	.whatever {

	}
	.whatever-else {

	}
}

/* Mobile */
@media (max-width: 515px) {
	.whatever {

	}
	.whatever-else {

	}
}

Additionally, you can view the file /assets/css/responsive.css to see how the theme styles everything as the site scales down.

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.

[neotopia]

Hi Jason,

thanks for your reply.

I have searched for hours without an solution while I am getting a little desperated. First, I thought the theme breaks for the tablet optimization, but if I change the resolution width the behaviour of the theme doesn’t change with it.

The problem is the design goes to late into table mode. So the theme just moves to the right out of the background frame until it finally reaches some point to reduce the font size and other parts.

Maybe you have any idea what could be the issue? http://disctopia.de

[Jason Bobich]

This aspect of the theme is controlled from /assets/css/responsive.min.css, which is the minified version of /assets/css/responsive.css. In this file you will find the viewport sizes the theme breaks at.

[neotopia]

Hi Jason,

thanks. I have edited the “max-width” as well as the second width-paramter which is and was 20 less. Now it works.

It’s surely not the finest way to do some .css changes, but it will do it.

Thanks for your help. 🙂

[Author]

Replies