mobile site displaying too thin

I’ve seen this question asked already but with no solution. My site doesn’t display full width when viewed on mobile. If the phone is rotated horizontally it displays properly, but vertically it doesn’t fill the screen. I’ve tried some custom css tweaks but nothing has worked so far. Please help.

I have the same problem. I think it happens because of the text in Jumbotron. Letters in this text don’t scale depending on the screen resolution. Here’s my screenshot. Thanks in advance for your reply.

I figured out the problem on my site, my logo was too wide, causing the mobile page to display too thin. Once I changed my logo to a shorter graphic, the issue was resolved.

Still need your help. And how can I change text on header image in my blog posts? I don’t want this text be similar to SiteName and SiteDiscription. Thank you for your answers.

Hello @sporty,

Can you please point out with website link and/or screenshots what are the modifications you need?

Thank you

Thanks for your attention. Here’s the screenshot from my smartphone. The text in Header is similar to SiteName. How can I change it? And this text doesn’t scale on small screens and I see white strip instead of the end of the text. Help to fix it please.

One of my pages:
http://xn–80acvci7c.xn–p1ai/%D1%86%D0%B5%D0%BD%D1%8B/

I’m interested in the solution to this problem as well. My email address in the contact form is too long, seems to cause the mobile layout to appear thin when viewed vertically.
Website: mustardseedlearningcenter.org
Thank you.

Hello @sporty,

Try using this CSS media query by dropping the below code to Dashboard > Appearances > Editor > Style.css or via other methods since this will get erased if you update the theme:

@media only screen and (max-width: 767px){
#header .bottom-header h2 {
    font-size: 40px;
    line-height: 1.2;
}}

@silverstars

I have tracked the issue and will include a fix in a theme update.
Meanwhile, try using this code:

@media only screen and (max-width: 767px){
#contact-us .section-content .contact-us-box .box-right{
    display: block;
}}

Let me know if the above fixed the issues.

Best regards

The code did fix the issue but the fix wasn’t included in the latest version of the theme, 1.0.12. Thanks!

This code helped me! Thanks. One more thing: how can I set my own text in Header in posts\pages? I don’t want it looks like SiteName.

Hello @sporty,

Right now the page and posts get the website name and tagline automatically.

You can try to do some custom coding by changing this file inside the theme folder on the server:

illdy/sections/blog-bottom-header.php

Regards