Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 9, 2016 at 8:02 pm #595799
    zimbo

    I want to reduce margin-top from 50px to 0px for a Special Heading.

    If I add this to my child theme then it works for the whole site.

    .av-special-heading {
	margin-top: 0px;
}

    However, I have set a Custom CSS class of ‘retweets’ on a Special Heading element on the home page so that I just target one specific heading, but using this code

    .retweets .av-special-heading {
	margin-top: 0px;
}

    does not work, the custom class is ignored and the margin-top returns to 50px.

    You can see the CSS class on this screenshot.
    Screenshot

    You can see the page here dev.henleyherald.com, it’s the Latest Retweets heading in the right column.

    Any idea why it’s not working?

    • This topic was modified 8 years, 8 months ago by zimbo.
    March 9, 2016 at 11:27 pm #595918
    Yigit

    Hey zimbo!

    Do you mind creating a temporary admin login and posting it here privately? I cannot see custom class on your element

    Best regards,
    Yigit

    March 10, 2016 at 3:01 pm #596310
    zimbo

    Details in private content, it’s a development/test site so not everything is working yet. :-)

    March 10, 2016 at 4:53 pm #596370
    Yigit

    Hi!

    I changed your code to following one 

    .retweets {
	margin-top: 0px;
}

    Please review your website now

    Best regards,
    Yigit

    March 10, 2016 at 5:15 pm #596383
    zimbo

    Thanks Yigit, looks OK now.

    For future reference / my education… can you explain why it doesn’t need the .av-special-heading class adding? I think I maybe misunderstand how the Custom CSS Class works – I use it in some places and I have to specify an additional class to target an element, yet in other places I don’t. Just trying to save posting future support questions if I can!

    March 10, 2016 at 5:19 pm #596389
    Yigit

    Hi!

    Please see this screenshot – http://i.imgur.com/MOPeMo1.png
    As you can see “retweets” and “av-special-heading” are classes of the same element. You can target it correctly as following as well

    .retweets.av-special-heading { margin-top: 0; }

    But since targeting “retweets” would be enough, you do not need to add “av-special-heading” :)

    Let us know if you have any other questions!

    Cheers!
    Yigit

    March 11, 2016 at 2:58 pm #596891
    zimbo

    @Yigit: well, you live and learn… :-)

    I’d seen classes used without a space in previous answers here but didn’t understand why before.

    Are there any rules as to when I’d need to specify a theme element like .av-special-heading as well as the Custom Class or is it dependent on the HTML element and what CSS property I’m trying to add or modify and so just a matter of trial and error until something works?

    March 11, 2016 at 3:10 pm #596896
    Yigit

    Hi!

    For specific elements with custom classes, you would not need. Only if you would like to target globally. If your custom code does not apply, then you can use !important rule as following 

    .retweets img { margin-top: 0 !important; }

    Cheers!
    Yigit

    March 11, 2016 at 6:17 pm #596972
    zimbo

    Thanks Yigit, very helpful – case closed!

    March 13, 2016 at 6:02 am #597332
    Rikard

    Hi,

    Great, glad we could help :-)

    Regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.