Pallet 1 text in mobile and large screen

pideja · 2019-11-02 04:53:09

I have this site with vertical navigation in the left side pallet.
In one of the albums, I am trying out displaying the credits that correspond to the gallery within the album.
On the large screen display, I wrote the credits in Backlight>Publisher>Galleries>BILAN>Edit Album>Page Content>Pallet 01 copy. This results in the credits being displayed correctly under the navigation in Pallet 01.
The source code looks like this:

<div class="widget textwidget">

			<div class="textwidget">
			<p>Texte de  <strong>MARCEL DUBÉ</strong> </p>
<p>Mise en scène: BENOÎT VERMULEN<br />
Décor: RAYMOND MARIUS BOUCHER<br />
Éclairages: ANDRÉ RIOUX<br />
Costumes: LINDA BRUNELLE</p>
<p>du 13 novembre au 8 décembre 2019</p> 
						</div>

However, in the Mobile display, it is not feasible because written this way, the credits are buried under the hamburger menu.

So, I should have these credits written in the main collum, just over the thumbnails for them to show up on the main screen of the mobile.
Rod has suggested...

Write your text using html, putting the text for the pallet in a div with the ID of “pallet-credits” (or whatever makes sense)
And put the album copy text inside a div with an ID of “copy-credits”

Does this mean I should write these in Backlight>Publisher>Galleries>BILAN>Edit Album>Page Content>Main copy for the large display, and in in Backlight>Publisher>Galleries>BILAN>Edit Album>Page Content>Pallet 01 copy for the mobile?

I'm still learning this stuff and sometimes the curve is steep, at least for me.

https://pideja.ca/galleries/03-tnm/sais … 9/2-bilan/

rod barbee · 2019-11-02 06:44:38

Does this mean I should write these in Backlight>Publisher>Galleries>BILAN>Edit Album>Page Content>Main copy for the large display, and in in Backlight>Publisher>Galleries>BILAN>Edit Album>Page Content>Pallet 01 copy for the mobile?

Exactly
Put the copy in a div with its own ID and then write css to display it when needed (using a media query that has the same breakpoint as your page template)

rod barbee · 2019-11-02 07:04:05

Use code like this in the album's pallet:

<div id="pallet-credits">
	<p>Your text</p>
	<p>Your text</p>
	<p>Your text</p>
</div>

and this in the album's main copy:

<div id="main-copy-credits">
	<p>Your text</p>
	<p>Your text</p>
	<p>Your text</p>
</div>

Add this to your custom css:

/*This makes it so that the copy in the #main-copy-credit div is not displayed by default*/

#main-copy-credits {
	display:none;
}

/*This controls when the text is displayed. Set max-width to the same break-point as the page template. 
For browser widths at the break-point or less (mobile sizes), the copy in the #main-copy-credits div will be displayed and 
the copy in the #pallet-credit div won't be*/	

@media screen and (max-width: 640px) {
		#main-copy-credits {
			display:block;
		}
		#pallet-credits {
			display:none;
		}
}

pideja · 2019-11-04 03:13:40

Implemented this code and...all formatting is lost! https://pideja.ca/galleries/03-tnm/sais … 9/2-bilan/
Vertical navigation is now below the thumbnail grid on the desktop; it should rather look like this: https://pideja.ca/galleries/03-tnm/sais … 1-candide/. A by-product is that now the credits show up on the larger image page as well, but correctly formatted. Interesting.
On the mobile, credits are over the thumbnails but there is no longer any navigation under the hamburger.

Last edited by pideja (2019-11-04 03:16:33)

rod barbee · 2019-11-04 03:36:20

must be something to do with your settings, because it's working fine for me on my test site.

In any html you've written for that page, make sure all tags are properly closed

And make sure you're using a plain text editor to write the html and css

And for the copy, make sure you're either copy/pasting from a plain text editor or that you're writing the html directly in the album copy fields

pideja · 2019-11-04 04:01:52

I copied the code from the reply and put in the requisite credits. Looks like this:

credits
and, here is the complete CSS code:

    /* Style the header */

		.body {
				/*background-blend-mode: lighten;*/
				background-color: #000000;
				/*background-image: #000000;
*/
		}
		/* Kabel font */

		font-family: Helvetica Neue,'sans serif';
		src: url (/custom/css/ITCKabelStd-Medium.otf);
}
    /* Pallet */
.page__pallet {
		background-color: FEF5D2;
		color: #f7f5d2;
		flex-basis: auto;
		flex-grow: 1;
		margin: 0px 0;
		min-width: 200px;
		max-width: 200px;
		width: 200px;
}
   /* pallet text-align*/
/*.widget {
		color: #f7f5d2;
		text-align: center;
		font-size: 0.875em;
		line-height: 1.5em;
		padding: 0 0px;
}*/

/*This makes it so that the copy in the #main-copy-credit div is not displayed by default*/

#main-copy-credits {
	display:none;
}

/*This controls when the text is displayed. Set max-width to the same break-point as the page template. 
For browser widths at the break-point or less (mobile sizes), the copy in the #main-copy-credits div will be displayed and 
the copy in the #pallet-credit div won't be*/	

@media screen and (max-width: 640px) {
		#main-copy-credits {
			display:block;
		}
		#pallet-credits {
			display:none;
		}
}
   /* page copy (mentions créateurs)*/
.the_copy {
		font-size: 1rem;
		line-height: 1.5rem;
		margin: 0;
}
   /* large image */
.single_image figcaption {
		font-family: Helvetica Neue, 'sans serif';
		text-align: center;
		font-size: 1.00em;
		color: #e0e0e0;
}
:first-child {
		font-weight: light;
}
:nth-child(2) {
		font-weight: italic;
}
.thumbnail {
		position: relative;
		width: 200px;
		height: 200px;
		overflow: hidden;
}
   /* contact */
@media only screen and (min-width: 768px) {
		.contact-form {
				margin: 0 auto !important;
				width: 50%;
		}

		.contact-form input {
				max-width: 100% !important;
		}
	 /* Display list items side by side */

		ul.breadcrumbs li {
				display: inline-block;
				font-size: 1 rem;
				padding: 60px 16px;
		}
		/* Add a color to all links inside the list */

		.breadcrumbs li a {
				font-weight: light;
				font-size: 1 rem;
				color: rgb(0, 0, 0);
		}
		/* Add a color on mouse-over */

		.breadcrumbs li a:hover {
				color: rgb(255, 246, 208);
				font-weight: 200;
		}
		/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

		/* Portrait */

		@media only screen

		and (min-device-width: 375px)

		and (max-device-width: 667px)

		and (-webkit-min-device-pixel-ratio: 2)

		and (orientation: portrait) {

		}

		/* Landscape */

		@media only screen

		and (min-device-width: 375px)

		and (max-device-width: 667px)

		and (-webkit-min-device-pixel-ratio: 2)

		and (orientation: landscape) {

		}
		/* mobile navigation */

		@media screen and (max-width: 667px) {
				.page__toggle__buttons label {
						margin-right: 10px /*!important*/;
				}
				.force-mobile-nav .page__toggle__buttons label::after {
						display: inline;
						content: 'Menu';
				}
				.top-bar,
				.middle-bar,
				.bottom-bar {
						display: none;
				}
		/* @media only screen and (min-width: 375px)/* album thumbnails */
				.albumthumbnail {
						position: relative;
						width: 100%;
		/* height: 50px; */
						/*box-sizing: border-box;*/
						overflow: hidden;
				}
		/* Style the navigation menu */
				.page__toggle__buttons label {
						overflow: hidden;
						background-color: #333;
						position: relative;
				}
		/* Style navigation menu links */
				.page__toggle__buttons label a {
						color: white;
						padding: 14px 16px;
						text-decoration: none;
						font-size: 17px;
						display: block;
				}
		/* Style the hamburger menu */
				.page__toggle__buttons label .icon {
						background: black;
						display: block;
						position: absolute;
						right: 0;
						top: 0;
				}
		/* Add a grey background color on mouse-over */
				.page__toggle__buttons label a:hover {
						background-color: #ddd;
						color: black;
				}
		/* Style the active link (or home/logo) */
				.active {
						background-color: #4CAF50;
						color: white;
				}
}

I commented the previous CSS settings (Pallet text-align) but left in the "page copy (mentions créateurs)" active. It does not seem to do anything anyway.

rod barbee · 2019-11-04 04:31:36

you haven’t included the closing </div> tags for either copy section

pideja · 2019-11-04 10:07:48

Sorry about that...looks good now.

Thank you.

pideja · 2019-11-04 22:52:24

UPDATE:

Thanks to your help, I'm moving along although still quite slowly.
I've started styling the credits more to my liking, using CSS and based on the HTML code you suggested.

I will now implement this formatting all through the site, to all albums.

Community @ The Turning Gate

#1 2019-11-02 04:53:09

Pallet 1 text in mobile and large screen

#2 2019-11-02 06:44:38

Re: Pallet 1 text in mobile and large screen

#3 2019-11-02 07:04:05

Re: Pallet 1 text in mobile and large screen

#4 2019-11-04 03:13:40

Re: Pallet 1 text in mobile and large screen

#5 2019-11-04 03:36:20

Re: Pallet 1 text in mobile and large screen

#6 2019-11-04 04:01:52

Re: Pallet 1 text in mobile and large screen

#7 2019-11-04 04:31:36

Re: Pallet 1 text in mobile and large screen

#8 2019-11-04 10:07:48

Re: Pallet 1 text in mobile and large screen

#9 2019-11-04 22:52:24

Re: Pallet 1 text in mobile and large screen

Board footer