Header Out of the screen on Mobile

Support
#1

Hi,

I’m building www.eurorackbarcelona.org. When check the site on a mobile screen the header text is out of of the screen. It doesn’t happens on the screen size simulator, but it does in a phone.

Thanks for your help

#2

Hi There,

Thanks for writing in!

I can see the heading is not responsive even in the simulator.
You have to setup responsive text so that it will behave responsive in mobile device and simulator too.
Here is a video will help you to setup the responsive heading.

Hope this helps!

Thanks

#3

Thank you. But the video shows how to make responsive text with the Cornsestone. The issue is in the Header, which is in the “Theme Options” seciton. I can’t edit all that info there. I can’t add a class there.

#4

Hi there,

If you are having issues loading the Theme Options panel, there must be something in your setup that is conflicting or is causing an error.

Please follow the steps below:

  • Ensure everything is up to date according to our version compatibility list here. Please follow the best practices when updating your theme and plugins. Click here for more information.
  • If you’re using a CDN, please clear the CDN’s cache and disable optimization services. For the CloudFlare you also need to follow the steps below besides the developer mode:
    https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/
  • Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  • Remove custom CSS and Javascript from the options or Child Theme and test the case.
  • Reset your htaccess file by renaming it to .htaccess-bak. Then in WP Admin Menu, go to Settings > Permalinks and just click the Save Changes button.
  • Increase the PHP Memory Limit of your server. Click here for more detailed information and how to increase the PHP memory limit.

If you still have problems kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

#5

Hi,

I’m not having any problems loading the options. What I say is that the HEADER is not responsive. Please, check the picture before. And the video that you sent me is about editing text inside each page, not at the Header, which is common on all the pages.

thanks :slight_smile:

#6

Hi there,

You mean the logo text? That’s what visible in the screenshot. Please add this CSs to your global custom CSS,

.x-brand {
    font-size: calc(50px + 3vw);
}

Your current logo size is fixed to 80px. That CSS will set the size with minimum of 50px plus a responsive size of 3vw. You may change the value depending on your preference.

Thanks!

#7

That worked, thank you!

#8

you are most welcome!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.