Logo & text on mobile not responsive & varies from page to page

[[email protected]]

Hi,
I’m having the following sizing issues on ipads, while everything looks good on PC:

Logo too large – On Home, Foundation Pages

Logo stretched/skewed – On Membership, Volunteer, Donate, Forms, Contact Pages

Logo too small – On Exec Page

Text overlaps – Home

I have responsive checked in Theme Options and logo set at 550X150 in Header Options. I tried a number of settings posted in the Forum, but can’t figure out the right combination of settings/css. Can you please help?

Thank you!

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
I see marked resolve this topic. Have you managed to resolve the issue?
Thanks
Mohammad

[[email protected]]

Thanks for asking! I thought I resolved the issue by unchecking one of the “remove spacing” options at the bottom of each page. However, I see now that on my Iphone, the logo is skewed and the text overlaps. Can you help with that?

Also, (this is another issue, so if you need me to create another ticket, I can) the main image on the home page loads very slowly. Any suggestions on speeding that up?

Thanks again! Janice

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 767px) {
#header .sticky-wrapper {
  height: 100px !important;
}

#logo img.retina{
width:200px !important;
height:55px !important;
}
}

Thanks
Mohammad

[OneLineStudio]

Hi I’m having issues with mobile responsive too http://www.onelinestudio.co.uk on iPhone5

Homepage – my video play button doesn’t show

Homepage – long title doesn’t respond just cuts off

Testimonials page – text cutting off the animated boxes

Really not sure how to resolve or why this is happening please can you explain/help

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 479px) {
.forcefullwidth_wrapper_tp_banner,.rev_slider_wrapper,.rev_slider{min-height:120px !important;}
h3.spb-center-heading span, h4.spb-center-heading span{line-height:22px !important;}
h3.spb-center-heading, h4.spb-center-heading{white-space:pre-wrap !important;}
}

Thanks
Mohammad

[[email protected]]

That works perfectly! Thank you!!

[Rui Guerreiro – SUPPORT]

No problem. Thanks Mohammad.
-Rui

[OneLineStudio]

Hi Mohammed,

thanks so much for a quick reply. The code solution seems to have worked for the -we work with..- text but not for the issues described in images IMG_0625.png IMG_0626.png which I attached… any thoughts?

Many thanks
helen

[Mohammad – SUPPORT]

Hi,
Please provide me specific page url with issues.
Thanks
Mohammad

[OneLineStudio]

Hi Mohammad,

Thanks for your time with this..

Ok so image img0624 is my homepage http://www.onelinestudio.co.uk/
* Inserting the custom code you provided fixed the original problem of the text ‘We work with…” not being mobile responsive, but that repair code has caused a new problem with the top sliders. Please see image *img0630 attached. This is now happening on every page where the text overlay on the slider slips down into the bottom of the image. This didn’t happen before we inserted the custom code from reply Mohammad – SUPPORT
July 24, 2015 at 8:23 am #197336

* img0625 is also my homepage http://www.onelinestudio.co.uk/
The problem in this image is the play button can’t be seen (top overlaid onto slider)

* img0626 is testimonials page http://www.onelinestudio.co.uk/testimonials/
problem here is the text slips into the bottom of the boxes – have tried several ways around this and no avail?

Thanks for your advice issue is occurring on mobile iPhone 5 mostly

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please remove the last css code and use this custom css code:-

@media only screen and (max-width: 479px) {
h3.spb-center-heading span, h4.spb-center-heading span{line-height:22px !important;}
h3.spb-center-heading, h4.spb-center-heading{white-space:pre-wrap !important;}
.sf-icon-box-content p {line-height: 19px !important;}
}

Thanks
Mohammad

[OneLineStudio]

Thanks so much Mohammad the code you provided has fixed the first problem but still the issues mentioned in previous mail are happening?

* img0625 is also my homepage http://www.onelinestudio.co.uk/
The problem in this image is the play button can’t be seen (top overlaid onto slider)

* img0626 is testimonials page http://www.onelinestudio.co.uk/testimonials/
problem here is the text slips into the bottom of the boxes – have tried several ways around this and no avail?

Also there seems to be a problem with the facebook link in the footer. It works fine and connects to facebook if I select it on a laptop or PC but on MOBILES it does not work. Please advise?

Many thanks
Helen

[Mohammad – SUPPORT]

Hi,
1- Please use this custom css code:-

@media only screen and (max-width: 479px) {
.tp-caption.Oneline_medium_light_white{
top:40px !important;
}
.sf-icon-box-animated .back{
padding:4px !important;
}
}

Thanks
Mohammad

[OneLineStudio]

Really sorry to bother you with this again but still the issue with

* img0625 is also my homepage http://www.onelinestudio.co.uk/
The problem in this image is the play button can’t be seen (top overlaid onto slider)

hasn’t been resolved with any of this code. It seems certain things have a knock on effect on others. Basically I want users on a mobile to be able to see the play button which is overlaid on top of the slider. I would have thought with the theme being mobile responsive that it would do this but it doesn’t seem to work at all. Please can you advise how to do this without impacting anything else?

Many thanks
Helen