Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • July 17, 2018 at 4:53 pm #986507
    flipstar99

    Hi,
    I want to display the sidebar on top in mobile screens.
    In detail: I want to show the category filter above the product-overview in the /shop page.
    In default the sidebar is displayed in the bottom of the page in mobile screens.

    I’ve found this css snippet in your documentation:

    sidebar

    Is this still the correct css snippet, because it shows not a perfect layout after implementing this?
    Example: The product-pictures in the shop overview page (/shop) on mobile screen are not as wide as they used to be, when the sidebar was at the bottom of the page. There is some space on the right side of the pictures.

    Can you please check this snippet?

    Thank you!

    July 18, 2018 at 1:03 pm #986949
    Victoria

    Hey Matthias,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    July 18, 2018 at 2:09 pm #986978
    flipstar99

    Hi Victoria,
    please see the website url in the private content area. But the css snippet is not live yet, because of the layout problem.

    Can you check this maybe with your live test-websites you maybe have?

    Thanks

    July 20, 2018 at 12:53 pm #987786
    Victoria

    Hi flipstar99,

    Where are you adding the code and which page were you checking?

    Best regards,
    Victoria

    July 20, 2018 at 3:42 pm #987881
    flipstar99

    Hi Victoria,

    I did put the code-snippet from your documentation into the Quick-CSS box in the backend enfold-tab “Allgemeines Styling”.
    The code is removed now, because it was not working properly. The sidebar was shown on the top, but the product pictures where smaller after I switched the code live.
    I have checked all shop overview pages.

    July 21, 2018 at 10:28 am #988139
    flipstar99

    Can you please check the css snippet on a website you can test with, if the product pictures are also smaller than they were before?

    July 21, 2018 at 9:14 pm #988221
    Victoria

    Hi flipstar99,

    Try using the code 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;}
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    July 30, 2018 at 11:55 am #991474
    flipstar99

    Thank you, it’s working fine now.
    Maybe its a good idea, to update your css snippet in the enfold-documentation as well.

    Thanks

    July 31, 2018 at 11:39 am #991884
    Ismael

    Hi,

    Great! Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Sidebar on top in mobile’ is closed to new replies.