Header cutting off in mobile view

I noticed my header is cutting off in the mobile view. How can I fix this?

Hello @sanachoudary,

Thanks for asking. :slight_smile:

Looks like you are using Thrive visual editor to work on the page layout. I would suggest you to recheck the builder settings . You also have the option to use following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .thrv_wrapper.thrv_heading h1 {
        font-size: 25px !important;
        text-align: center;
    }
}

As the issue involves 3rd party plugin, it’s difficult for us to provide support for the same as it fall outside the scope of support we can offer.

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

I am not using thrive builder for the page with the issue= sanachoudary.com/blog

That page is created entirely through xtheme.

I don’t see X > Theme Options > CSS from my wordpress menu.

Did you mean for me to add this under Appearance < Customize < Custom < Global CSS?

If so I added the code there and it did not solve the problem.

What do you suggest next?

Hi @sanachoudary,

I checked the website and indeed the code generated is not related to our theme. Are you sure you use our theme? If yes it seems that you are using a heavily modified version as the section you are talking about is not a familiar code for me and believe me, it has been 4 years that I am working and supporting the X theme.

Please change the theme from a Child Theme to the Parent theme and test the case.

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 if you still have problems.

Thank you.

No idea how to do what you described. I have added a secure note to my earlier message with my login info.

Hello There,

Your homepage has a different layout and not using X. I have checked your blog page and I can see your issue. Your logo text is set to have a font size of 64 pixel. To resolve this issue in smaller screen devices, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 979px){
  .masthead-stacked .x-brand {
    font-size: 44px;
  }
}

We would loved to know if this has work for you. Thank you.

Issue was not with my homepage but with sanachoudary.com/blog which is designed through x.

But your code fixed it. Thanks.

You’re welcome, we are delighted to assist you with this.

Cheers!

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