Docs

[countrymiles]

Just bought X theme and loving it so far, using it on my site (www.countrymiles.net). However, I am having a couple of issues that I’m not sure how to solve:

1. When viewing the site on a mobile phone, the size logo does not resize, instead it shows just a small section of it.
2. My primary menu does not appear when viewed either on a mobile or a tablet.

I’d really appreciate some help fixing this!

[Joao]

Hi There,

Place it into your Customizer, Custom > CSS section using the menu Appearance -> Customize. You can change the color codes according to your preference.

@media (max-width: 979px) {
a.x-brand-text, .masthead-stacked  {
 font-size: 4em;
}
}

.x-btn-navbar.collapsed {
    color: #336699;
}
.x-btn-navbar.collapsed:hover {
    color: #659812;
}
.x-btn-navbar {
    color: #849562;
}
.x-btn-navbar:hover {
    color: #224488;
}

Hope that helps

Joao

[countrymiles]

Thanks for your reply Joao, I’ve been without internet for a while so only just got around to testing it a couple of days ago.
A menu now shows up on mobile and tablet – hooray! – but the site logo is still large and cropped (see attached screenshot). Any further help getting this sorted would be great!

[Joao]

Hi There,

Please update this piece of code :

@media (max-width: 979px) {
a.x-brand-text, .masthead-stacked  {
 font-size: 4em;
}
}

for this:

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

Hope that helps

Joao

[countrymiles]

Went ahead and did that, but it doesn’t seem to have changed the appearance at all on mobile displays!

[Lely]

Hi There,

Please use this instead:

@media (max-width: 979px) {
a.x-brand.text {
 font-size: 45px; /*Adjust this to your preferred font size*/
}
}

There’s an error on the selector.

Hope this helps.

[countrymiles]

Managed to sort it by creating an image logo and substituting it for the text logo. Thanks!

[Paul R]

You’re welcome! 🙂

[Author]

Posts