Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #766769

    Hi there, the icon titles on the home page as well as the text don’t seem to be showing well on iPad.

    In the Why Us section, the icon title and text are not spaced properly when viewing on iPad. Possible solutions?

    Thank you!

    • This topic was modified 7 years, 9 months ago by kjwaggz.
    #766774

    #766781

    Hi,

    Could you please provide another screenshot. It is not showing above.

    Best regards,
    Jordan Shannon

    #766783

    https://drive.google.com/file/d/0BwzKOY7Ha1Y9Yk9RaHFfT09TSm8/view

    Hope that works. I think I’m missing where I can upload an image from a scratch screen shot.

    If not, it’s http://www.lamberthomeinspections.com, the Why Us section at the bottom of the home page.

    • This reply was modified 7 years, 9 months ago by kjwaggz.
    #766786

    Hi,

    I am not able to view the error on my end as it seems to be normal. If you can provide a screen of exactly how you see it, I can make the proper adjustments. Maybe try the service to get the screenshot https://snag.gy/

    Best regards,
    Jordan Shannon

    #766809

    The view when I emulate as iPad. For example, the “High Communication” title gets cut off.

    https://snag.gy/ODu0MY.jpg

    • This reply was modified 7 years, 9 months ago by kjwaggz.
    #766849

    Hi,

    Thanks for the screenshot :)

    You have to options to fix it:

    1st – You can apply the word-break CSS property to have this result: http://prntscr.com/eojry7

    If you want the above result, add this custom CSS code at Enfold Theme Options > General Styling > Quick CSS

    
    .iconbox_content_title {
       word-break: break-all !important;
    }
    

    2sd – You can decrease the title size to have this result: http://prntscr.com/eojsg2

    If you want the above result, add this custom CSS code at Enfold Theme Options > General Styling > Quick CSS

    
    .iconbox_content_title {
      font-size: 10px !important;
    }
    

    Best regards,
    John Torvik

    #766986

    Hi John!

    Thanks for the reply.

    I implemented each one separately, and the first solution is closest, however 3 of the boxes (“We’re Certified, Prompt Support and Communication) don’t seem to be wrapping correctly. Shouldn’t a new word bump down to the next line?

    https://snag.gy/ycLj5b.jpg

    #767053

    Hi,

    Since the title are a bit long(especially communication) it would be better to arrange 2×3 on tablet like screens. That would actually allow the titles to fit on one line.  If you can provide admin information I can set this up for you.

    Best regards,
    Jordan Shannon

    #767150

    Ok, so arrange 2X3 using CSS, or the arrangement of the icon boxes in the editor?

    Admin info provided

    #767179

    Hi,

    I`ll provide some custom CSS code to change the column grid to 2X3 only in the iPad and only on this page.

    
    @media screen and (min-width: 766px) and (max-width: 769px) {
       .page-id-19 .avia-builder-el-20 .first {
        clear: initial !important;
     }
    
    .page-id-19 .avia-builder-el-20 .av_one_third {
      margin-top: 0 !important;
      margin-bottom: 30px;
      width: 50% !important;
     }
    
    .page-id-19 .avia-builder-el-20 .column-top-margin {
      margin-top: 0 !important;
     }
    }
    

    let me know if it worked :)

    Best regards,
    John Torvik

    #767525

    It’s close! The 2nd/3rd/5th/6th icons are slightly out of alignment…

    https://snag.gy/SeM3Zm.jpg

    #767551

    Hi,

    I added the following:

    @media only screen and (max-width: 768px)  {
    .flex_column.av_one_third{
    width:100%!important;
    margin-left:0px!important;
    }
    }

    It should be correct now, please test.

    Best regards,
    Jordan Shannon

    #767556

    This looks great now, thank you for your persistence and patience!

    So should I leave the CSS that John gave me above? Or are they working together to solve this?

    @media screen and (min-width: 766px) and (max-width: 769px) {
    .page-id-19 .avia-builder-el-20 .first {
    clear: initial !important;
    }

    .page-id-19 .avia-builder-el-20 .av_one_third {
    margin-top: 0 !important;
    margin-bottom: 30px;
    width: 50% !important;
    }

    .page-id-19 .avia-builder-el-20 .column-top-margin {
    margin-top: 0 !important;
    }
    }

    #767560

    Hi,

    Yes please keep the above code he provided also.

    Best regards,
    Jordan Shannon

    #767567

    Thanks again guys for the support. Are there fixes in the works to address the responsiveness issues with Full-Width easy slider, icon boxes, etc.? Your service and support is amazing, I just feel bad you guys have to give so many CSS fixes, instead of the theme and all elements within it being truly mobile-friendly.

    Thanks again guys, I appreciate the responsiveness. Keeps me loving the theme.

    #767621

    Hi,

    Yes rest assured we are making updates and improvements with each and every new release. We appreciate the kind words, and look forward to helping you in the future.

    Best regards,
    Jordan Shannon

Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Icon Title and Text not presenting well on Ipad’ is closed to new replies.