How do you make text and background responsive to browser size?

  • 16 March 2021
  • 3 replies
  • 104 views
R

We are trying to build a non-scrollable page that has a full background. Similar to this https://solarpanels.sunrun.com/pm/powerthrough/210120a/.

We have already tried “stretched background to page edges” and “fit background to container” but this still leaves either a white space at the bottom of the page if the background is too small or there is a small amount of scroll if the background is too big.

In the example, there is no scroll and everything is responsive to the browser size.

Any help is greatly appreciated.

3 replies

Caroline
Userlevel 5
Badge +2

@Ryan_Mower are you setting the background in the page properties tab vs the sections’ property tab? It could also be due to the size of the photo you are using!

If you could share the page with us we could be able to dive into the issue a little more!

R

Hi @Caroline, thank you for your reply. I think we got the white space at the bottom of the background fixed. The background was set at the section and not the page.

I’m not sure if there is a solution to not have any scroll? This is the page we are working on https://go.vivintsolar.com/start-saving-with-solar/k.html. If the browser window is big then there isn’t any scroll, but if the browser window is small then there is.

You’ll notice on our other landing page https://solarpanels.sunrun.com/pm/powerthrough/210120a/ that when the browser window size is adjusted, the text adjusted with it and there isn’t any scroll.

Caroline
Userlevel 5
Badge +2

Gotcha,

So Unbounce has a single breakpoint at 600px. So anything above 600px will show the desktop version and anything below will show you the mobile. Here is a little more on that.
If you are familiar with CSS you could work around some of these issues and create additional breakpoints!

Reply


Terms & ConditionsCookie settings