Responsive issues with Panino Theme fonts, menu and other bits in responsive view...

Can someone please help?

I am having serious issues with the operation of this theme in responsive view(s).

I have used the following to address the font and h tag issues:

.upfront-output-object p,ul,li
{
font-family: Josefin Sans,sans-serif,display;
font-weight: inherit;
font-style: inherit;
font-size: 15px;
line-height: 2em;
color: #005171;
}
.upfront-output-object h2
{
font-family: "Josefin Sans",sans-serif;
font-weight: 700;
font-style: normal;
font-size: 38px;
line-height: 1.4em;
color: #04658c;
}
.upfront-output-object h3
{
font-family: "Josefin Sans",sans-serif;
font-weight: 600;
font-style: normal;
font-size: 30px;
line-height: 1.3em;
color: #ffffff;
}
.upfront-output-object h1
{
font-family: "Josefin Sans",sans-serif;
font-weight: 700;
font-style: normal;
font-size: 42px;
line-height: 1.4em;
color: #005171;
}

This predominantly works on the homepage content however on other pages some of the h tags don't appear to pick up the formatting (yet some do). Specifically;

Principles Page - 'Find out a little more about us' keywords, only one picks up the font change.
The 'I'm always ready to learn, part of the quote.
The 'Find out more ^^^' links back to the top.
Activities - Topic keywords at the top of the page & any links hold on to the themes default font.
Clients - The “You get the best effort from others, not by lighting a fire beneath them, part of the quote & any links hold on to the themes default font.
Team - The 'Qualifications' sections for 3 out of the 4 picked up the font chance but do not display the correct colour. Also, is there a way to address the arrangement of the 'Behaviours' that are grouped together in responsive mode WITHOUT impacting on the standard view?
Contact - The 'Get in touch, Give us a ring, See what we can do for you, ?your team or your business' section.

For this part, in essence, I assume there is something that is not being done correctly for the h tag formatting to be missed and I understand I possibly need to address the links to ensure they use the correct font etc, I am just unsure of the code required.

Also there are a number of issues with he menu appearance. The background colour is different to that of the text back ground colour (see attachment). I need this to be uniform and at this stage I don't care which way I need to switch it, just as long as they match. Is it possible to change the white circle and accompanying rollover and it's location? It does not sit centrally and also does not fit with the amended site. Even a standard 'burger' icon would suffice). Finally on the menu front, can the location and size of the logo be changed. This is, as with most sites, the link back to the home page and is only partly visible in iPad when the menu is dropped down and not at all on iPhone, therefore rendering it not functional.

Another issue is related to the appearance specifically on the iPhone (unfortunately my client has one). There is a big white band to the right of the site content, see attachment. I am assuming this can be addressed in some way?

I think this is quite comprehensive and clear what I need to address in this instance but of course ask if you need any other details.

Please help...

Yours in hope, AJ

  • Predrag Dubajic

    Hey AJ,

    Hope you're doing well today :slight_smile:

    I had a look at your site and can see the issues you are referring to.
    Font issues are because of links having different font applied on smaller screens and those fonts are actually taking over your heading defined fonts.

    I noticed that you're still running on older version of Upfront and there were some major changes and improvements since version 1.0

    Could you please update both Upfront and Panino theme to latest version and tell us if the issues are still there after that?

    Note: I would suggest making a full site backup before performing an update because of all the changes that come with 1.0

    Best regards,
    Predrag

  • Alex

    Hi Predrag

    I had already updated and it caused more issues (so I rolled back). I had some feedback on a different post (not your usual excellent level of service unfortunately) so I have kind of had to figure my way through to this point on my own.

    If you really think it will solved this issues I can do it again if that is your advice?

    Thanks for the speed response and I feel happier knowing that you looking at this as I am just at the point of launch and need to get these issues ironed out.

    Thanks

    AJ

  • Predrag Dubajic

    Hi AJ,

    Which version did cause you issues?
    Upfront is currently on 1.0.5 which addresses quite a few things users reported in previous versions.

    If you can tell me what issues you had with after the update I can go through changelog to see if those issues are addressed in latest version.

    We could be going through your above issues and create a CSS fix for each of them but you will need to update UF sooner or later and it's possible that such fixes are not needed/not going to work on future updates.

    Best regards,
    Predrag

  • Alex

    Ok Predrag.

    Issues were with ability/facility to update certain content and the location or accessibility of controls etc, but these shouldn't;t be an issue now as I have don't the changes in this version and I know where everything is :wink:.

    It added some erroneous spacing that I then had to try and address (which I couldn't)

    There was issues with the grouped objects, accessing and editing them.

    Also there was some script errors (see attachment)

    I have to pop out now but if you can confirm (now you've seen this message) that you think an upgrade now would be preferable I will get that done later today so as to save you doing something in css that may be fixed anyway.

    Thanks again for your superb support!

    AJ

  • Alex

    Hi Predrag

    Well I've updated both Upfront and Panino.

    Some of the h tag errors seem to be resolved but a lot of the others are still issues to be addressed and it does seem to had added and removed spaces in various places. I will have a look in depth tomorrow morning (it's late here now).

    I have enabled support access should you need it.

    Thanks again for your superb support :smiley:

    AJ

  • Predrag Dubajic

    Hi AJ,

    I had a look at your site now and can see that issue with headings is no longer there but I'm not sure what spacings are you referring to.

    Could you please make a list of things that need to be addressed now so we can start taking care of them one by one.

    I noticed that the issue for iPhone is still there and after some testing it looks like the issue is caused by the Our Clients section but I was unable to fix it so I have flagged this thread for Upfront developers to have a look at and give us some more info about that part.

    Best regards,
    Predrag

  • Alex

    Hi Predrag

    The spacing issue I mentioned relates to the 'empty space' that has appeared at the bottom of the sections. I'll go through page by page then list site wide issues at the bottom:

    Home page
    Extra spaces that have appeared in sections -
    Home Our Story (attempted to reduce this but it had little or no affect)
    second-text

    Also on the home page I seemed unable to move (drag) the 'We don't just look at what's going on at the surface...We go deeper!' text box the the correct position to ensure the text wasn't right at the top of the section. I managed to move it down a bit using padding. Is this a new feature that drag and drop positioning is not available?

    Principles
    Extra spaces that have appeared in sections -
    main intro

    Half of the quote by Winston Churchill - font changes when in responsive view.

    'Find out more^^^' links - incorrect colour in responsive view.

    Activities
    Extra spaces that have appeared in sections -
    Workshops1
    coaching
    coaching2

    Clients
    Extra spaces that have appeared in sections -
    description (this has placed the space between the text and the gallery which makes me thing its a text element issue rather than section but I tried to change the padding but it made no difference)

    Half of the quote by Bob Nelson - font changes and colour is incorrect when in responsive view.

    Team
    Extra spaces that have appeared in sections -
    TTI-desc

    Contact

    Is it possible to change the font used within the form and button to match the site?
    Text at the side of the form - font changes when in responsive view.

    The only other site wide issue that I can see at present is the menu issue mentioned previously.

    Thanks so much for your assistance on this matter. I feel much better knowing you are looking in to this because as usual your responses are clear, concise and informative.

    Any idea on time frame for the iPhone issue resolution?

    Thanks

    AJ

  • Predrag Dubajic

    Hi Alex,

    Sorry for the delay here, one of our Upfront guys have been assigned to report I created to check the iPhone issue, hopefully he will be able to take on it soon.
    Can you temporarily disable your login protection so devs can use admin account I have created for them on your site?

    Home page
    Extra spaces that have appeared in sections -
    Home Our Story (attempted to reduce this but it had little or no affect)
    second-text

    I had to recreate your elements since there were some difference in rendering based on previous UF version but it should be good now.

    Also on the home page I seemed unable to move (drag) the 'We don't just look at what's going on at the surface...We go deeper!' text box the the correct position to ensure the text wasn't right at the top of the section. I managed to move it down a bit using padding. Is this a new feature that drag and drop positioning is not available?

    This part has been changed in Upfront 1.x and now elements need to be snapped to edges or other elements and can't be placed anywhere.
    I have increased a size of that element and centered it with padding, is that what you wanted to do?

    Principles
    Extra spaces that have appeared in sections -
    main intro

    Half of the quote by Winston Churchill - font changes when in responsive view.

    'Find out more^^^' links - incorrect colour in responsive view.

    These three should be fixed now.

    Activities
    Extra spaces that have appeared in sections -
    Workshops1
    coaching
    coaching2

    Removed spacing from all three.

    Clients
    Extra spaces that have appeared in sections -
    description (this has placed the space between the text and the gallery which makes me thing its a text element issue rather than section but I tried to change the padding but it made no difference)

    Half of the quote by Bob Nelson - font changes and colour is incorrect when in responsive view.

    Should be all good now.

    Team
    Extra spaces that have appeared in sections -
    TTI-desc

    Removed spacing now.

    Is it possible to change the font used within the form and button to match the site?
    Text at the side of the form - font changes when in responsive view.

    I have added CSS to change the font on contact form.

    Sorry for lack of explanation about the above fixes, they are mainly CSS fixes I applied, I will contact our devs about why this happened to you on so many places after the update.

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Alex,

    I had a chat about the spacing issues with the devs in the meantime and it looks like the code you mentioned in first post was causing it, I have moved it from you global CSS to responsive global CSS and that should take care of spacings so I removed some of my custom CSS code added.

    As for the login, I'm not sure what's the protection you are using but when I visit your wp-admin page while logged out I only see blank page without the login form.
    You can also make sure support access is open until the developers look into it since this will allow them to login.

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Alex,

    Apologies for the delay on my response, our developers have actually applied some fixes on your site few days ago so there's now only little gap on small screen and this is caused by font size because of which font' can't fit to screen.
    If you reduce font size of your H1 headings for smaller screens for just 1 or 2 pixels it should remove that space as well.

    Can you try this out and let us know if it's all good after that?

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.