Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 6, 2015 at 11:51 am #406927
    Monique

    Hi there,

    Please see a specific portfolio item at my clients website.

    The page has 2/3 column with easy slider and 1/3 column with a header and some text. In the header (h3 class=”av-special-heading-tag” itemprop=”headline”) the client uses an &. For a reason we don’t understand, the font-family and color of the ampersand are automatically changed. The client doesn’t want that.

    In the code I have seen that the theme wraps a span around the ampersand:

    
<span class="special_amp">&</span>

    The style used for this class is:

    
.special_amp {
    font-family: "Baskerville","Palatino Linotype","Palatino","Times New Roman",serif;
    font-size: 1.3em;
    font-style: italic;
    font-weight: normal;
    line-height: 0.5em;
}

    Why does this happen and how can it be deleted?

    Thanks & regards,
    Monique

    March 6, 2015 at 12:37 pm #406945
    begrafiks

    Hi Monique ;
    I think that you should use “inhertit” keyword for class=”special_amp
    Here is more details : http://www.w3schools.com/cssref/css_inherit.asp

    March 6, 2015 at 1:13 pm #406961
    Monique

    Hi begrafiks,

    Thanks! I realize I can put some quick CSS to change it ‘back’. Although that works with the font-style but not with the color, so it only ‘solves’ half of the problem.

    I also try to understand why – to begin with – the ampersand has been given a special class…?

    March 6, 2015 at 1:16 pm #406962
    Monique

    It works for the color too if I use !important.

    However, whenever my client want’s to change the colors of his theme, they will again run into the same issue. I believe this should not be necessary.

    March 6, 2015 at 5:27 pm #407122
    begrafiks

    Hi Monique ;
    Your heading title is :

    <h3>Maas <span class="special_amp">&</span> Waal – Volkoren tarwe (premix)</h3>

    As I see you’ve added theses lines 

    .special_amp {font-family: inherit; font-size: inherit; font-style: inherit; 
font-weight: inherit; line-height: inherit;  color: #222222 !important;}

    I would do in this way :

    .special_amp { font-family: inherit !important; font-size: inherit !important;
 font-style: inherit !important; font-weight: inherit !important; line-height: inherit !important;  color: inherit !important;}

    Even though you change the color of “h3” in the theme settings it will applied to “special_amp” too.

    • This reply was modified 9 years, 9 months ago by begrafiks.
    March 7, 2015 at 5:46 am #407397
    Rikard

    Hey Monique!

    Did @begrafiks suggestions work out for you?

    Regards,
    Rikard

    March 9, 2015 at 10:59 am #407966
    Monique

    A very good idea begrafiks! Thanks a lot for your effort and time!

    Yes Rikard, it was very helpful. Thank you too.

    Have a nice day :-)

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Font-family and color changes when using & (ampersand) in h3’ is closed to new replies.