Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • March 26, 2017 at 12:11 am #766769
    kjwaggz

    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?

    Home

    Thank you!

    • This topic was modified 7 years, 8 months ago by kjwaggz.
    March 26, 2017 at 12:27 am #766774
    kjwaggz

    March 26, 2017 at 12:58 am #766781
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

    March 26, 2017 at 1:01 am #766783
    kjwaggz

    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, 8 months ago by kjwaggz.
    March 26, 2017 at 1:11 am #766786
    Jordan Shannon

    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

    March 26, 2017 at 5:28 am #766809
    kjwaggz

    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, 8 months ago by kjwaggz.
    March 26, 2017 at 7:48 am #766849
    John Torvik

    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

    March 26, 2017 at 5:22 pm #766986
    kjwaggz

    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

    March 26, 2017 at 9:00 pm #767053
    Jordan Shannon

    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

    March 27, 2017 at 3:59 am #767150
    kjwaggz

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

    Admin info provided

    March 27, 2017 at 5:06 am #767179
    John Torvik

    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

    March 27, 2017 at 4:07 pm #767525
    kjwaggz

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

    https://snag.gy/SeM3Zm.jpg

    March 27, 2017 at 4:41 pm #767551
    Jordan Shannon

    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

    March 27, 2017 at 4:51 pm #767556
    kjwaggz

    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;
    }
    }

    March 27, 2017 at 4:56 pm #767560
    Jordan Shannon

    Hi,

    Yes please keep the above code he provided also.

    Best regards,
    Jordan Shannon

    March 27, 2017 at 5:18 pm #767567
    kjwaggz

    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.

    March 27, 2017 at 6:47 pm #767621
    Jordan Shannon

    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

  • Author
    Posts
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.