Streaming live at 10am (PST)

Changing Symbols for Different Screens

#1

Hi all, total newbie here with probably a silly question.

I thought I would make a symbol out of a header that I’m trying to use throughout a site I’m building. There is a logo on the left, a little space then an address/phone block more to the right, then another small graphic. I made a symbol, works great until I look at it on the phone site, then the text in the address/phone block is way too big and doesn’t look at all correct. Do I need to make a separate symbol for a tablet and phone?

By the way, I’m so glad to be here! Just came over from another program that I won’t name but this program and forum and documentation is sooooo much better!

Annette


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

Hey @annette,

Never a silly question!

You shouldn’t need to make two different symbols for the different screens! But it is possible!

Can you just edit your current header symbol on those smaller screens so that it works on them too? You can hide specific elements / sections on the different devices so you could hide that text that looks strange on smaller devices and replace it with something better which is hidden on those larger screens?

Not sure if that helps, but lmk :slight_smile:

#3

Ok, I think I’m able to edit the text in the phone version and made it smaller. I thought I tried that but I guess I didn’t.

So how do you hide elements on the different devices? I found in the element panel where it said, displaying on all devices. There was a short paragraph about how that is going away in the new display panel, so I clicked, got it and now I can’t get back to the place where it showed all of the device icons. There wasn’t a way to tell it not to display that symbol on that phone version anyway.

#4

Yeh the recent update removed it, so everyone getting used to the alternative method.

But it makes more sense to do it this way now, from a development / code point as the device view was a bit buggy.

You can just change the display setting to hidden/none, when viewing the elemnt on the device you want it hidden from.

It has a trickle down effect because it follows the parent element. So if you want the mobile devices to hide an element, you need to go to landscape view and then change that view setting to none. You will see its hidden on both landscape and mobile now. While it should still be viewable on desktop.

image

#5

OK, I get it now! That will work.

Thanks so much. I see I can edit the text size on the phone site or hide it if that would work better. I can see a couple other elements that I might want to hide on the smaller versions.

Wow, I have a lot to learn but I really appreciate your help and quick response!

Annette

#6

Great to hear!

Yep, you can just hide/show elements on those different screens sizes to get the design you’re after.

The first learning curve is hard, but then it all clicks!

Good luck!!

:smiley: