Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 7, 2018 at 1:24 pm #994408
    kevinjd91

    Hi,

    I want to have the sidebar appear on top of the page, right under the Fullwidth Easy Slider element. I saw a comment on this thread by Victoria. I tried her code which I copied to this thread down below:

    @media only screen and (max-width: 786px) {
	.container {
		display: flex!important;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	/* Sidebar */
	#top .container aside {
		order: 1;
		flex-grow: 1;
	}

	/* Main Content */
	#top .container main {order: 2;flex-grow: 1;}
}

    This code works, but if I have the Fullwidth Easy Slider element on top of the page, then this code does not work. The sidebar is then displayed on the bottom of the page. So how can I have the sidebar displayed right under the Fullwidth Easy Slider element on mobile view?

    Example of the mobile structure that I want to be displayed on the site:

    ——–Header navigation——–
    ——–Fullwidth Easy Slider (Image)——–
    ——–Sidebar——–
    ——–Content——–

    Thank you!

    August 7, 2018 at 5:11 pm #994492
    kevinjd91

    bump

    August 8, 2018 at 9:00 am #994731
    Rikard

    Hi,

    Could you post a link to the page in question so that we can take a closer look please?

    Best regards,
    Rikard

    August 8, 2018 at 2:55 pm #994980
    kevinjd91

    Private Content

    August 9, 2018 at 1:26 pm #995453
    Victoria

    Hi kevinjd91,

    Best regards,
    Victoria

    August 9, 2018 at 5:01 pm #995610
    kevinjd91

    Hey Victoria,
    Sorry, my bad. It should be up now.

    August 12, 2018 at 4:21 pm #996450
    Victoria

    Hi kevinjd91,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    

@media only screen and (max-width: 479px) {
    #full_slider_1, 
    #full_slider_1 .av_slideshow_full.avia-slideshow,
    #full_slider_1  .avia-slideshow-inner,
    #full_slider_1 .avia-slideshow li,
    #full_slider_1 .avia-slideshow li img {
      min-height: 200px;
    }
    #full_slider_1 .avia-slideshow li img {
      width: 180%;
    }
}

@media only screen and (max-width: 786px) {
	#after_full_slider_1 .container {
		display: flex!important;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	/* Sidebar */
	#top .container aside {
		order: 1;
		flex-grow: 1;
	}

	/* Main Content */
	#top .container .content {order: 2;flex-grow: 1;}
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 12, 2018 at 5:36 pm #996465
    kevinjd91

    Hey Victoria,
    It works now! I really appreciate your time and help. Thank you very much! :)

    August 13, 2018 at 4:58 am #996528
    Rikard

    Hi,

    Great, glad you got it working :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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