Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 5, 2022 at 10:38 pm #1350683
    babyboymik

    Hello guys,

    Is there any way I can add a left and right sidebar?

    KR,
    Mike

    May 6, 2022 at 6:31 am #1350736
    Nikko

    Hi Mike,

    Create a page and use the Avia Layout Builder.
    Create 1/5, 3/5 and 1/5 columns respectively (you can use different columns as you see fit)
    On both 1/5 columns add a Widget Area (under Content Elements) and your contents to the 3/5 column.
    In the widget area you should be able to select which sidebar you want to use.
    Hope it helps.

    Best regards,
    Nikko

    May 11, 2022 at 1:58 pm #1351372
    babyboymik

    Hello Nikko

    Thanks for that. I did the layout and sets the columns but now the mobile version doesn’t detect they are sidebars. How can I make those sidebars not show on small & medium devices? I have left the URL in private :)

    BR,
    M

    May 11, 2022 at 3:40 pm #1351403
    Rikard

    Hi,

    You can select to hide the columns you don’t want to show on mobile under Advanced->Responsive in the element options.

    Best regards,
    Rikard

    May 11, 2022 at 8:27 pm #1351434
    babyboymik

    Hello,

    When I do that, on landscape mode on mobile devices, it shows. I want it on both landscape and portrait mode not to show. I have attached an example in private.

    Thanks again,

    Mike

    May 11, 2022 at 8:41 pm #1351436
    babyboymik

    I’ve tried adding custom css to both sidebars and adding this css code but doesnt work:

    @media only screen and (min-width: 1440px) {
    .sidebar-right {
    display: none;
    }
    .sidebar.left {
    display: none;
    }
    }

    May 13, 2022 at 1:33 pm #1351672
    Mike

    Hi,
    Thank you for your patience, to hide the sidebars on mobile landscape and increase the main content to 100% width, try this css:

    @media only screen and (max-width: 895px) and (orientation: landscape) {
#top .entry-content-wrapper > .sidebar-left,
#top .entry-content-wrapper > .sidebar-right {
    display: none;
}
#top .entry-content-wrapper > .sidebar-left + .av_three_fifth {
	margin-left: 0;
    width: 100%;
}
}

    I believe the max-width: 895px is correct, but feel free to adjust to suit your needs.
    After applying the css, please clear your browser cache and sg-cache check.

    Best regards,
    Mike

    May 13, 2022 at 4:50 pm #1351680
    babyboymik

    Hello Mike,

    I’ve tried it but doesn’t seem to be working.

    I added a link below so you can check it yourself with the specific layout and columns.
    The thing is every page has a different widget column added as the left and right sidebar. I don’t know if that has something to do with it not working but where the coding you had sidebar-left for example, I tried changing the name to the widget column of the page, and still not working. I also tried increasing the max width.

    Let me know if I did something wrong…

    I’ll wait for your response.

    Kind Regards,
    Mike

    May 13, 2022 at 11:40 pm #1351722
    Mike

    Hi,
    Thanks for the feedback, above you had linked to your homepage and the sidebars had the custom classes sidebar-left & sidebar-right please check the css on that page.
    The new page doesn’t have these classes, if you add these classes to the first and last 1/5 columns then it should work.

    Best regards,
    Mike

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