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.

Reply To: Mobile tabs with images padding

#437
Jason Bobich
Keymaster

Hello Kim,

The reason for this is that because the image has padding and so it’s difficult with the CSS box model to add padding to an element and then also give it a width. In this case, we need to give it a max-width in order for it flex with the width of the columns, which has no fixed width, as every device will be different.

We estimate this by giving these images with class “pretty” (which applies the border and padding) a max-width of 98.5% (opposed to actually 100%).

1) One thing you could do is to try and play with this number to get it to look exactly how you want specifically on mobile.

@media (max-width: 480px) {
	img.pretty {
		mad-width: 98%;
	}
}

2) You could also maybe use the “featured-image” class which applies a similar style, but use it on a container wrapping the image.

So instead of this for the image:

You could do something like this:

=====

Here are some general notes on CSS changes:

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.