Header issues

[paulwolf0101]

hi everybody,

I am having and issue with my header. I have created different breakpoints but when I am on a lower resolution, such as iPhone 5, when I zoom my header ends up breaking on itself. I have the items pinNed to the top of the screen which I think is the issue, but it seems backwards that I wouldn't be able to pin the header to the top and not be able to zoom without it expanding. The other option I have tried is setting it to none, instead of responsive width, but the menu widget I am using and the text both still try to respond even when set to none.

To to explain what is happening: I load the site onto an iPhone 5. I try to zoom into the page. Instead of the header zooming with the page, the text and menu button try to respond to the width and end up breaking on themselves. I set it to "none" and get the same issues.

Looking for for any help. Really appreciate your time. Thank you.

paul

[ncw92]

I'm not exactly sure what it is that's happening on your site (could you upload some images or a preview URL?), but it sounds like the widget is what's causing the problem?

I'm currently working on a site and when viewed on mobile (with a hamburger menu built from an accordian widget), the header and menu both zoom fine.

On a side note, if you're designing a mobile site it's best to design a site that doesn't need zooming to see content - I appreciate you might need to for a specific section/need, but as general advice it's better to resize objects for a mobile view rather than encourage zooming etc.

[paulwolf0101]

Hi thanks for the quick response. I am designing it so there won't be a need for zooming, but zooming might still occur and I was hoping. To have as little issues with the site as possible. It very well can be the widget that I am using for the menu.

The site is:

jgsdesigns.businesscatalyst.com

Thanks for taking a look. It is still in the process of getting built and fixing a lot of issues. Would you mind also checking something else out. On the home page I have four boxes with some text on the inside. I grouped them together but when they hVe to resize inside of one breakpoint before it even hits the next breakpoint. I'm assuming that grouping doesn't mean it will keep things together. I tried a composition widget but I also had issues. Thanks for your help and input.

[ncw92 · Accepted solution]

I've taken a quick look at your site - on desktop and mobile. What might be causing the header issue is that you have elements on your page that, at the smaller breakpoint, aren't resized yet. It's important to remember that browsers will use the widest element to set the actual page width, regardless of a breakpoint. So, for example, if you have a breakpoint at 500px, but an image/element/widget is 600px in width, the browser will get confused between displaying elements at 500px, but also accommodating the larger element.

I noticed on your site (whilst viewing on mobile) that though the header has been resized, the footer (with your Google map etc.) isn't, along with some other elements, so that might be causing the issue.

As a form of troubleshooting, try creating a blank page with only your header displayed (from the master it's created on). Upload this test site and then preview it on mobile, if the header displays correctly you know it's an issue with oversized assets, if it doesn't then it's an issue with the header itself. Does that make sense?

As for your second issue, I'll have a closer look this afternoon, but a thread I commented on recently (link below) might be describing a similar issue, perhaps there's a solution there? Let us know if not.

Can this be possible in muse

[jeffreys24952351]

Thank you for your responses you have been very helpful. I have now resized all of the masters and pages (for the most part) and it is republished.

Here are some examples of what I am trying to get to happen on mine.

Responsive Slideshow – Adobe Muse Widget Directory

On mobile their header when zooming in zooms without resizing the text or hamburger menu. I would like this to happen on mine just for an overall aesthetic in case someone does zoom. I think the reason mine doesn't act the same way is possibly because it is pinned to the top and doesn't go away upon scrolling like this one does. It might also be my hamburger menu that I am using. I just realized that the menu is a widget and it is supposed to be a responsive menu. So i will have to look into that and try it out with on that is not.

And if you check out typeform.com their website just sticks and actually doesn't have the ability to zoom. This is kind of interesting but not sure if Muse can do that. Also, if it is possible, do you know if this is done if it will automatically fit to different phone resolutions ?

And an example of what I am trying to stay away from, which is what is currently happening to mine, is this site. If you use it on a phone or smaller resolution when you zoom the top menu zooms with it. I am guessing it just has something to do with the fact that it is sticking to the top and not scrolling like the rest of the page or menus.

Also I took a look at the thread that you linked. I think you were referring to section that shows the six boxes and has them pinned. I have that with my boxes and for some reason the text still changes. What I realized is that my residential projects page has the same thing and works perfectly. I had put those images and text into a state button and they respond perfectly across the breakpoints, I just need to go in and resize them for the specific breakpoints.

Thanks again for all of your help!

[paulwolf0101]

Sorry I was on my bosses account when I replied. I just reposted so you knew it was me.

Thank you for your responses you have been very helpful. I have now resized all of the masters and pages (for the most part) and it is republished.

Here are some examples of what I am trying to get to happen on mine.

Responsive Slideshow – Adobe Muse Widget Directory

On mobile their header when zooming in zooms without resizing the text or hamburger menu. I would like this to happen on mine just for an overall aesthetic in case someone does zoom. I think the reason mine doesn't act the same way is possibly because it is pinned to the top and doesn't go away upon scrolling like this one does. It might also be my hamburger menu that I am using. I just realized that the menu is a widget and it is supposed to be a responsive menu. So i will have to look into that and try it out with on that is not.

And if you check out typeform.com their website just sticks and actually doesn't have the ability to zoom. This is kind of interesting but not sure if Muse can do that. Also, if it is possible, do you know if this is done if it will automatically fit to different phone resolutions ?

And an example of what I am trying to stay away from, which is what is currently happening to mine, is this site. If you use it on a phone or smaller resolution when you zoom the top menu zooms with it. I am guessing it just has something to do with the fact that it is sticking to the top and not scrolling like the rest of the page or menus.

Also I took a look at the thread that you linked. I think you were referring to section that shows the six boxes and has them pinned. I have that with my boxes and for some reason the text still changes. What I realized is that my residential projects page has the same thing and works perfectly. I had put those images and text into a state button and they respond perfectly across the breakpoints, I just need to go in and resize them for the specific breakpoints.

Thanks again for all of your help!

[ncw92]

Hey,

So I took a look at the new version of your site - on my device, what's happening is that the browser displays everything correctly apart from the menu, which it stretches way beyond the boundary of the site. My guess is that some element (possibly the side menu widget) is causing this, perhaps that isn't placed correctly within the breakpoint, or it's not compatible with the setup you're using?

The site I am currently working on (rawlingsonlane.businesscatalyst.com) uses a similar hamburger menu (built using only the default Muse widgets) and it resizes on zoom the same way as your example site - everything enlarges together. I have my menu pinned to the top and it doesn't disappear on scroll, so I suspect it is the menu widget that's causing your issue, or how you've constructed the header.

As for disabling zoom altogether - I don't think it's supported in Muse, but there may be a widget or code snippet you could embed to acheive this? I haven't looked into it.

It's important to remember though, that if your content is sized nicely and clear to read/see, users won't tend to zoom in manually. If you have a non-responsive site and so mobile users see tiny text and images, they'll have to zoom in to see content. If you design the site responsively, you give the user no reason to zoom. You can't ensure they won't, but the majority wouldn't bother unless something on your page makes them.

Referring back to your header - again, what I would suggest is creating a test page with only the header on it. If you have to, duplicate the master, delete the footer content and apply this header only master to a new page. Then upload your test site and view on your phone, if only the header still has display issues, you know where the problem is.

[paulwolf0101]

Thanks everything has been very helpful. I will test out a different hamburger menu later today and let you know how it goes.

I I have another issue and I was hoping you might be able to help. Hopefully it is okay to just add it in this thread.

I I understand that the slideshow widgets aren't responsive yet. What is the best practice to get the arrows to resize accordingly? I am trying to make a 100% width slideshow, and I have gone through and resized it based on the breakpoints. However, regardless of what I do, in between one breakpoint as it gets resized, they seem to jump off the page. I am really struggling and can't seem to find any information on this besides "yeah that's always going to happen." It seems like unless I buy a widget that does this, I am kind of out of luck. It doesn't seem like this should be the case but I'm not sure.

[ncw92]

What slideshow widget are you using? Most of the pre-built slideshows in Muse (or the lightboxes and compositions) have smaller arrows built into the boundary box, which will resize as you resize the widget.

[paulwolf0101]

I am just using the basic slideshow widget. The photo tends to resize, the arrows don't. I have it resized for all of my breakpoints and made sure that nothing is overlapping on the Home page. I am also using Chrome to inspect it. I have tried it on different devices too and same issue. But if you check the site, when you resize the browser, the photo will start acting responsively, but the arrows just stay in the same area until they hit the next breakpoint. I have also started to have the same issue with the text composition on the home page. Before it used to resize and now it just stays stationary. I have it pinned to the center but instead of resizing the text, the browser just ends up going over while I am trying to view smaller sizes. I am not sure if this is because I just updated to 2017, but I keep finding many things having issues that weren't before.

Also if you check out the site, the residential page has three columns with photos and a title. I have them all inside of a state button. When resizing they work perfectly to resize, up to a certain point, but with the Home page, I literally copied it over, and it reacts different. I am not sure why it does this. On the Residential page the text stays in the same place relative to the photo. On the Home page the photo resizes and the text keeps getting farther away. Do you have any input on this.

[ncw92]

It's quite hard to address these issues without viewing your Muse file, would you mind sharing it? Or if you'd prefer not to, perhaps email it to me or create a copy with just the problematic elements in?

[paulwolf0101]

! !Hey thanks for offering that is amazing. I actually had put together a separate site with the things that worked and the things that didn't and was about to ask if you could take a look. I did a rough copy of the master and mimicked what I did.

So if your looking through the Home page:

1) The first 9 boxes work as I would expect. You can see that I just have rectangle with and image fill inside of a state button. There is also a text box that is inside. When the site scales, even without breakpoints, everything resizes as I would expect considering I am using responsive and have everything set as such. Eventually they start to overlap and I understand that is the place to make breakpoints if not before. But it does work in resizing everything and keeping the proportion.

2) The four boxes with the title in the same place as the first 9 boxes. Here I just copied and pasted it. I changed the fill image to the new ones that I have resized to be square photos because I was running into issues with them not being square. Once again they roughly work the same. For some reason though at one point they end up skewing and not quite acting the same as the original 9.

3) Starting under the grey line these are what I was trying to do but they just don't work at all the same. The first 4 are the same as the ones from the beginning, copied and pasted. I just added in the grey box behind the text and moved it up to be at the same level as the bottom of the photo. For some reason the text and grey box end up not resizing and going straight down as the browser is resized.

4) The next 4 are the same ones. Once again copied and pasted from the original 9 that worked, just modified to move the text up. It behaves the same way as the the previous 4. I am not sure why just moving the text in with the image starts to create different behavior and responses when resizing the browser.

5) The duplicate home page just has a basic slideshow. I left it with the original images but places the buttons where I was trying to place them on my page. I created some breakpoints for it to resize as the browser resizes, but in between them, even though the arrows are still within the slideshow container, they don't stay within the container as it resizes. I don't understand why I can't pin any of the elements either. I have tried putting a slideshow inside of a state button and composition, but to not avail.

Thanks for taking a look. I have picked up a lot of the program pretty well, just getting behavior like this creates such a big learning curve because literally copying what I did that worked creates a situation that doesn't work. I guess it could just be bugs still in the program because it is relatively new, but it's unfortunate because I feel I should have a stronger grasp about the elements.

https://files.fm/u/efhnj5p2  (it is just called test site. Thanks again)

[ncw92]

Hey,

So I've taken a look at the file - I have a couple of points which you may want to consider:

Firstly, a general thing I noticed, you have duplicates of ‘publications’ and ‘contact’ in your menu – this causes two versions to appear when you hover over in browser, you'll want to delete the unused instance of each to fix it. You might also want to give your text more excess space in their boxes, your header/footer items etc. split onto 2 lines when resizing because of this (either that or set them not to resize at all). Due to how different browsers render text you need to be quite liberal with the boundary box on your text in general - always leave excess to the sides and bottom to ensure it displays best. I personally don't resize any menu text because, at the point it looks squished, I use a hamburger menu format instead - perhaps something to consider? Your logo and company name also split onto multiple lines and extend beyond the header because of this - again, perhaps set them not to resize to solve this?

As a side note: consider that when making a responsive site, not everything has to be responsive itself. A lot of elements on my current project aren't resizable at all, rather I change the layout and format when resizing the whole page to fit them.

On to your box layout issues:

To sort out your main issue with the box alignment and skewing, try setting your ‘pinning’ to none – If you’ve set them to responsively adjust width and/or height, don’t pin them as well. You should find this solves the issue. Muse will use their position as a base, and then resize them when the browser encroaches on the sides, so you won't need to have them pinned at all.

Bit of advice though, if I were you, I’d stop creating these boxes using a state button composition – it’s quite a complex arrangement and I think Muse is getting confused by it. You’re trying to apply non-button behaviours to a button widget, which isn’t going so well. Try using frames for images and text boxes for text and then set your properties as you wish, you should find they behave the same, if not work better, and don’t misbehave so much.

It can be tempting to think that chucking elements into a container will group them and make movement/resizing easier - often it makes it worse.

Regarding your slideshow issue:

This is down to, I think, that widget not being responsive by nature. It's one of the older Muse widgets and I doubt it's been updated properly to be utilised for the newer 'web look' (I.E. full width hero image at top of page etc.). Try using another widget from a resource site like Muse Themes and you'll get better results. There are a bunch of free widgets available fom a host of sites, but even if you end up paying, the cost is usually minimal and worth it for the added functionality.

Alternatively, get rid of the buttons altogether and simply have the slideshow autoplay?

Hope this helps somewhat!

[paulwolf0101]

Thanks for taking your time and for your input. I am aware of some of those issues on the version I provided you. I tried to get them all fixed but I must have missed a few. Since I wasn't using the menu I didn't think about that one. I have noticed that the text does need quite a bit of room so I will try to add some more space for all of mine.

The reason I use the state buttons is because I want them to all respond on rollover. From what I had read and watched it seemed like that was the appropriate way to accomplish that. I haven't had any issues with them besides this occurrence with the text inside the same area as the photo. I tested out what you said, took them out of the state and without pinning, and it behaves the same way. If I have the text below the photo, with the top of the text box aligned with the bottom of the image frame, they stay together. If I put the text inside the image box, once again the image resizes and the text just drops straight down. I really am not sure why this is happening, but that is the one of the issues that just really doesn't make any sense to me. I don't see why creating a container would behave this way as you have stated, but you have more experience, I just think that is something Adobe really needs to work out because parent-child relation should be working with such a basic situation.

And I think your right about the slideshow. I am just going to need to take the arrows of. It seems strange that Adobe would add in responsive, but not update the slideshow widget, which I'm guessing is one of the main widgets.

Thanks again for all of your help and time!

[ncw92]

You can use image frames for rollover effects. If you drag a frame out, then fill it with an image, you should find that you can still select 'states' and change the image for different states. This doesn't work if you place an image, but filling a frame with an image will. There isn't anything wrong with using state buttons per se, but combining images with text and hoping to contain them within one might be causing some issues.

When you say 'place text inside an image' what do you mean exactly? Are you talking about displaying text over an image so that it's laid on top? Or do you mean actually placing image and text within a single container?

You're definitely right in that Muse does have issues and glitches that need fixing, but I think it's important to remember that creating a program like it is complicated, and there are bound to be problems/issues as the end result needs to work on constantly evolving, varied software - browser to browser, OS to OS, device to device etc.

In my experience, as a general note, I find stripping back things to a basic form is best to troubleshoot an issue. Even experimenting with your test site, I found that deleting the first set of boxes made the second behave differently, and again, deleting them made the bottom set change - keeping things simple and re-creating elements for each page when you can is always helpful. Also, along those lines, if you know a page will have a very similar layout to another, try duplicating the page and applying edits rather than copy/pasting elements.

[paulwolf0101]

Trying to contain them together so they work for state rollover at the same time is what I am trying to do. What I had sent you is a photo inside of an image box, and text inside of a text box. Those are together inside of the state button. But when the text is below the image, it behaves as I want, resizing and staying in the same spot in relation to the photo. When I move the text up, so that it is on top of the image frame, it will move in a downard motion rather than resizing and Staying in the same place with the image. Maybe it is because it thinks it is part of the image? I am trying to keep things as simple as possible, but that hasn't worked. All I want is to have the text on top of the image, so when I rollover The image, the text color changes and an overlay is applied to the photo. But if I don't have it in a state, the text won't change unless they are together in the state. The problem is that when the text is on top of the image, it doesn't apply the same response as when it is below it. I understand that there are always going to be issues, it's just unfortunate that something like this, where the behavior responds differently (Like when you deleted the 4 boxes) is something that should be looked at rather than trying to add new cooler features in updates.

[ncw92]

Okay, I understand what you mean.

I think the issue lies with trying to contain both individual elements. Try the below and see how you get on:

Drag a 'state button' widget onto your page and resize to the desired image size. Strip all of its fill and state effects. Apply your image as a fill and swap out the image for whichever one you'd like on rollover/click etc. Then edit the text to do the same (though you're basically limited to changing font colour between states). Duplicate as necessary and position accordingly.

Does that work better? By using the state button widget, and actually having your image as the container shell, you should find the text frame moves with the image and rollover effects can be applied to both.

It's worth noting though, that as of yet Muse doesn't support text that responsively resizes. So as your images get smaller, the text will move but it will also stay the same size, unless you create a breakpoint and adjust the font size.