6 replies to this topic

[Karl and Andrea Kropp]

Hello-

In order to get background images and Dynamic Content Gallery images centered properly within tabs, I've had to use the following bit of CSS:

.builder-module-sidebar .widget img {
padding: 0;
margin: 0;

Unfortunately, this solution is really too broad for my purposes and now creates other image spacing issues within other widgets that I've addressed like this:

/* To fix image spacing in image widget--create space between image and text to the right*/
img.alignleft {
padding: 0 !important;
margin-right: 10px !important;
}

I'm pretty sure this is not the preferred way to handle these fixes and I've generally been able to do much better with the IDs attached to individual builder modules. Any idea how I can target specific images within specific tabs in the tabber widget? I've tried Firebug, but can't seem to find IDs.

The site is http://www.practicelight.com

All suggestions greatfully received.

Andrea and Karl

[Sridhar Katakam]

Is this your question?

How do I target the image of the man standing with his arms folded in 'Welcome' tab?

[Karl and Andrea Kropp]

Hi Sridhar-

Yes--targeting that image or any other placed into a tabber. The second bit of code was directed at that image. We had the same challenge with the images in DCG--wanted to target them specifically but ended up with the workaround above.

Thanks!

Andrea and Karl

[Sridhar Katakam]

Here you go:

#builder-module-4bd7131d1766e .builder-module-sidebar .widget-wrapper-top #tabber_widget-4 #widget_sp_image-2 img {
 
}

Firebug FTW!

Would you like a video tutorial on how to arrive at the above?

[Karl and Andrea Kropp]

Thank you Sridhar! I'd certainly like to see a video like that. Most of what I know about CSS I know because of you and the iThemes team (as well as some quality time with w3schools.com). In this case, I was able to identify #tabber_widget-4 and #widget_sp_image-2 img with Firebug, but simply couldn't work backward from there successfully. Looks like I could use a 201 or 301 level course...

Thanks again!

Best,

Andrea and Karl

[Sridhar Katakam]

I actually started making the video and at half way point realized
that we can just use the following instead of the earlier CSS code:

#widget_sp_image-2 img {
 
}

When
we inspect using Firebug, you can see that the img element is
contained inside a div that has an ID of "widget_sp_image-2".
Since this ID is auto-generated by Builder and since we know that IDs
are unique, it is assured that no other div on the web page will have
the same ID.

Hence there is no need to be more specific than the
CSS code in this post. i.e, we don't need to add the complete path to
arrive at the div.

Hope this is clear.

[Karl and Andrea Kropp]

Thank you Sridhar--makes perfect sense. Played around with it for a while today and was able to get at other image-widget images in much the same way. We're making progress...

Best,

Andrea and Karl