Streaming live at 10am (PST)

Background Image on Slider, Text and Responsiveness

Hi all… newbie here.

I’m trying to use a slider with 11 images.
Background is messy with responsiveness and dragging the images into the slider works better but the layout keeps changing on different screen sizes.
At the risk of overexplaining:
I’ve tried many combinations of settings on various elements:
absolute, relative, fixed etc - display: block inline…
It will look fine in the designer - I’ve positioned the text on a div block/container or combinations…
but when I click Preview… the image gets bigger and the text is no longer where I wanted it.

The first slide is my latest attempt with the [img Anywhere] and text in the same container.
The other slides are earlier attempts.

A bit of help would really be appreciated.

Yours in frustration

Link below.

Hi there. First off let me say, WOW, 11 image slides. That is a lot. Any particular reason why so many?

Secondly, make sure you place a slider within a section or div. Also, make sure you remove 100vw and 100vh (as this will make sure the whole image fits within the screen view) from the slider as it messes with the ratio on some images.

Try that?

Let us know if you already reviewed this content >

It will be easier to help you if there is a knowledge baseline.

Yes I have. However responsiveness wasn’t really covered in it.

Thank you Brandon.
Yes, I’m bit of an oddball. A Jack of all trades.
Thought I’d have everything upfront when landing on the site.
Webfow University seemed to indicate that a slider behaved as a section would. I’ll try that again.
I’ll check out vw and vh.

Thanks so much.

1 Like

You can but instead of using slides, why not use interactions. It may be a bit more work but you can always adjust things how you want them to appear.

I get the jack of all trades thing as well. I am a bit like that as well, but instead of a slide arrangement why not use a grid layout.

I hope you’ll forgive - I’m very new to this, but very keen.
You see that in the slides I’m trying (with fadeovers) to make it look like the imac screen is changing to match my comment below…

How would a grid work? Lightbox effort? Or blocks on a page?
Maybe you have a URL with an example?

Thanks very much for the feedback.

1 Like

While on this topic…
the navigation in this project is a symbol. I get that you can reuse it… but linking it is a problem.
If I link the navigation on the home page to go to different sections of that page is good. No Problem.
[Contact] however takes me to another [Page]. The navigation is there too… however, it doesn’t function. As if it needs links. (auratone#)
But I can’t get it to return to the home page, let alone go to a section in the home page (from the contact page.
And after repopulating the navbar on the contact page it corrupted the nav on the home page. (symbol behaviour?)
Puzzling and hoping you have advice :slight_smile:

Hi @Pierrott that is a tricky one for me in the beginning too. The best way I can explain this is this:

  1. Add the nav symbol to your other page
  2. right click on the symbol and select “Unlink”
  3. click on the menu item (i.e. home, contact, about, etc.) you want to change.
  4. go to the “gear” icon or hit “D” on your keyboard (shortcut)
  5. Make sure the “link” icon is selected.
  6. type this: “/#about” or whatever your section name is.
  7. once you do it for all of the menu links, you can create a new symbol for this nav and add it to all of your other pages (if you have more then the second one)

Hope that helps. If you need a video, lmk.

Thanks for your reply.
Can the nav on the CTA page revert back to the home page AND go to a specific section on the home page?
Because the dropdown in the gear icon allows either a page or a section…

:slight_smile: Thanks!

Actually as long as the section as its own ID tag, then yes.

if it were on the home page under section ID “cta-2” then on the CTA button for the link under Settings, you would have /#cta-2

if it directing to an about page it would be /about#cta-2 or /about-us#cta-2 ( /your-page-name#your-section-id )

Hope that helps more.