Mobile Challenge: All Text within Any Type of Full-Width Element is NOT Centered

[AidenMarketing]

Hello,

First let me say that I did research this online support forum and found 3 other tickets that were similar in ways to the problem we are experiencing with our site; however, each of the tickets that I found had 3 different suggested solutions of code to add to the custom CSS and when I tried each of them, none of them worked to resolve the problem that we are having with our site when viewed from a mobile phone.

*** HERE’S THE PROBLEMATIC BEHAVIOR WHEN VIEWIN OUR SITE FROM A MOBILE PHONE (desktop & laptop viewing is fine; problem only exists on mobile:

1) For any type of full-width element within a page (i.e. Page Title, full-width text, and Impact Text w/CTA Button), the text is pushed to the right and sometimes even is cut-off versus being properly centered.

2) We noticed this issue after upgrading to Version 1.70 about a month ago — before them, there was no problem with alignment of text within the above referenced elements.

3) If you visit our site AIDENMARKETING.COM from a mobile phone, you will see that examples of the misaligned text on our home page (full-with text box elements), our What is Inbound Marketing Page (misaligned text in the page header and in the Impact Text w/CTA Button near the bottom of the page).

4) Is there a code fix that will fix the problem for all full-width elements within the theme on mobile? When viewing on mobile, I can actually see the text move from center to the right when the page is rendering.

5) Here are the 3 different proposed solution of code to add to the custom CSS that I found in different tickets for similar problems within this Support forum but when I applied them each individually, none of them fixed the problem for our site; therefore, I’m looking for a FIX that will actually work:

**PROPOSED SOLUTION #1 FOUND IN THIS SUPPORT FORUM THAT DIDN’T WORK FOR OUR SITE**
@media only screen and (max-width: 479px) {
.page-heading h1, .page-heading h3 {
    margin-left: -25px !important;
}
}

**PROPOSED SOLUTION #2 FOUND IN THIS SUPPORT FORUM THAT DIDN’T WORK FOR OUR SITE**
@media only screen and (max-width: 767px) {
.full-width-text {
box-sizing: border-box;
}
}

**PROPOSED SOLUTION #3 FOUND IN THIS SUPPORT FORUM THAT DIDN’T WORK FOR OUR SITE**
@media (max-width: 767px){
.span12, .row-fluid .span12 {
    width: 100%!important;
  }
}

THANK YOU IN ADVANCE FOR YOUR ASSISTANCE & PROMPT REPLY TO THIS TICKET. — We want our visitors to have a great user experience on our site from mobile and right now, that is not the case with text being misaligned in the full-width based elements.

[David Martin – Support]

Hi,

Yes I see the issue and the above CSS will not change anything relating to that, however I cannot replicate this locally on my dev version. Have you made any customisations to the theme’s CSS files?

Cheers,
David.

[AidenMarketing]

Hi David,

Thanks for your reply in confirming that none of the proposed solutions that I found via the forum will work to correct the problem we are experiencing. We’ve had the FlexForm theme for almost 2 years and we’ve never had this problem until we upgraded to v 1.70 about 5 weeks ago.

To answer your question, NO – we’ve not ever gone in and made any customization edits directly to the CSS files and we’ve not made any additional changes to the theme after upgrading to v 1.70. — Please advise if you have any suggested fix to resolve the alignment issue we are having with all of our full-width elements. If you need me to provide you access to our hosting account or FTP login for further investigation, please let me know.

Here is what we have in the Custom CSS box in the General Option of the FlexForm theme (these are just icon related styling & this is all that we have in this box/field which had existed for over 1 year; way before the upgrade to v 1.70 — nothing else:

[David Martin – Support]

Hey,

Please try adding this:

@media only screen and (max-width: 767px) {
.page-heading.span12.clearfix.alt-bg.alt-two {
    width: 100%!important;
}
}

Thanks,
David.

[AidenMarketing]

Hi David,

Thanks for the sending over the code. I copied/pasted into the Custom CSS field and it resolved part of the issue. When viewing our site now, the text within the page title header bars are now centered (YEAH!!); however, the text within the full-width Impact Text box w/CTA buttons still have the text shifted / misaligned to the right.

We are half way their in resolving the issue with the code that you supplied. Any thoughts on what we can try next to get the other full-width elements in the theme (outside of the page title header which is now resolve) to show properly with the text centered?

Thx in advance.

[AidenMarketing]

P.S. – Our “What Is Inbound Marketing” page is a good example of a page where the page title header bar now has the text centered (post applying the code you sent me), but if you look at the bottom of this page, you’ll see that the bar w/the Impact Text + CTA button element has the text still misaligned to the right.

Hope this example helps.

[David Martin – Support]

Hi,

I do not see any misalign text elements, I must be missing where you refer to.

I am looking on this page on iPhone6 – could you screenshot this for me?

Thanks,
David.

[AidenMarketing]

Hi David,

Thanks for the reply. It’s interesting that you are saying that everything looks good on your end from an Iphone6.

Our team has Android based Samsung Galaxy phones. From viewing our “What Is Inbound Marketing page” from our phone, I have attached 2 screenshots for you. One shows the now properly centered tex in the title page at the top that was fixed when I applied the custom css code that you sent to me. The other screenshot show the misaligned text that appears in the Impact Text w/CTA button section towards the bottom of the same page.

I hope the visual screenshots help you in identifying what the problem may be and what is needed to fix it.

Thanks much – Stacie (Aiden Marketing)

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Perfect, thanks for the screenshots. Please try adding this:

@media only screen and (max-width: 767px) {
.wpb_impact_text.alt-bg {
    width: 100%!important;
}
}

Thanks.

[powfinder]

Hey there – I’m experiencing the same issue with page builder elements. I added the 2 snippets of code above to the custom CSS section of the theme options. It fixed the right alignment issue on the impact text + button element, but not the testimonials element (See attachment). I’m running version 1.8.1 of the theme and viewing on an iphone 6.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

@powfinder – what is your URL?

– David.

[powfinder]

it’s a client’s site. still in progress. also noticed the page titles are exhibiting the same problem.

http://www.tahoebearbuster.com/newsite

thanks for taking a look!

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media screen and (max-width: 767px) {
.wpb_testimonial_slider_widget.wpb_content_element.alt-bg{
padding-left:0px !important;
}
}

Thanks
Mohammad

[powfinder]

Thanks, that worked, but only for the testimonials. I’m still experiencing the exact same issue with page titles and page builder elements such as featured clients (See pics). PLEASE tell me there’s a way to solve this issue with one fell swoop, rather than pasting in snippets of code one by one, every time we discover another element that is misaligned. Seems like an unnecessary game of whack-a-mole that nobody wants to play.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please try to use this custom css code:-

@media screen and (max-width: 767px) {
.alt-bg{
padding-left:0px !important;
}
}

Thanks
Mohammad