Responsive issues on Mac in Fixer

I'm having 2 issues with the Fixer theme

1. When the screen resolution is 1080px on Mac (Safari) the site breaks
2. I want to disable the automatic breakpoint for the menu at 1024px. I don't want it to change to the "hamburger" menu at this breakpoint.

Support access is enabled.

  • Predrag Dubajic
    • Support

    Hi Don,

    I checked your site in Safari on both laptop screen and on larger one with 1920px screen but I still can't see the issue there.
    This is from Safari on large screen:

    This one is from MacBook Pro 15" screen:

    And this one is taken in Chrome on Mac:

    As you can see each one looks good from my end and I can't replicate it, but it might be related to specific setup you're checking this in.
    Can you tell me what's the screen size, is it retina or not, which version of OS and Safari you have installed?

    2. I want to disable the automatic breakpoint for the menu at 1024px. I don't want it to change to the "hamburger" menu at this breakpoint.

    I see that you already disabled tablet breakpoint on your site, do you still need help with this issue?

    Best regards,
    Predrag

    • Bamboo
      • Site Builder, Child of Zeus

      Hi, Predrag i just post the issue about my site facing but didn't reply from your post did you see it ?
      I want to add some detail about the issue. After I test the site with chrome developer tools responsive and see that the problem occur when I change the screen size to 1080px then it end at 1367px more than or less than 1080 the site look perfectly fine with my design.

  • Bamboo
    • Site Builder, Child of Zeus

    Hi, Predrag thank you for the fast support the problem still occur i using macbook 12 inch to view my site however happen only with chrome and safari not in firefox.
    ps the first image is from safari the lastest version then chrome the lastest version then the third is firefox

    Please help me fix this issue thx man!

  • Predrag Dubajic
    • Support

    Hi Don,

    Thanks for the additional info, and yes, I can see both of your comments, it doesn't need to be a direct reply :slight_smile:

    I was now able to see the issue and I think I was able to dig up the cause as well.
    The issue is coming from this CSS that you have in your Global CSS field:

    @media only screen
      and (min-device-width: 1024px)
      and (max-device-width: 1366px)
      and (-webkit-min-device-pixel-ratio: 1.5) {
    
     input#cf7-geocode-address {
        width: 70% !important;
    }
     #wpcf7-f3787-o2 > form > p {
        margin-bottom: -0.7%;
    }
    
    .flexbox-support .upfront-output-region-container>.upfront-region-container-bg>.upfront-grid-layout {
        width: 70%;
    }
    #cf7-geocode-reset {
    
        padding: 2.5% 6.6% !important;
    }
    
    .upfront #module-1406217940549-1616 #text-object-1406217940549-1478 {
        margin-left: 19%;
    }
    
    #image-1497588850937-1004 > div > div > div > div {
        margin-right: 23%;
    }
    
    #text-object-1422420112603-1296 > div > h6 > strong {
        font-weight: 900;
        font-size: 73px;
        font-family: Kanit, sans-serif;
    }
    
    }

    Or to be more specific for this issue, this CSS is causing it:

    .flexbox-support .upfront-output-region-container>.upfront-region-container-bg>.upfront-grid-layout {
        width: 70%;
    }

    Thing here is that query selector for this CSS is applied only for webkit browsers, like Chrome and Safari, so that's why it's not seen in Firefox.

    I pasted the entire code because that entire code is affecting only webkit browsers so it can cause some other issues as well, and also, CSS selectors with number strings shouldn't be used within UF as those numbers can be changed in future and your CSS will stop working.

    So first thing, do you know why this specific CSS for webkit browsers was added in first place?

    To fix your current issue you can remove this part completely:

    .flexbox-support .upfront-output-region-container>.upfront-region-container-bg>.upfront-grid-layout {
        width: 70%;
    }

    Or set the width to 100% and that will get your site show normally on smaller screens as well.

    Best regards,
    Predrag

  • Bamboo
    • Site Builder, Child of Zeus

    Hi, Predrag I didn't add this css by myself but i ask the support team to help me with some styling the site and didn't expect this problem before. However, now i remove the code that you suggested but it still not work the site still look mess up with the resolution 1080px. So can you please help me fix this problem by doing it for me cause i'm not sure whether I do something wrong or it's not just this css that cause this problem.

    Thanks a lot for the help,
    Don

    • Bamboo
      • Site Builder, Child of Zeus

      The code was add for setting my site to view the contact form exactly same in every resolution I think now we facing a new problem after I delete that code now the map is out of the box in every small resolution could you please take a look and help me fix this thx.

  • Predrag Dubajic
    • Support

    Hi Don,

    Have you figured out the first issue with the map because the same resolution you have on your screenshot doesn't show any issues to me?

    Can i ask you for one more help with my site error. My site use Location Module (Lite) for Contact Form 7 plugin and it contain google API duplicate with upfront google API so how should I fix this.

    Google map API key should work when called only from one location and since Upfront API key is called site wide, while CF7 is probably only loaded on page with your shortcode, you can remove the API key from "Location Module" settings and that should do the trick.

    Best regards,
    Predrag

    • Bamboo
      • Site Builder, Child of Zeus

      Hi, Predrag
      the trick you suggested don't work because if I delete the API in CF7 the map can't be use so please help me fix this error. i think the way to fix this is to disable the upfront API which i don't know how.

      There are two screenshot one is I delete the API in CF7 the other I didn't delete.

      Thx,
      Don

  • Dimitris
    • Support Star

    Hello Don,

    hope you're doing good today! :slight_smile:

    It seems that there's no way to not include the Google Maps API in Upfront at the moment, this is already communicated with our devs though, which are saying that:

    this is an optimization we should consider implementing

    I've already pinged them again on this, just in case they can provide any further info/insights here.
    Me or another colleague of mine will keep you posted on this as soon as possible.

    Warm regards,
    Dimitris

  • Predrag Dubajic
    • Support

    Hi Don,

    This issue has been added on Upfront to-do list so you could disable Maps API used by Upfront in future but this requires some changes in how everything regarding to maps work so I'm afraid that there's no workaround at this moment and we'll need to wait for devs to add it to theme.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.