Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 31, 2016 at 11:31 am #679906
    cullingfordconsulting

    When using Layout Elements from Avia Layout Builder, is there any way to have a custom display order of the columns when the page is viewed from a mobile device.

    Example below.

    [av_one_third first]Sidebar Content[/av_one_third]

[av_two_third]Main Content[/av_two_third]

    When viewed on mobiles I would like the Main Content to display before/above the Sidebar Content.

    Please advise the best way to do this.

    Thanks in advance.

    September 2, 2016 at 5:35 am #681103
    Rikard

    Hey cullingfordconsulting,

    To achieve what you are looking for you could place the element in different Color Section to display on different screen sizes. You can do this by adding ID’s to your Color Sections in the element options and then show/hide them with CSS:

    @media only screen and (min-width: 768px) {
#desktop {
display:block;
}
#mobile {
display:none;
}
}

@media only screen and (max-width: 767px) {
#desktop {
display:none;
}
#mobile {
display:block;
}
}

    Best regards,
    Rikard

    September 2, 2016 at 6:03 am #681116
    cullingfordconsulting

    Thanks for your response Rikard.

    Am I correct in saying that to use your code I could need to duplicate the content in the order to display for mobile and the order to display for desktop? I have come across this method before but I was hoping to find some CSS or shortcode parameters for the same result without having to duplicate the content.

    September 3, 2016 at 7:35 am #681554
    Rikard

    Hi,

    That is correct, and specify unique ID’s for your Color Section elements. As far as I know there is no solution to make elements collapse the “wrong” way.

    Regards,
    Rikard

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