Docs

[whitlynnn]

I uploaded my logo, which looked great on my computer, but extremely fuzzy on mobile. So, then I went back and input the logo width (per instructions in the customizer area) for Retina dimensions. Now the logo looks fine on phone, but is too small on computer.

Please help me!!!

[Thai]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[whitlynnn]

The url is http://rodeoaccess.com.

Everything looks great on desktop site now. But I am still having issues with mobile.

1. Logo is too big, and is fuzzy on mobile.

2. Mobile Menu Icon is too far to the right. I would like it more “to the left” about 10px or so. In customizer you can only change vertical alignment, not horizontal.

[whitlynnn]

3. On the “Contact” Page http://rodeoaccess.com/contact/

You will see that I have used CSS to change the background color of the form area. However, I cannot get the background of the message (textarea) to change. This is the code I am using to change background coloring:

input.wpcf7-form-control.wpcf7-submit {
background-color: 282828;
color: #ffffff;
}
input.wpcf7-form-control.wpcf7-text {
background-color: rgba(120, 119, 120, 0.7);
color: #ffffff;
}
input.wpcf7-form-control.wpcf7-textarea {
background-color: rgba(120, 119, 120, 0.7);
color: #ffffff;
}

4. On my dropdown menu on Mobile, the items are too far to the left. I would like them to be centered on the dropdown menu on mobile.

[whitlynnn]

This reply has been marked as private.

[whitlynnn]

This reply has been marked as private.

[Christopher]

Hi there,

#1 and #2 Please add this in customizer or child theme’s style.css file:

@media (max-width:767px){
a.x-brand.img img {
    width: 40%;
}
.x-navbar .x-container.max.width {
    width: 88%;
}
}

#3 update your code to :

input.wpcf7-form-control.wpcf7-text, textarea.wpcf7-form-control.wpcf7-textarea {
    background-color: rgba(120, 119, 120, 0.7);
    color: #ffffff;
}

#4 Add this as well:

.x-nav-wrap.mobile.collapse.in li a {
    text-align: center;
}

Hope that helps.

[whitlynnn]

Thank you I will try those. Also I noticed there’s a bar icon | next to my site name when it shows up in the top of the window, or on a Facebook post. How do I remove that symbol?

[whitlynnn]

Or for that matter, speaking of Facebook posts, I need the bar symbol removed but I would also like to know how to change the main site image for Facebook posts etc. I know Facebook normally pulls the first image on the site, but how do I change that without changing my site design?

[whitlynnn]

#1:
The Logo Size is much better and more clear, however now its a little too “high” vertically. Is there CSS to change the vertical alignment?

#5:
I noticed there’s a bar icon | next to my site name when it shows up in the top of the window, or on a Facebook post. How do I remove that symbol?

#6:
Speaking of Facebook posts, I need the bar symbol removed but I would also like to know how to change the main site image for Facebook posts etc. I know Facebook normally pulls the first image on the site, but how do I change that without changing my site design?

[whitlynnn]

Ideally, I would love it if my site header looked like this on mobile (the size and placement of logo and menu button and height of header etc…) I am just not sure how to achieve this with CSS…

The URL for this site is http://rodeoresults.com

[whitlynnn]

Issues:

So I adjusted the vertical alignment, and size of the button to where I want it on mobile. And it looks great on my phone, but then when I look at it in iPad view, it is WAY too high. Is there CSS for each or a % value I can use to avoid this?

Also, if I made the logo larger than 40% it is blurry and fuzzy again on mobile. How can I fix this? Do I upload a larger file for the site?

[Rue Nel]

Hello There,

Thanks for the updates! Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.

#1] You can adjust the vertical position of the logo by going to your customizer, Appearance > Customize > Header > Logo – Alignment and set the “Navbar Top Logo Alignment”. This option enables you to controls the vertical alignment of your logo as desired. Make sure to adjust your top alignment even if your navbar is fixed to a side as it will reformat to the top on smaller screens.

#5] Bar symbol and Facebook post. The bar symbol is supposed to be a separator between your Site Title and Tagline which you can set in the settings, Settings > General. You can always change how the Titles especially when posting in Facebook by using Yoast SEO plugin. Having to install this plugin enables you to easily manage all the titles, keywords and descriptions being used when sharing your site or a post from your site.

#6] With Yoast SEO plugin installed, you can set a default image that will display if your page/post doesn’t have an image or if you want to display a different image other than those that can be found in the page/post that you are sharing in Facebook. Simply go to Seo > Social > Default settings.

Hope this helps.

[Author]

Posts