Legacy 1.4 – CSS to adjust margin on featured image in sidebar

This topic has 5 replies, 3 voices, and was last updated 7 years, 1 month ago by Wes.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
March 7, 2017 at 3:46 pm #20805
msweet
Customer
Hi Wes or other cool helper:

I’m working on the following website using Legacy 1.4. Here’s a page for example:

http://new.susanmbrooks.com/example-blog-post-one/

I have a Genesis Featured Post Widget in the sidebar, and would like to reduce the margin on the sidebar image, but after 3 hours of fiddling, I cannot figure out how to target the margin on an image in the sidebar specifically. (I have done some modifications on the style sheet, but pasting back in the original style.css did not add any helpful clues.)

Using Chrome Developer tools, I’ve tried both of the following CSS code chunks, and it works if the !important is added; but in that case it ALSO affects the margin on images in the main content area, which I don’t want. I can’t seem to target JUST the image in the featured post display in the sidebar with custom margin values.

.sidebar a.alignright, img.alignright, .wp-caption.alignright {
margin: 6px 0 10px 18px !important;
padding: 0px;
}

.sidebar .featured-content img.alignleft {
margin: -6px -18px -10px 0 !important;
}

Any help or clues would be appreciated!

Thanks,
Tad Hanna
Web Developer, Sweet Design
March 8, 2017 at 2:23 am #20810
Andykev
Customer
Line 1371 of your .css
```
.sidebar .featured-content .entry  {
	padding: 20px;
}
```
This moves the image slightly towards center, with the margin increased. I used 20px, you can adjust.
March 9, 2017 at 3:50 pm #20829
msweet
Customer
Thanks Andykev,

That wasn’t the effect I was hoping for. Strangely, it did move the image closer to the text on the right, but the bottom margin remained too large. Looked worse than before. So I wasn’t able to use that css code. What I was aiming for was less margin around the IMAGE! not the whole sidebar widget entry. Just the IMAGE.

The real issue, as far as I can tell, is that adding .sidebar to any image margin parameters in this stylesheet also applies it to images in the entry content. Somehow the theme or the stylesheet (or however they work together) don’t allow css entries targeting IMAGES IN THE SIDEBAR ONLY to have a separate characteristic from images in the main content areas. Normally I should be able to target these images separately using the .sidebar designator in my CSS. But in this case it doesn’t work for some unknown reason.

Again, if you have any clues about this specific issue I’d love to hear them. Otherwise, this may be a lost cause.

Thanks for the response,

Tad
March 12, 2017 at 12:42 am #20850
Wes
Moderator
@msweet Try adding this code to your CSS –
```
.sidebar .featured-content a {
    margin: 6px 20px 4px 0;
}
```
You can take a look at the images below to see if this is the effect you’re going for –

Before/How it currently looks – http://i.imgur.com/5Z4w21k.png

After (once you add the code above) – http://i.imgur.com/IDaWkAA.png

Is that what you’re going for? If so, you can adjust the margin if you need
March 13, 2017 at 10:24 pm #20870
msweet
Customer
Hi Wes,

Yes, that’s the exact effect I’m wanting!

I did add your code but it did not seem to take effect. How did you get that effect? Check my css – the new code is on line 2571. Any further thoughts? I am bamboozled by this.

Thanks,
Tad
March 13, 2017 at 11:33 pm #20871
Wes
Moderator
Looks like you did it right, you’re just missing the period. right before sidebar.

It should show up like this –
.sidebar .featured-content a

So add that period and it should work. I don’t think you’ll need to add !important for this at the end, but if you prefer to you can. It should work either way.

Also, anytime you make CSS adjustments make sure and click the Reload button on your Browser so it instantly clears the cache. This will allow you to see the latest changes you’ve made without having to wait.

Let me know if that works.
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.