Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 18, 2016 at 6:02 pm #688160
    ouverz

    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?

    September 18, 2016 at 9:04 pm #688202
    Vinay

    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

    September 23, 2016 at 4:59 pm #690911
    ouverz

    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

    September 24, 2016 at 9:42 am #691117
    Vinay

    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

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