Mobile tabs with images padding

[kimcha]

Hi,

I noticed that if you view swagger default homepage (http://www.themeblvd.com/demo/swagger/) on the iPhone the images under “Why Swagger” don’t have a padding on the right and look really stupid.

I have the same problem with a similar image/tab combination on my site and would like to know how to fix it.

Screenshot:

http://cl.ly/image/0Y442P1X0x3V

Greetings, Kim

Topic

[Jason Bobich]

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.

[kimcha]

Thanks Ill try that!

[kimcha]

Thanks,

the featured-image worked! But it has this property:

.featured-image-wrapper {
margin-bottom: 10px;
}

Is it possible for me to “copy” the featured-image property and create a second one “my-pretty-image” one which is the same, but does not have the margin-bottom  property? (I am not expecting you do it for me, just some general things I should look into changing in the css and what CSS concepts I should readup on to be able to do that)

Greetings, Kim

[Jason Bobich]

I’m sorry Kim, but I’m honestly not quite sure what you’re asking, exactly. Where would be using the “my-pretty-image” class? Are you asking how to insert the class somewhere in the HTML markup? Or are you asking how to create a new class with CSS? Or what are you wanting to do exactly?

If you’re just looking to remove the margin on that selector, you’d just do that like this:

.featured-image-wrapper {
     margin-bottom: 0;
}

You wouldn’t need to any kind of second class (i.e. the “selector” in this case) to do that.

[kimcha]

Never mind, I got it working perfectly with max-width, the first method you recommended.

My question was the following:
Let’s say I want to modify .featured-image-wrapper, but I dont want my change to be applied everywhere, just in a few specific places. Is it possible to create a “copy” of .featured-image-wrapper that has all the same properties, but changes a few?

Create a class called “my-pretty-image” that “inherits” all of .featured-image-wrapper’s properties, but changes a few?

[Jason Bobich]

No, not quite. — What you’d do is just find some sort unique element that is current surrounding the area you want to change.

So, for example, say you have markup that looks like this:

Well to target this featured-image-wrapper specifically, you’d do this:

.whatever .featured-image-wrapper { ... }

This is what CSS means, “Cascading Stylesheets” — Meaning that because this is more specific, it will take precedence.

[kimcha]

ohh awesome, that makes sense. Thanks man!

[Author]

Replies