Moblie is not rendering

[piexec]

Can you please help me. Why does the mobile version not render on the phone like it does in the preview?

[jade]

Hi @piexec,

It seems to be because of the actual screen size of the page when views on a mobile device is less than what is in the preview mode in Cornerstone.

A workaround would be to adjust the font size of the inline menu and the heading element that contains the Whiskey Wings text.

To do that, you can make use of CSS with some media query and add it in the Element CSS of the two elements.

Please add this code in the Element CSS to the inline navigation element:

@media (max-width: 479px) {
  $el.x-menu > li > .x-anchor .x-anchor-text-primary {
    font-size: 0.8em;
  }
}

then add this code to the Element CSS of the headline element:

@media (max-width: 479px) {
  $el.x-menu > li > .x-anchor .x-anchor-text-primary {
    font-size: 0.8em;
  }
}

Element CSS | Themeco Docs

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[piexec]

I did that and I’m still getting an issue with the button text and headline. See attached. Thank you n advance!

[Prasant]

Hello @piexec,

Thanks for updating the thread.

Please add a class to the button element under Customize > Class. After that add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  .class-button .x-anchor-toggle {
    font-size: 0.7em;
  }
}

Let us know how it goes.

Thanks.

[piexec]

This is what I’m getting. Did I do it wrong?

[ruenel]

Hello @piexec,

There isn’t enough space to display the text and the text of your button. You will need to apply responsive typography so that the font size will adapt whatever space is left to display any text. You can enable the Stepped or Scaling root font size mode in X > Theme Options > Typography. For more details about responsive typography and how you can use it to resolve your issue, please check out this changelog:

• https://theme.co/changelog/#theme-pro-1-1-0

Hope this helps.