Symbol formatting changes across instances?

Hi there!

I inherited my company’s Webflow site from a previous dev and I am a designer with very limited Webflow experience.

I’ve created a symbol of a card carousel for two pages on the site - the home page, and an “alternative” home page. The symbol works great on the homepage, but when I inserted the symbol onto the alt homepage, it isn’t formatted the same way. The card mask (which I didn’t create myself - inherited from the previous design) width can’t be changed, and I need it to stretch to 100vw like the homepage card carousel. I’m unable to change the formatting without unlinking and basically recreating the symbol - not sure if I’m doing something wrong!

On a tight timeline so any help would be greatly appreciated.

Home (correct formatting):

Alt: wrong formatting, getting “Container width is locked to keep it responsive” error

Homepage card carousel (correct formatting): LINK

Welcome to the community @Delaney_Rua_CC!

I may be missing something but I’m not seeing an alternate homepage on the read-only link you provided—did you happen to remove the page?

I’d be happy to check out what is causing the issue, I just want to make sure I’m looking at the same problem you are!

1 Like

Hi there! I went ahead and linked it to the homepage, it’s under the button “I represent a school”

Thanks for the updated info!

The display settings on your alternate homepage Section (the one holding the symbol) is the culprit here—the current homepage is using display: block while the new homepage is using display: flex.

I’m whether or not you need the additional styling on the new page, but you can always copy/paste the whole Section from the homepage to make sure it’s styled the same (making the class the same would work as well), or alternatively you could just change the display option to the selection in my screenshot below:

Amazing, worked just great! Thank you! :sweat_smile: