Mobile View for 2-Column Page w/ Menu

TBC · 2018-04-08 02:22:17

Everyone here is always so helpful, so I am hopeful that someone here can let me know how to do this...

Example of in-process Pangolin page.

http://www.bcphotoadventures.com/TESTSITE/workshoptest/

For our workshops, I have created a two-column template that looks fine until we go down to the mobile view in which the menu is in the right, and my normal right palette information slinks to the bottom and out of sight.

It would be great if I could figure out a way to have the menu appear in a left, fly-out panel for mobile, and the pallet #1 right-column information fly out from the right.

Any thoughts?

Thanks, and take care,

Daniel Leu · 2018-04-08 03:24:55

Hmmm... this sounds tricky.

I would create your two columns using the the responsive grid. The desktop look would remain the same. But on mobile, each column would take the entire width of the page and your sub menu would appear after the main text. Since it contains the price of your workshop, users will scroll down the page to look for this info and find all your other links.

TBC · 2018-04-08 19:00:59

Thanks, Daniel. I created the two columns to take place of my former practice of having two pages, one for the workshop, the other for the information. So you are suggesting instead of using the right pallet, simply set it up as two columns as I have done, for example, on parts of the Resources > Photographers page?

I could certainly do that, but what about a separater of some sort that goes down the full length of hte page? regardless of the length of the page? That is the beauty of the pallet.

Take care,

Last edited by TBC (2018-04-08 19:02:06)

Daniel Leu · 2018-04-09 02:57:15

Have a look at http://backlight.danielleu.com/workshop. It is really easy to do and with some custom CSS you can get the look and feel you want.

<div class="grid_12"> 
	<div class="col_9">  
		<h2>Workshop XYZ</h2>
		Lorem ipsum dolor sit amet,....
	</div>

	<div class="col_3" >  
		<h3>More Infos</h3>
		Lorem ipsum dolor sit amet,... 
	</div>
</div>

And the custom.css:

@media screen and (min-width: 1024px) {	
	.slug-workshop .col_3 {
		box-shadow: -3px 0 3px -2px rgba(0,0,0,0.65);
	}
}

I use the slug 'workshop' for the workshop page. This way I can easily target my CSS for just this page and not affect anything else.

Community @ The Turning Gate

#1 2018-04-08 02:22:17

Mobile View for 2-Column Page w/ Menu

#2 2018-04-08 03:24:55

Re: Mobile View for 2-Column Page w/ Menu

#3 2018-04-08 19:00:59

Re: Mobile View for 2-Column Page w/ Menu

#4 2018-04-09 02:57:15

Re: Mobile View for 2-Column Page w/ Menu

Board footer