Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #688160

    Hi
    I’m looking to turn my iconboxes to behave in a responsive manner on mobile and small resolution screens such that the iconbox itself reduces in size. Also oddly on mobile the content (titles) that have iconboxes to the right of them are cut off on mobile devices.
    The second point I am looking to fix is that I’ve added Seperator/white line elements below the title sections of the page. I’ve added an icon in the center of the element but it seems to be not centered on mobile devices. Why is that? Is that a size issue with the element?

    #688202

    Hey ouverz,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 480px){
    .iconbox_left_content .iconbox_content, .iconbox_right_content .iconbox_content {
        width: 100%;
        padding: 20px 0;
    }
    .avia-icon-list .iconlist_content_wrap {
        width: 100%;
        padding: 20px 0;
    }
    .avia-icon-list .iconlist-timeline {
    	display: none;
    }.hr-inner {
        width: 100%!important;
        min-width: 80px;
    }}
    

    Best regards,
    Vinay

    #690911

    Thanks for the response!
    That worked though I had to also add the following to align the hr-inner class in the center.
    .hr-short .hr-inner{
    left:0;
    margin-left:0;
    }

    A related question, some of the separator/white-lines in my code have a class called av-seperator-icon. This class vanishes completely from the source code when on mobile. How would I configure the code to have that class displayed (i.e. have the icon on the line there).

    Thanks in advance

    #691117

    Hi,

    It can be fixed using css please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width:480px) {
    	#top .av-seperator-icon {
        transform: translateX(-48vw);
        background: #FFF;
        width: 30px;
    }}
    

    Best regards,
    Vinay

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.