Site doesn't load right to Iphone size

Discussion in 'General Muse' started by jeffdietz, Mar 24, 2016.

  1. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    Frustrated, beyond frustrated. I finally think I have it all together and working with the responsive nonsense... andddddd, now it's not working on the iphone.

    That is the only phone I have to judge it on and it's an Iphone 6. I have a break point at 320 and at 480. So my guess is it's not resolving to a break point or something, or not reforming in between like it is suppose to.

    If you pinch the site smaller so is to try and make it fit then it 'runs off' the edge on the right side and is all jacked up even worse.

    The only page that seems to work is the main page, but it is also pushing things upwards out of position that shouldn't be (on the main page see the photo in the black box of an album where the text is showing up over the photo, which is not how it appears in the design). I mean really, this whole system this is built on seems to be a hot mess of things not working as they are suppose to. It's been more frustrating and buggy then ever before.

    Anyone mind taking a look at it and see if they can find what might be going on?
    www.luxuryfriscoweddings.com
     
  2. Norman Durkee

    Norman Durkee Well-Known Member Moderator

    269
    45
    Hey @jeffdietz , this seems to be a common theme with responsive sites for smaller device from looking at your link I can see that the image on the top is larger then the break point that is trying to be loaded as well as the footer, so the site is loading as if it were a larger screen to accommodate the excess. I am testing on my iPhone 6 Plus, my suggestion is to look at your canvas in Muse and make sure that at the smaller break points there are no objects or widgets outside of the canvas because if there are, even if they don't load when the page loads, Muse will treat them as if they are there and load the page bigger than it should be. As for things shifting on the bottom try groping your objects together that usually helps keep everything nice and tight.

    image.png
     
  3. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    Yup , I have already checked that, everything is within the marks in my design.
     
  4. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    Here is a screen shot of the main page
     

    Attached Files:

  5. jeffdietz

    jeffdietz Well-Known Member

    51
    0
  6. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    It's in between the break points that is causing it. The only way to fix it is to click the elements to be responsive to width, most places it only shows available height and width, and then as it shrinks it ruins the design in other ways with moving things top to bottom to where everything is not aligned.

    Am I the only one that thinks the responsive sites are nonsense how they are built? I'd have been better off just sticking with just three different websites for mobile and desktop.
     
  7. Norman Durkee

    Norman Durkee Well-Known Member Moderator

    269
    45
    So Jeff I have taken a look at your project file, and it is a very simple fix, simply change your top image to "Responsive Width and Height" and add a center pin to it, as well as on your master page change the social buttons to a right pin instead of a left pin. Here is the test url of the updated changes so you can see the fixes from your phone.

    http://weddingtest01.businesscatalyst.com/index.html
     
  8. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    Yea I am working on that now. I went on to another site I am working on and testing it in there. It's annoying to have to do it that way because then when the photo does resize, it seems to also not just size by width but also height which throws off alignment of the whole page. With the photo placement on a page it seems you can only select height and width, instead of just height?

    I am also having a problem with the text such as in the menu bar on the master page. Instead of the words just collapsing in on space between each word or shifting them all left or right when the page shrinks, it is collapsing the words themselves as well, which is causing the words to break. Any thoughts on that?

    Thanks for the help!
     
  9. Norman Durkee

    Norman Durkee Well-Known Member Moderator

    269
    45
    With placed photo's is the only time you can select "Responsive Width & Height", if you place a rectangle and fill that with a photo you wont get that option you will get the "Responsive Width" and the "Full Width" options.

    Are you referring to the words shrinking on break point 1024?
     
  10. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    But if you place the photo inside of a box, then it won't read for SEO correct?

    And yes I believe that is what I mean at the 1024 mark. Basically the text breaks into two lines instead of staying together. Thoughts on how to fix that? See screen shot

     

    Attached Files:

  11. Norman Durkee

    Norman Durkee Well-Known Member Moderator

    269
    45
    That looks like either the menu items are set to "Responsive Width" and or you need to add some width to each of the text boxes.
     
  12. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    So what setting do you use where the text will move but stay in it's own box?
     
  13. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    I can't even begin to express how sick and tired I am of this nonsense. I am very close to just going back to having the 3 sites instead. Despite how much that would suck. But this stuff just doesn't work. At all.

    So just finished this site, and I thought I had it working right, but go take a look. Go the the link at the top that says START HERE. Then scroll it down on a desktop and see how everything just collapses on top of each other, nothing stays in order, nothing stays aligned, and it looks completely horrible. I changed all of the settings to be the responsive widths etc, and this is the complete mess I get. Can anyone help?

    I am truly about to lose my mind. (see screen shot as well)
    www.friscoportraits.com

    Here is the download link for the file:
    https://www.dropbox.com/s/p2wdxtf6o5jl5qn/TexasPortraitAdaptSiteWorking2.muse?dl=0

    http://www.friscoportraits.com/frisco-family-pet-photogapher-info.html
     

    Attached Files:

  14. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    2,860
    215
    jeff, I think I need to jump in here and ask that you try contacting Adobe if you are this dis satisfied with Muse.
    They have a forum on the pre release beta that deals with most of the issues you are having problems with.
    Unfortunately this forum can't address so many of your concerns, with the exception of those dealing with Muse Themes items.
    I am not suggesting you NOT post here, there is always a chance your exact issue is or has been addressed bu another user, but please understand that this is a Community forum, not the support portal.
    Dj
     
  15. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    Yea the unfortunate part of that is when you go to adobe and as soon as they see the third party widgets in there they say they can't help.
    Then there is the sad unfortunate part that now basically I can't use any of the muse themes widgets anyway as most of them aren't working properly.
     
  16. Mike Valkanet

    Mike Valkanet Well-Known Member

    79
    13
    Jeff,

    If I were you I would eliminate the 320 breakpoint altogether.

    When building a responsive website in Muse, I've noticed it's important to slow down and ensure that EVERY object has its responsive properties set before you just start throwing a bunch of stuff on the page.

    Responsive is much better if you have a similar layout that will be repeated on all other pages even though it takes a little longer to properly set up the 1st time. That being said, I still use the alternate layout for customers of mine that I know just need a quick website,

    As far as SEO on a container with a background image vs. a placed image. Yes you loose the ability to add Image tool tip & alt text. But that's the only draw back and I have customers on 1st page results while still using background images some of the time. It doesn't kill SEO unless that's the only way you place images.
     
  17. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    Thanks Mike
    When you say get rid of the 320 break point I am confused? Isn't 320 the known iphone dimension size? So are you basically saying making the 480 point scalable enough that when it shrinks to lower then that it still looks good?

    I might try that when my head cools down a bit from the anger of dealing with this craziness ha.

    I solved most of the problems with switching those photos to containers instead, but the text will still go behind or over lap when you get to the near edge of right before changing break points. Better then it was before at least.

    The most frustrating part now is that the responsive is like the Butterfly effect. I noticed you change one simple thing on a break point and then I will go to the other breakpoints and see it moved several things around. Argh.
     
  18. Mike Valkanet

    Mike Valkanet Well-Known Member

    79
    13
    380 used to be the standard width but now all the phones have even higher resolution. It's just that 320 & 400 are so close anyway that neither would apply to a tablet or desktop anyway.

    Did you make the text responsive?

    Also, maybe you're dragging the breakpoint instead of clicking on it before you realign your objects for that breakpoint? You're supposed to click the breakpoints to realign your objects. You should never be dragging the breakpoint bar, only clicking the breakpoints to go back and forth between them.

    BTW Happy Easter!!! Jesus is awesome!
    If you don't have a great church, then find one. If you don't know God, he is worth seeking!!!! OK, that's all the preaching I'll do for now.
     
  19. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    THanks Mike
    Yes the text was made responsive. And no not doing that think with dragging the break points, it wouldn't let you edit on it that way anyway. I have tested the drag of the break points though in the browser window and that is where i see it still causing some problems.

    I think the dimensions I saw when I looked it up was 320 and 480. I believe the 480 is for ipads? I guess it's hard to fit them all because then there is android. I tried to keep as few breakpoints as possible. But then that seem doesn't seem to work either because then the site 'rails' in between them because they are too spread out.
     
  20. Mike Valkanet

    Mike Valkanet Well-Known Member

    79
    13
    This may not be the reason, but I've heard that dragging a browser window is not a good way to test a website's responsive capabilities because no users will actually be dragging a website to different size widths. Muse Themes had a video explaining that and they recommend a free testing tool from Google here:
    http://design.google.com/resizer/#

    It doesn't work right with multiple layout sites. (Desktop, Tablet, & Phone)
    It also had an issue with web fonts I was using through Adobe Edge Animate too.

    Personally I used to do 1100px wide for tablets so I think 480 is a little small.
     
    Last edited: Mar 28, 2016

Share This Page