Support/Ultra Theme/sidebar position on mobile view

[Resolved] sidebar position on mobile view

  • Author
    Posts
  • February 6, 2019 at 10:50 pm #11993

    cumioco
    Participant

    hey there 🙂
    if viewed on a mobile device, i need to have the sidebar on top of the page, rather than at the bottom of it.
    I’ve tried a lot, that seemed to work for others, but not for me. so i thought its maybe a theme based problem.
    Can you help me out?

    Best regards!
    Johannes

    February 7, 2019 at 8:38 am #11994

    Andrew Misplon
    Keymaster

    Hi Johannes

    Thanks for reaching out.

    Do you know what worked for others?

    The sidebar is placed after the main container in the document flow. In the case of Ultra, the float’s are removed for mobile causing the containers to assume their natural position in the float order.

    February 7, 2019 at 9:01 am #11995

    Andrew Misplon
    Keymaster

    Hi again 🙂

    You can try the following added to Customize > Additional CSS or the Custom CSS location of your choice:

    @media (max-width: 768px) {

	.sidebar .page-header ~ .container {
		display: flex;
		flex-wrap: wrap;
	}

	.sidebar #primary {
		order: 2;
	}

	.resp #secondary {
		border-color: #eaeaeb;
		border-top: none;
		border-bottom: 1px solid #eaeaeb;
		margin-top: 0;
		margin-bottom: 3.57143em;
		padding-bottom: 3.5em;
		width: 100%;
	}	

}

    This is more of a premium support task, just a heads up for future expectation management. Thanks.

    February 7, 2019 at 5:17 pm #11998

    cumioco
    Participant

    Thanks a lot for the code!
    Unfortunately it does not work 🙁

    http://khuf.eu/meine-wege/

    Can you see any obvious mistake I am making? 🙁

    February 7, 2019 at 5:32 pm #11999

    Andrew Misplon
    Keymaster

    Try changing the rules added to:

    @media (max-width: 768px) {

        .site-content .container:first-of-type {
                display: flex !important;
                flex-wrap: wrap !important;
        }

        .sidebar #primary {
                order: 2 !important;
        }

        .resp #secondary {
                border-color: #eaeaeb  !important;
                border-top: none !important;
                border-bottom: 1px solid #eaeaeb !important;
                margin-top: 0 !important;
                margin-bottom: 3.57143em !important;
                padding-bottom: 3.5em !important;
                width: 100% !important;
        }       

}

    (It looks like the contents of the style.css file has been inserted into Custom CSS, ideally, that shouldn’t be done.)

    February 9, 2019 at 1:56 pm #12027

    cumioco
    Participant

    🙁 it still doesn’t work.

    I took over the theme from another project of my client, so i can’t really say what to keep in the custom css – and what to delete in order to just have the chances in the custom css.

    February 9, 2019 at 2:03 pm #12028

    Andrew Misplon
    Keymaster

    Yeah, that’s a big job, you’d have to use a diff tool.

    The Custom CSS on the website provided doesn’t match the Custom CSS I last sent.

    February 9, 2019 at 2:06 pm #12029

    Andrew Misplon
    Keymaster

    Please, see: https://imgur.com/a/SHGshXD

    Below the rule you’ve added is:

    1.0 - Normalize

    That should be preceded by a /*

    February 9, 2019 at 2:12 pm #12030

    cumioco
    Participant

    oh…shoot. i am sorry. It didnt save the changes. although i checked it, it always fell back on the version before.
    I had to logout and log in again o.O

    It works now!! Thanks a lot for looking into it – even though it was a bit much for basic support. Thank you!!!!!

    February 9, 2019 at 2:14 pm #12031

    Andrew Misplon
    Keymaster

    Glad it’s working 🙂

    All the best.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Scroll to top