Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
I hesitated to submit this issue, but frankly, I am at a loss with this issue(s). I am in the process of developing this site: pideja.ca and I have made good progress with the desktop design. However, the mobile (iPhone) pages that used to display ok are now all wrong. The navigation now covers the entire top pallet and the title does not show; the HOME page animation is OK as well as the galleries thumbnails; in the albums, however, the credits (main-copy-credits) that should show up over the thumbnails now are tucked away in the menu (hamburger) overlay, where the pallet-credits should be blocked;the large image display is...tiny!
The CSS I am using does not seem to do anything:
/*----------------MOBILE-----------------------------*/
@media screen and min-width 640px {
#main-copy-credits {
display: block;
}
#pallet-credits {
display: none;
}
/* Style the mobile menu */
.page__toggle__buttons label .icon {
content: 'Menu';
background: black;
display: inline;
position: absolute;
right: 0;
top: 0;
}
.single_image figcaption {
font-family: Helvetica Neue, 'sans serif';
text-align: center;
font-size: 1em;
color: #e0e0e0;
}
:first-child {
font-weight: light;
}
:nth-child(2) {
font-weight: italic;
}
.thumbnail {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.contact-form {
width: 100%;
margin: 0 auto;
}
.contact-form input {
max-width: 100%!important;
}
}The mobile display was looking good until...I must have fiddled with something better left alone.
I should think that most of the settings referring to the mobile could be addressed through Backlight and media queries.
But, not in this case. Why?
Offline
I don't see any of your credit text in the main content area html.
Also, you're adding css to the html in the pallet. Why do that there? You already have that css in your custom css file.
Also, your line-height of .3em seems to be messing things up at certain screen widths.
as to why the media query isn't working, that's because it's malformed.
You have:
@media screen and min-width 640px {it should be:
@media screen and (max-width: 640px) {you're missing parentheses, a colon, and you're using min-width rather than max-width (for the smaller screens)
You can try running your css through a validator to see if there are other problems:
https://jigsaw.w3.org/css-validator/
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
In this example, Backlight>Publisher>Galleries>DES SOURIS ET DES HOMMES>Edit Album Content Area>Main Copy, I removed the "extra" styling that was in the content area; album has credits in the Main Content Area and in the Pallet 01 Area. The first for the mobile and the latter for the desktop.
I corrected the CSS file as suggested.
But still no credits on the mobile album page. I thought that with #main-copy-credits the credits would show up on the mobile. As it is, they still show up in the navigation pane,
#pallet-credits {
display: none;
} this CSS notwithstanding.
Other issues: no site title on the mobile and album thumbnails not aligned correctly.
But these will be addressed in further posts.
https://pideja.ca/galleries/01-duceppe/ … es-hommes/
I think my whole CSS file should be reviewed.
Offline
Other issues: no site title on the mobile
look at this custom css you have:
.page__toggle__buttons label {
margin-right: 10px;
overflow: hidden;
background-color:
#333;
position: relative;
}if you remove position:relative; your title comes back.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
By the way, what should I make of the section "Your validated CSS style sheet" of the CSS Validation Service that is below all the error listings for the CSS files contained in the site files? This looks like a CSS style sheet, but without the media query!
Last edited by pideja (2019-11-14 07:14:19)
Offline
I corrected the CSS file as suggested.
The media query is still wrong. You need to have a colon after max-width
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Sorry about the "colon". Being french-speaking, I always wonder about "colon" and "semi-colon"...
I removed the "position: relative" from the .page__toggle__buttons label and yes, the title is back. Why? Not too sure about that "position" thing. Also, I have another similar item in the media query:
.page__toggle__buttons label .icon {
content: 'Menu';
background: black;
display: inline;
position: absolute;
right: 0;
top: 0;
}Is this entry redundant? It does not seem to do anything anyway.
Offline
.page__toggle__buttons label .icon
might be a leftover from an earlier version of Backlight? There is no icon inside the .page__toggle__buttons label element
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Removed the offending ".icon", nothing changed. I guess it must have been a remnant...
Offline
All issues with the credits are resolved, for now.
But the design and styling with the mobile are not done yet: why does the position and relative size of the large images in albums change when switching from portrait to landscape. While the image is smallish in portrait mode, in landscape it is downright tiny! And, since the side pallet masthead and vertical navigation do not reduce in size, it leaves next to no room for the image. Is this normal?
Could it be because I am using vertical navigation? I notice that my other sites that use horizontal nav do not have this problem.
Is it possible to have a vertical nav for the desktop and horizontal for the mobile?
Offline
why does the position and relative size of the large images in albums change when switching from portrait to landscape.
Probably because of the Columns at Screen Breakpoints setting in the album template.
and, since the side pallet masthead and vertical navigation do not reduce in size, it leaves next to no room for the image. Is this normal?
the pallet is sized as you size it in the page template. it doesn't change for mobile. I suppose you could adjust it with custom css...
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
... Is this normal?
Run Backlight without customizations, apart from those made via the Designer. That's normal, and I've worked very hard to ensure a good experience on devices of any size.
When implementing your own code, you should be mindful of not breaking Backlight's "normal" behavior in unintended ways. We cannot account for code written by our users.
Offline
So, I guess I should write media queries for both the portrait and landscape orientations.
Offline
If you feel it necessary to do so.
.thing {
margin: 24px;
padding: 24px;
}
@media screen and (max-width: 1024px) {
.thing {
margin: 12px;
}
}
@media screen and (max-width: 614px) {
.thing {
margin: 6px;
}
}A proper cascade of media queries looks like this. Where the padding is 24px at all sizes, and the media queries change the margin. You should use the cascade to update only those items necessary at each subsequent breakpoint.
Offline
Pages: 1