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.
This test site: pideja.ca/luc/fr is in development. The Home (accueil), Biographie and Contact pages have a transparent overlayed an image. On this overlay, there is text. I'm having a hard time controlling the size of the overlay, the font size and weight on the desktop display, but I'm getting there. However, making changes in Backlight isn't always consistent on the mobile display. A recent tweak (?) on the desktop display rendered the mobile display all wrong.
Can a consistent setup for desktop and mobile be done for this or should I (once again) turn to CSS?
Offline
Can a consistent setup for desktop and mobile be done for this or should I (once again) turn to CSS?
Yep, it is your use of custom CSS that causes these differences.... because you have custom CSS code that targets smaller screens:
@media only screen and (max-width: 991px)
.the__copy>.content {
background-color: rgba(255, 255, 255, 0.5);
width: 40%;Here you select a different background color and a different width. So you have to be careful with using the proper selector so only the pages in questions are affected by your changes.
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
It's probably your existing custom css that's causing the differences. For example, the mobile display causes the text to turn orange, specifically this rule:
html,
#background {
color: #D6AE6B;
}So look through your custom css in the inspector. Remove some rules and see what happens.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline