Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

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

TBC
Member
From: North Carolina, US
Registered: 2014-03-19
Posts: 123
Website

Mobile View for 2-Column Page w/ Menu

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,


TBC (The Barefoot Contessa, alias Margo Taussig Pinkerton)
http://www.BCphotoadventures.com/
www.BC-FineArtPhotography.com
perpetual works in progress

Offline

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

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,016
Website

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

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.


Daniel Leu | Photography   
DanielLeu.com

Offline

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

TBC
Member
From: North Carolina, US
Registered: 2014-03-19
Posts: 123
Website

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

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)


TBC (The Barefoot Contessa, alias Margo Taussig Pinkerton)
http://www.BCphotoadventures.com/
www.BC-FineArtPhotography.com
perpetual works in progress

Offline

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

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,016
Website

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

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.


Daniel Leu | Photography   
DanielLeu.com

Offline

Board footer

Powered by FluxBB