Log in Get SwiftGrid →
Resolved

sidebar position on mobile view

Ultra Theme started by cumioco Feb 6, 2019 9 replies
cumioco Feb 6, 2019 · 10:50 pm #11993

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

Andrew Misplon Puro Feb 7, 2019 · 8:38 am #11994

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.

Andrew Misplon Puro Feb 7, 2019 · 9:01 am #11995

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.

cumioco Feb 7, 2019 · 5:17 pm #11998

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? 🙁

Andrew Misplon Puro Feb 7, 2019 · 5:32 pm #11999

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.)

cumioco Feb 9, 2019 · 1:56 pm #12027

🙁 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.

Andrew Misplon Puro Feb 9, 2019 · 2:03 pm #12028

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.

Andrew Misplon Puro Feb 9, 2019 · 2:06 pm #12029

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

Below the rule you’ve added is:

1.0 - Normalize

That should be preceded by a /*

cumioco Feb 9, 2019 · 2:12 pm #12030

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!!!!!

Andrew Misplon Puro Feb 9, 2019 · 2:14 pm #12031

Glad it’s working 🙂

All the best.

10 posts