Ongoing responsive 'issues'. URGENT resolution required!

I am continuing to have issues with the responsive behaviours for this website/theme. Predrag helped to get it to look relatively ok and remove some erroneous element that appear following theme updates. As usual he did a superb job and was quick to deal with my query at the time.

However I am continuing to have serious issues with the appearance of this site on small screens, tablets and mobile (which is VERY important as you may imagine)

1 - The H tags are losing the specified font (Josefin Sans) as soon as they are viewed on smaller screens. The fonts and sizes have been set in the responsive editor, which look fine in there and I have also checked the custom css I can see that the correct font is specified (from what I can tell, as I am not a css expert). However, for whatever reason the format and styling does not carry through to the devices. This looks appalling and causes overlaps, runs over sections and across all the element is too big. See attachments 1-3, 'should be' screen shot demonstrates what it looks like in the editor and is what it should be seen as!
(I will add these on another post as it won't let me here.)

2 - Predrag also implemented some css to change the font in the contact form (which again i think I see) but this does not appear to be working either.

3 - The main menu. Well I have taken the trouble to do this in detail and added screen shots to illustrate.
Menu1 shows the menu before being clicked with NO burger icon?
Menu 2 shows what happens when it is clicked. The background of the menu drop down is different to the background of the text elements. Why and how is the changed to how it should be?
Menu3 shows what happens when you click the page required. This than stays there and does not disappear unless you refresh the page. which means it is obviously not working correctly.
Menu 4 shows that the menu (once clicked) remains over the top of the content.
Menu 5 shows the footer menu with the correct burger icon and which appear to work properly (unlike the main menu!)

It is important that these are resolved as a matter of urgency as this is not the first request and if I am honest I am really getting fed up with the 'issues' relating to this framework/theme/site...

Yours hopefully...

AJ

  • Sajid

    Hi @alex140,
    Hope you are doing good today :slight_smile:

    For point number 1:

    I can see there are some backslashes are being added in the rule while saving the changes that is breaking the font family on mobile screen. I tested it on my own website and fonts are working just fine for me.

    Before digging into this issue any deeper, could you please update upfront and panino theme from version 1.0.3 to 1.1 ? Don't worry your changes are safe in database. It should work now, if still does then please go to responsive mode and save the changes again.

    For point 2:
    For this issue, since Predrag added some CSS rules, then please post back a reply in your older thread with Predrag to continue.

    For point number 3:
    Menu 1, you have following code in custom CSS rules that is changing the burger menu styles. Please go Upfront > Theme Settings > Add custom CSS rules, find below code and delete it.

    div.responsive_nav_toggler > div {
        background: #ededed;
    }

    Menu 2:

    i.burger_nav_close:before {
        color: #ededed;
    }

    Other points can also be related to out dated version of theme. Please update as requested in point 1 and let us know how it goes. If the issue persist then please enable support staff access. You can grant access from WPMU DEV > Support > Support Access > Grant Access or see this manual.

    Look forward towards your response Alex :slight_smile:
    Cheers, Sajid

  • Alex

    Hi Sajid

    From my experience updates rarely solve these kind of issues (especially as they appear to have existed prior to the previous update). However, the theme the theme has been updated as requested, but unfortunately it has not resolved anything.

    I also spotted the /// being added but could not ascertain where they were coming from?

    I have attempted to remove the code suggested but it is not actually there to remove, which is very puzzling.

    I have granted support access as requested so I look forward to your response.

    Many thanks

    AJ

  • Panos

    Hello Alex,

    In order to set the font for the menu to "Josefin Sans" you can add the following CSS:

    div[data-style="horizontal"] ul.menu > li.menu-item > a, div[data-style="vertical"] ul.menu > li.menu-item > a,
    div[data-style="burger"] ul.menu > li.menu-item > a{
    	font-family: "Josefin Sans", "sans-serif", "Lato"!important;
    }

    To remove the blue color added to the menu items background use the following:

    div[data-style="burger"] ul.menu > li.menu-item > a{
    	background: none !important;
    }
    
    div[data-style="burger"] ul.menu > li.menu-item > a:hover{
    	background: #d87f31 !important;
    }

    As for the color of the burger I am not sure I understand if you need to change it or keep it as it is. Sajid has already covered this in his reply, but in case you want to change color you can use the following css:

    div.responsive_nav_toggler > div {
        background: #d87f31!important;
    }
    
    div.responsive_nav_toggler:hover > div {
        background: #ededed!important;
    }

    You can insert the CSS snippets in your Custom CSS editor of the Upfront page builder. Since you mention that other staff members also apply changes I suppose it would be better if you would add this, so you also know where to find it in the future :slight_smile:

    Hope this helps!

    Kind regards,
    Panos

  • Alex

    Thanks Panos

    The appears to have address the menu background issue.

    Although no one has given any feedback ion point 1, "The H tags are losing the specified font (Josefin Sans) as soon as they are viewed on smaller screens." I really need to address this as it looks ok in editor mode under normal and responsive views but looks awful on anything other than a desktop as the h tags don't appear to be resizing?!

    I will open up the site for support access again but will someone please respond as a matter of urgency.

    Thanks

    AJ

  • Alex

    Hi Panos

    Thank you for removing these, however it does not appear to have made ANY impact.

    I have added screen shots to illustrate the problems on one specific page (Team) as I assume that once these are sorted it will resolve all the other instances. You can see from the screen shots that not only does the size not change as the browser size reduces but the font changes. I have also included a screen shot of the same page in the editor to illustrate how it 'should' look.

    Please, please, please help me resolve this issue as it is really frustrating that something you would think should be so simple is taking so long to address.

    Many thanks

    AJ



  • Panos

    Hey Alex ,

    You were right!

    It seems that Upfront's css editor was what was escaping quotes, previously I had the impression that the slashes were inserted by accident.

    So what happened was that when typing
    "Josefin Sans"
    it was converted to
    \"Josefin Sans\"

    That \ isn't visible from the code inspector, and assumed that the font-family was correct.

    I have removed the quotes so they don't get escaped again.

    Please check and let me know if it has been fixed on your side to.

    Kind regards,
    Panos

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.