Header looks off on different screen sizes

[INcroatia]

Hi,

We had to make a big header for our clients but we’re having issues with it when it comes to responsiveness.

One the computer with the smaller screen it looks good, however on the computer with the bigger screen it looks quite bad. Screenshots attached.

Smaller screen

Bigger screen

How can we make it look good on the bigger screen as well? There’s just too much space between elements, and we tried a few things, which resulted in the header looking good on the big screen but all the text and the buttons were over each other on the smaller screen.

Let us know if you need any aditional info!

Thank you in advance!

[Prasant]

Hello @INcroatia,

Thanks for writing in!

I checked the website and can see the issue you are referring in screenshot. On bigger screens Content builder elements and its properties only scale down as per screen resolution and that’s why you are seeing the divergence when viewing website on large screens.

As a solution I suggest you to use Revolution Slider which can be installed from Pro > Validation > Extensions. To get started with Revolution Slider, please take a look at following resource:

Slider Revolution | Themeco Docs

Thanks.

[INcroatia]

Hi @Prasant, thank you for your reply!

We installed Slider Revolution (we didn’t find Revolution Slider in Pro > Validation > Extensions, so we assume it’s the same thing!) however that appears to be working only on pages. The screenshot we sent was completely built as a Header and the page content begins right underneath it, after you pass the blue background illustration.

Is there anything else we could do, or is there a way to make Revolution Slider work in the Header builder? Our search unfortunately didn’t result in an answer to that.

Thank you once again!

[ruenel]

Hello Paper+Screen,

Are you using "“Stepped” as your root size? Please go to Pro > Theme Options > Typography and set the Root Font size for XL to t least 18 or more, this would change the size of the elements in your header in bigger size. If you have set the same for the LG and XL, then this is why the elements stay the same. Only the background became wider.

By the way, I could not find the search field. Where is it?

Thanks.

[INcroatia]

Hi @RueNel,

Yes, “Stepped” was our root size. The sizes were also the same for SM, MD & LG - which we changed - but on the bigger of our screens the issue of spacing still isn’t solved. Is there anything else we could try?

We don’t have a search field on the website, it’s only visible from the admin panel. Do you need the login info?

[ruenel]

Hey Paper+Screen,

Would you mind providing us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thanks.

[INcroatia]

Hi @RueNel,

Unfortunately the client wanted to implement 2FA authentification, so even with all of the login info you can’t get in unless you have the code that changes every 30 seconds. If something can be coordinated that I can give the code quickly, then it will be possible to log in.

None the less, here’s the username and password.

[rad]

Hi @INcroatia,

As a previous recommendation, the slider revolution slider is just recommended since as you said, it was completely built as header and that one doesn’t scale up on larger devices. Hence, replacing it with a slider is just recommended.

The stepped based responsiveness will only work on specific breakpoints, but it doesn’t mean it will scale up your texts when viewed on the larger size, hence, it will still look the same across the same screen criteria. For example, let’s say on desktop, the font size is 18px, which means it’s the max size so when viewed on 1200px or larger, it will not step up to 20px. And even using EM or REM, it will still result in the same font size since its root font size is the same across larger devices (eg. 1366, 1200, 1920 and so on). Hence, since it can’t scale up, it will always appear as second screenshot the more bigger is the screen.

Though I like to check your setup first and I can’t log in due to 2FA and we’re stuck on that unless disabled.

But again, if your primary aim is to make that second screenshot appears as if on first screenshot. Then it’s not possible with just changing the font size, because the image, the spacing, and the texts are elements should all need to scale (aspect ratio locking).

Ah, you could also try responsive text feature, you can also at least increase the font size but its result is not identical as your preferred size from your first screenshot since it only changes text size as well. https://www.youtube.com/watch?v=_ia5Lswi3ak

Thanks!