Mobile Issues

[Josh3roush]

Hey,

I was wondering if you could help me out.

I am having issues on the mobile version of my website.

http://www.buccosroofing.com

Issues:

1. We want the black promo bar to be on all the pages except the home page. I tried inserting in two different code options (custom css), which I grabbed from comment section on your themeforest page. Both did not work and this is what happened. (See screenshot)

a. @media only screen and (max-width: 767px) {
#top-bar .tb-left, #top-bar .tb-right {
width: 100%;
float: none;
display: block !important;
}
}

b. @media only screen and (max-width: 767px) {
.tb-ss {
display: none!important;
}
#top-bar .tb-left, #top-bar .tb-right {
display: block!important;
padding: 0;
}
#top-bar .tb-left {
margin-bottom: 10px;
}
#top-bar .menu > li {
border: 0;
}
}

2. On the home page, the front image is not only uneven but is missing a button and the image on top of the photo is pushed up. Any thoughts on how to make this work?? (Please see screenshot)

Thanks!

[Josh3roush]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Sorry but I do not see this on your homepage?

– Kyle

[Josh3roush]

Hey,

Do you have an iphone? Because on our iphone 5s that is what we are seeing?

What do you see? Is it working for you?

Thanks!

[Swift Ideas – Ed]

Hi there,

1) You have fixed height set for the top-bar?

@media only screen and (max-width: 767px) {
#top-bar {
height: auto!important;
}
}

2) You have the parallax set to window height, so it’s cutting off on iPhone. Try this custom css:

@media only screen and (max-width: 767px) {
.home .spb_parallax_asset {
height: auto!important;
min-height: 800px!important;
}
}

Hope that helps.

– Ed

[Josh3roush]

Hey Ed!

So I am supposed to delete my old CSS for that and insert in both 1) & 2) that you gave me? If so, this is what happens? Plus the top bar, etc. is not there anymore on the other pages?

We are almost there: )

[Josh3roush]

Hey,

I also inserted in this code (see below) to get rid of the main logo (black image) that is on the desktop version so it does not cram up the space on mobile but now I am getting these issues. I don’t think that is causing the issues.

function not_mobile_shortcode($atts, $content = ”) {
if (wp_is_mobile() === true) {
$content = ”;
}
return $content;
}
add_shortcode(‘not_mobile’, ‘not_mobile_shortcode’);

in the theme functions.php. (that is where we placed it)

1. Yellow on the outside trim of all the content and I want my content to still be full width.

2. The scroll down header is way thicker than I want.

Please see attached images for what I mean.

Thanks!

[Mohammad – SUPPORT]

Hi,
Please try to use this code:

@media only screen and (max-width: 991px) {
div#main-container div.container{padding-left:2px !important;padding-right:2px !important; }
}

Hope that should help and let me know your feedback.
Thanks 🙂
With Best Regards
Swift Ideas

[Josh3roush]

Hi Mohammad,

Now we are having three different separate issues, (we are almost there though):

1. The “Menu” icon is in the wrong place and needs to be moved to the right (see “home page buccos.png” for what I mean)

2. The scrolling menu bar is too long (1.) & the “menu” (2.) button is in the wrong place. It should be to the right of the Buccos Roofing Logo. (see “buccos long menu.png” for what I mean)

3. The top black bar is not displaying the information we want on the mobile version. It is there on the desktop version but not the mobile version. Also, we want that info on all pages except the home page. (telephone number & contact info -gmail address) (Please see “buccos top page.png” for what I mean)

The login information is in a comment above. Feel free to login into our website and check out the current CSS.

Thanks again for all your hard work and am looking forward to wrapping this up: )

Keep up the hard work!

[Mohammad – SUPPORT]

Hi,
I have resolved the issue so please check and let me know your feedback.
Thanks

[Josh3roush]

Hi Mohammad,

You are so awesome!! Great work…one tiny issue then we are done!

…so close.

On the home page, when you scroll down the page, the “header” bar is too long. (white space)

On the other pages, it looks great, so we just want it to be consistent like the other pages.

Please check out my attached image for what I mean.

Thanks again for all your help!

[Mohammad – SUPPORT]

Hi,
I have resolved the issue so please check and let me know your feedback.
Thanks

[Josh3roush]

Perfect! We are good to go: )

Thank you so much for all your help…you have been amazing!

[Swift Ideas – Ed]

Thanks Mohammad – glad you’re happy Josh 🙂

– Ed