Docs

[pdopchev]

Hi guys,

1.Tried to replicate the header title in Icon 7 (link:http://demo.theme.co/icon-7/about/) but so far with no success (please check screen grab). After installing the standard demo content for Icon 7 I noticed that the custom headline has a class of .resp-h but couldn’t find the css code for it anywhere…

2.Also when I try to make the headline responsive, the accent line shifts and one more accent line is added underneath (please check 2nd screen grab) This is what I have in the custom headline field:

Our Story

[responsive_text selector=".resp-h" compression="1.5" min_size="36px" max_size="78px"]

link:http://dopchevproductions.com/our-story/

3. How could I add Social Media icons to the bottom of the Promo element just like the demo on the same page?
link:http://demo.theme.co/icon-7/about/

Your help would be greatly appreciate it!

[Friech]

Hi There,

Thanks for writing in! #1 and #2 As you already know the class resp-h is used as the selector on the Responsive Text settings. But it was not actually configure as a shortcode inside custom headline field, It was configure under Settings tab > Responsive Text. Please get rid of the responsive shortcode and keep only the “Our Story” phrase, responsive text feature should work that way.

#3 Its just a series of icon shortcode that is wrap with <a> tag inside the promo element content.

<a href="#" target="_blank">[x_icon type="facebook"]</a>
<a href="#" target="_blank">[x_icon type="twitter"]</a>
<a href="#" target="_blank">[x_icon type="google-plus"]</a>

The site is in under construction mode, if you need further assistance please provide us login credentials in private reply or disable the under construction mode so we can take a closer look.

Cheers!

[pdopchev]

Thank you so much! Was able to fix the responsive text and add the social icons, but now I am trying to style them just like the demo. Could you please take a look at that?

p.s. under construction mode is OFF now

[Thai]

Hi There,

Please add the following CSS:

.x-promo-content > p:nth-child(4) {
    text-align: center;
    margin-top: 15px;
}
.x-promo-content p > a > i {
    font-size: 24px;
    margin: 0 8px
}

Hope it helps 🙂

[Author]

Posts