Docs

[Christian]

We’re sorry but we do not have support for custom integrations. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

Thank you for understanding.

[wnhorne246]

I understand.

Maybe you could help me straighten out my X-Theme Icons in my widget area on my blog, and my “responsive text on my home screen then since that is what started this thread in the first place.

#1 On my home screen I was given this code to shrink the size of the icons on tablet in “portrait” on my home screen at http://dev.emilycolin.com …

@media only screen and (min-width: 768px) and (max-width: 1023px) {
.x-raw-content .col.span_1_of_5 a i {
    font-size: 35px !important;
	}
}

It works perfect and my Goodreads image Icon looks and reacts well to it too. The only issue on this page now is the header text for “Follow Me,” “Newsletter,” and “Latest Tweets” are not responding to the responsive script I’m using on it.

i.e. [x_custom_headline level="h3" looks_like="h4" accent="true" class="cs-ta-center man responsive-heading" style="color: rgb(0, 69, 100);"]Follow Me[/x_custom_headline][responsive_text selector=".responsive-heading" compression="1.5" min_size="26px" max_size="78px"]

#2 Now I have the opposite issue in my widget on the blog pages. Please reference this page as an example… http://dev.emilycolin.com/something-completely-different/.

In tablet portrait mode on this page the header text is responsive even though I’m using the same exact responsive text code? Very confusing! The only issue on these pages is the icons are not responding like they do on the from page. I would guess we need a new declaration instead of the .x-raw-content in the supplied code above.

I’m seeing all of these issues on a iPad in portrait. Please see my attached screenshots of the issues.

Thanks

[Rue Nel]

Hello There,

Thanks for the updates!

1] The widget headings are not responsive because you have three responsive text shortcodes for just one selector. You only need one for all your widget headings. Please remove the other two.

2] Since you have place it in a widget area element, you can make use of this code instead:

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .x-widget-area .textwidget .col.span_1_of_5 a i {
    font-size: 35px !important;
  }
}

Please let us know if this works out for you.

[wnhorne246]

Now it looks like the Goodreads icon is out of wack now that the other icons are fixed. See attached screenshot for any blog page.

[Rue Nel]

Hello There,

Simply update the code and make use of this instead:

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .x-widget-area .textwidget .col.span_1_of_5 a i {
    font-size: 35px !important;
    line-height: 0;
  }
}

Please let us know if this works out for you. Thank you.

[wnhorne246]

That did it. I really need to think more simply about these types of things. It makes sense that if you make the line height 0, everything would snap to it, be it a font, or an image!

I’m good to go!

Thanks

[Darshana]

Glad we were able to help 🙂

[Author]

Posts