New Landing › How can we help? › Themeforest Theme Support › Flexform › Mobile Challenge: All Text within Any Type of Full-Width Element is NOT Centered

Viewing 15 posts - 1 through 15 (of 17 total)
1 2
  • Back to forum
    Posted in: Flexform
  • November 11, 2015 at 3:28 pm #227862
    AidenMarketing
    Member
    Post count: 7

    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.

    November 12, 2015 at 1:36 pm #228186
    David Martin – Support
    Moderator
    Post count: 20834

    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.

    November 12, 2015 at 3:29 pm #228251
    AidenMarketing
    Member
    Post count: 7

    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:

    November 13, 2015 at 11:56 am #228527
    David Martin – Support
    Moderator
    Post count: 20834

    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.

    November 19, 2015 at 4:57 pm #230003
    AidenMarketing
    Member
    Post count: 7

    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.

    November 19, 2015 at 4:59 pm #230004
    AidenMarketing
    Member
    Post count: 7

    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.

    November 23, 2015 at 11:06 am #230546
    David Martin – Support
    Moderator
    Post count: 20834

    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.

    November 23, 2015 at 3:18 pm #230643
    AidenMarketing
    Member
    Post count: 7

    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.
    November 24, 2015 at 6:34 pm #231063
    David Martin – Support
    Moderator
    Post count: 20834

    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.

    March 3, 2016 at 7:47 pm #253523
    powfinder
    Member
    Post count: 4

    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.
    March 3, 2016 at 7:49 pm #253525
    David Martin – Support
    Moderator
    Post count: 20834

    @powfinder – what is your URL?

    – David.

    March 3, 2016 at 9:16 pm #253533
    powfinder
    Member
    Post count: 4

    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!

    March 7, 2016 at 8:34 am #253824
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    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

    March 11, 2016 at 5:47 pm #254963
    powfinder
    Member
    Post count: 4

    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.
    March 12, 2016 at 7:25 am #254999
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

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

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

    Thanks
    Mohammad

  • Back to forum
    Posted in: Flexform
Viewing 15 posts - 1 through 15 (of 17 total)
1 2

You must be logged in and have valid license to reply to this topic.

License required for the following item
Flexform - Retina Responsive Multi-Purpose Theme
Login and Registration Log in · Register