Header Layout Displaying Very Differently Than What Is Set At Breakpoints

Rebuilding an old website using Pro Builder. Trying to create a new responsive blogpost header layout which seems to have taken considerably more tweaking that I imagined. I’ve manually set the sizing and position of some elements at each break point. It’s as close to what I want it to be as I can get, yet what I’m seeing when viewing and testing the various breaking points on the front end is very different from what I am seeing on another actual device. I’ve tried clearing the cache on both the backend of the site as well as the various browsers I’ve viewed it in, but nothing changes.

If it helps, I build, edit, etc., on a 27" iMac, and double check the work (some of it anyway) on my MacBook Pro 13", where I’m not logged into WordPress.

Here’s what it looks like at the main breakpoint (front end view). This is the way I actually want it to look:

Here is the view showing the corresponding breakpoint (preview in builder): [Note–I’m not sure why, but even after assigning this header, the layout seems to always want to populate the editor with information from the website’s front or home page. Not sure how to change that.]

This is the problem here. This is the view of the actual header on a separate device, my MacBook Pro 13".

I’ve cleared the website’s cache a few different times, as well as the various browsers. If it were a plug-in issue, I would think I would be seeing that on the iMac and not on the MacBook. Perhaps I’m wrong.

Obviously, what I’m trying to do is create a header layout using a Dynamic Post Title that appears as “writing” on the chalkboard image in the header.

On the MacBook Pro, the title seems to appear as it’s original size, and does not respond by sizing down when the browser window size is adjusted.

However, when tested within the layout editor, and even on the front end preview, it all works just fine.

While I know this is likely a separate issue, I would like to know if there is a way to actually have the blogpost header editor populate with one of the existing blogposts headers, as well as the content area of the page to at least give me some semblance as to what the page may look like, without having to flip back and forth between browser tabs and windows, or checking it on another device.

Any helpful hints, tips, or solutions greatly appreciated.

Hello @ConjuringMind,

Thanks for writing in!

Please use "Stepped’ mode for your Root Font Size.

Or you can apply responsive element styling for your Text element.

Regretfully we cannot check your site thoroughly because the given credentials have limited privileges. Please change the role of the given access as an “Administrator”.

Thanks.

Thank you! Sorry about the role thing. It has been updated if you want to take another look at it.

Hello @ConjuringMind,

I tried to access your site but the given login details are not working please recheck and send us again.

Thanks

Sorry about that. When I changed the role to Administrator it must’ve required you to use 2FA. I didn’t have the option of disabling that totally, so I set it to “Optional.” Let me know if it doesn’t work. I’ve also changed the password which is in the new secure note.

I have been doing some work on the site today. The previous info you gave made me realize that the whole hiding and setting breaking points for various elements is available for far more than I realized and I think I’m getting the hang of it. I’m still open to any further info you care to share.

Thanks again for your help!

Hey @ConjuringMind,

When designing a dynamic element like that of a post title, it would be best that you preview a post with the longest title so you know how long titles would look like. You can change the preview by clicking the Preview button just above the Save button in lower-left corner of the builder.

Now that you see the problem with the long title, you can change the font size per screen size.

The next problem is the title is squeezed because of the Bar’s Content Sizing. The Width is 0 vh. Please set it to 80% or more.

Also, the Container Right Margin is big, currently at 30em. It’s best to keep it small like 1 em. If your goal is to control the size of the container, you need to use the Bar’s Content Sizing.

image

To efficiently use the settings, it would be best that you understand Flexbox. You can start learning from this article https://theme.co/docs/use-flex-layout

Hope that helps.

Yes, that does help. Thank you! Since posting and starting this topic, I have been messing around with it and am going through the Flex Layout documentation and video trying to understand more how it works. For some reason I didn’t realize I could select a specific Post Title to preview, which is indeed what I’ve wanted to do all along! As you can see from the work I’ve been doing, I get a bit confused as to where to control some things such as controlling the size of the Container not within the Container settings themselves but in the Bar’s Content Sizing. Part of what makes this confusing for a noob like me is that I can control such things as the size of the FONT within the Container settings, but not the COLOR of the font–that I must do within the controls of the Post Title element itself.

Hey @ConjuringMind,

If you see a Font Setting that is not specific to the target text like the Primary Text in the Headline element, that means you can simultaneously increase or decrease the size of the text inside provided that the font unit of the text is EM, REM, or %.

For example, if you set the Font Size of the Container element, it will increase all the text size of all the text inside the Container provided that the text within the Container uses the EM, REM, or % unit.

image

Hope that helps.

Yes it does. Thank you.

You are most welcome @ConjuringMind

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.