Need help with Mobile Settings

chocolate63 · November 2016

I really need your help fixing some issues I'm having. Sorry for the list but I figured I'd hit all of these in one post!

1. The logo shrinks way too small so i can't see it I need this to size properly. I have tried to use a bigger logo for mobile but it still shrinks too much.

2. there is too much space between the logo and the action bar, and the logo and the header how to I remove that space? Also how do I change the phone icon with a cell phone icon in the action bar?

3. On the menu, the background is gray so I can barely see the + signs to click on those to open. How do I change the color of those plus signs?
4. When I use the column option inside a wrap, the left & right padding makes the content squished and too narrow on the screen.

5. I am using the Testimonials Item in a wrapper and it seems to be loading all the testimonials or something because I have to scroll forever with a blank screen. It's truly messed up. How can this be fixed?
6. The contact section is squished, too narrow with padding and wraps text. Also how do i change the phone icon to a cell phone icon?

7. One last thing, can I replace your Social Icons with ones I can actually see? how would I do that?

I have the exact same problems on an Iphone and an Ipad
I've posted pictures with the hopes you can see what I'm talking about.

you can view live using the IP address: http://65.110.95.73/black-bear-hunts/

Here are pics with explanations...

Tiny Logo Too much space

Can't see the + signs in the menu very well, need to change color

Too Much Padding Squishes text

Button wraps & doesn't resize because it's squished with too much padding left/right.

Testimonial Item inside Wrap scrolls endlessly

Contact placed inside Wrap squishes and wraps text ALSO how do i change a phone icon to a Cell phone icon?

That's about it for now. This should keep you busy for awhile.. I really need these problems addressed as soon as possible. the site needs to go live tomorrow (sunday 11/6) , it's my client's only day off to review!
Thanks in advance for your help!!
Lynn

Albert · November 2016

Hi,

1,2. To increase logo size on mobile, please use:

@media only screen and (max-width: 767px) {
    .header-plain #Top_bar .logo #logo { padding: 0 !important; }
    #Top_bar .logo #logo { margin: 0 !important; }
}

But to change the icon, you need to modify theme files.

3. To change +/- icons color, you need to use the following css:

#Top_bar #menu ul li.submenu .menu-toggle { color: #000 !important; }

4. What is the link of page where you got this padding around text from the screenshot?

5. This is how testimonials works. Testimonials always count to the biggest testimonial and appears as long as the longest testimonial is. If you want, we can give you css to set fixed height but some testimonials would be cut then.

6. To make this section full width, you need to use the following css:

@media only screen and (max-width: 767px) {
    .section_wrapper, .container, .four.columns .widget-area { width: 100% !important; }
}

but to change icons, you need to modify theme files.

7. This requires files customization as well.

chocolate63 · November 2016

Fabulous! that worked great on the logo but now the menu icon on mobile is covered by the logo. Can I move that menu up somehow?

I guessed at this;
#menu-main-menu .responsive-menu-toggle .icon-menu {margin-top:10px !important;}

but I was totally wrong! LOL

As per #4 I was being stupid, the padding was my fault, I had set padding on each column to 20px. I removed that an it works perfectly.

On the testimonials, I just made it easy on myself and took one testimonial and put it in a blockquote with a button to go to read all testimonials. That way neither of us had to mess with it.. BUT for future reference, when there are a lot of testimonials like I have, there should be a way to put them in a different format to paginate or in a blog type format because they do not load well on an Iphone.

#6 with the contact form narrow and wrapping, what you gave me above didn't do anything unfortunately.

If you could just help me move the icon menu on mobile up so the logo doesn't cover it, that would be awesome!

THANK YOU for all your help!
Lynn

Albert · November 2016

How menu icon is covered by logo on mobile? We do not see anything like this on your site now.

chocolate63 · November 2016

sorry, it's on a mobile device, when i increased the logo size it overlaps the menu icon It's going through the TH in the Logo

Also how do I increase the size of the Social Links and change the color on a Laptop/desktop. They are orange on the iphone (which is what I want) but dark on the desktop.

Albert · November 2016

Ok. So to decrease logo size on mobile, you need to use the following custom css:

@media only screen and (max-width: 767px) {
    .header-plain #Top_bar .logo #logo { width: 80% !important; }
}

The link you sent previously, is not the one presented on above screenshot and that's the reason why we were confused. Looks like above is a different site.