Resizing for mobile problems

Backlight 4, 5 & 6 Support
#1

Is there a way to have the header and running header shrink in size or split into 2 lines when the format (ie mobile) gets smaller?

The other problem I have is when images created using the single images are in a row when they get truncated to mobile, the words don’t get truncated so the images end up being different sizes. Is there a way to have the words get smaller also? I did a workaround by having only 3 columns instead of 6 but still wondering about reducing the type.

#2

can you share a link so we can see what you’re working with?

#3

Hey Rod, thanks for asking.
You can see it here on the landing page (still under work).

The Title, Southwest Photography Workshops gets cut off when reduced. I’d rather have it simply reduced in size.

The six images underneath the Hero image have the problem of when reduced change size but the text stays the same size. When getting to a smaller screen the images are horizontally constrained by the size of the largest text word. I’d rather have the text reduced in size. If you go to Cottonwood Canyon - Southwest Photography Workshops you’ll see I created a work around that the images dropped to 3 across which solved the problem but I’d prefer to start as 6 across and decrease to 5, 4, 3 across as needed as long as they remain the same size. I’ve activated CSS so if necessary we can go through that route.

Thanks Rod!

#4

I see the same on a test page. It’s not actually being cut off. Instead, the page will scroll horizontally. I don’t know if that’s intentional.
There are settings under Running Head > Title that refer to wrapping lines so I assume that a long title would wrap.

@Matthew will need to take a look.

#5

Thanks Rod. I was thinking I’d have to reduce the size of the running header etc. I’ll leave it to see if Matthew takes a look.

#6

I actually fixed it by setting the running header Font-size to Largest instead of a custom size. It looks much better. Thanks for looking at it Rod.

#7

there still seems to be horizontal scrolling issues.
Looking at the page source code, there are several <body> and <head> tags scattered about.
There should only be one set of each in a page. Did you add html to the copy area?

#8

Yes I did. So I need to remove all of them after the first one? Will that affect anything else?

#9

Your html should not contain any body or head tags, they are already in the page from Backlight.

#10

Did not know that, thanks!

#11

Actually tried removing some and as well as and and ended up with visible code on the website page. I tried it different ways, like going to the 2nd body and as soon as I delete it, the page shows code. I then deleted the first /body which didn’t help. Not sure what to do now.

#12

You also have code inside your extra <head> tags that doesn’t belong in the body of a page. Like meta tags and styles that might override other styles.

Is all this extra code for the images you have on the page? If so, you’d probably be better off using the TTG Responsive Grid framework.

Now that I think about it, the extra html is probably the source of the horizontal scrolling and the appearance of your masthead being cut off. It may be overriding the TTG responsive features.

#13

Thanks again Rod. I’ll leave that there for now and will do the major overhaul offline and see if I can figure out the Responsive grid framework. I think most of the misplace html is in the text and not the images as the images are from Kookaburra. I guess I was trying to get fancy with the links, so I’ll go back to a simpler linking design.

#14

Hey Rod, I think I’ve got it cleaned up on 3 pages so far. It took a little while learning markdown vs html and mixing the two. Just wanted to say thanks for the help!

#15

Looking at these images make me want to visit this region again!

I run the first link through a html checker (https://validator.w3.org/) and there are a few observations:

  • an id has to be unique. If you want to reuse a setting for several elements, use a class. imageContainer is used three times.
  • you have a <div id="imageContainer"></div> that is empty. So you can remove it
  • you have duplicate css definitions. Remove one.
    .custom-link {
        color: cyan;
        text-decoration: none;
        transition: color 0.3s;
    }
    .custom-link:hover {
        color: white;
    }
</style>
  • re css: I would put all your css styles into a custom.css file and don’t have them inside your html code.

Looks great!

#16

Thanks Daniel. I’m new to coding so it’s all a learning experience. I already have the CSS custom file and have it turned on so at least that far. I found the empty container you’re talking about. I have to run out so I’ll have to get back to you with a couple more questions about what to put in the css custom code. Thanks again.

#17

Thanks again Daniel, I think I’ve got it done!!! Now I’ll go through the other pages to see if theres any duplication. Phew, I finally feel like I’m getting there and have an idea of what I’m actually doing.

1 Like
#18

It’s looking great!

1 Like
#19

Was there a solution in backlight settings (currently using BL6) to prevent text overflow in the running head when using larger fonts?
I’m currently using gigantic which looks great on desktop but isn’t responsive when looking at a page on mobile. The only workaround I can see is setting breakpoint visibility so it doesn’t display the title on mobile however I would prefer to always see the running head title but with line wrapping rather than it overflowing.
Thanks for any help, Kim.

#20

I don’t see anything in the designer that would change the font size for mobile devices in the Running Head.

Only workaround I see that will leave the title in the running head for both desktop and mobile is custom css and using one or two media queries to govern the font size at different screen sizes.