Home / Forums / You Theme Support / Problem with menu/logo on mobile & blog page titles overlap text (on mobile)

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts

  • heli
    Participant

    Hi Edcel,

    Hopefully you can help with the following problems.

    The first is to do with the menu/logo size on a mobile, when the page resizes down the mobile menu and logo are overlapping the first row (which is set to 100%). It seems to me that the logo isn’t resizing down correctly which is pushing everything else futher down the page. However the 100% option isn’t working either.

    I’ve read through all of the fixes for this so far on the forum and have applied the CSS you gave but it’s not helping I’m afraid. I also tried the “hide” on mobile option for that row/column but unfortunately it’s not hiding it completely so that doesn’t work either. (This would be a solution if all else fails).

    Second problem is that the blog page titles (individual posts) are overlapping the main text content on single posts. This is an issue for all browser sizes/types. It could be that I’m just missing something in the settings but I’ve tried a lot of different ways of doing this now and can’t seem to find it.

    If you can help with the above I’d be very grateful as I’d like to get this site live ASAP. I’ll add the URL and login info in a private post below.

    Thank you

    Heli

    PS. I’m running the latest version of the Theme/WordPress etc.


    heli
    Participant
    This reply has been marked as private.

    Hi @heli

    I can’t seem to login to your Dashboard using the credentials you sent. It’s not taking either the username or the password.

    Anyway, I checked your site on mobile and I do not see any issues. If you could send screenshots on the issue, we would appreciate it.

    Regards,


    heli
    Participant
    This reply has been marked as private.

    Hi @heli

    Can you please reset the password that you sent? I retried and I still can’t login to the site.

    I have rechecked the site and I see the issue with the overlap now. The issue does not seem to be from the logo or mobile menu as they are scaling correctly. It is the element on the first row that is not scaling so we’d love to check on this if you can provide a working login for the site.

    Regards,


    heli
    Participant
    This reply has been marked as private.

    Hi @heli

    One option is to set a custom Grid size for smaller mobile screens via Revolution Slider. I have set it for your slider and there should be no overlap now and the slider now scales better. However, the image of the lady is cut off.

    Can you please check if this will do for you?

    Regards,


    heli
    Participant

    Hi Edcel,

    Thanks for giving it a go! Unfortunately including the image of the lady in the photo is the point of the whole slider – it’s her site and she’s very much marketing herself as a brand and so we can’t get round it that way.

    What I have tried to do is use the “hide on mobile” slider setting in Revolution slider so that on mobile phones the top of each page begins with the full-width green title bar (the next row has her photo at the top of it) but unfortunately when I enable this, the whole page either goes completely blank across all browser sizes or there’s a massive gap under the menu and before the first row which doesn’t appear to respond to any CSS.

    It does seem that there is some sort of a bug within the code that’s preventing either the slider from resizing correctly in mobiles, or the wide row option from resizing down correctly. (It also could be that I’m just getting completely confused about the whole thing now too!)

    I seem to remember that there was a “hide on mobile” option within the inner row settings in Visual Composer but this seems to be missing in the You Theme? The only option that there seems to be is for an “offset” value which is isn’t the same at all.

    As ever, any help you can give would be greatly appreciated.

    best wishes

    Heli


    heli
    Participant

    Hi Edcel,

    Just found the “hide on mobile” option I mentioned above so I”ll give that a go. But any help you can give to resolve the problem of being able to hide the top row/resize revolution slider would be very gratefully received.

    thank you
    Heli


    heli
    Participant

    Hi Edcel,

    Sorry, I seem to be bombarding you with messages at the moment – I’m trying to keep you updated so that you don’t have to spend time reproducing the things I’ve already tried to do to fix the problem.

    Just to update you on what I’ve tried so far.

    1. Hide on Mobile within revolution slider. I’ve tried this in two ways – in the general settings for each of the revolution sliders on the site and also within the specific settings for each slider. Neither works. While it does hide the slider, it also hides the green banner beneath it which is not part of the slider and this needs to be visible.

    2. Hide on Mobile within Visual Composer slider inner column settings. I’ve tried this on each page too – this basically makes the whole page disappear and in the case of the Home Page it hasn’t come back despite clearing my cache, history etc.

    3. Your CSS to resize the slider on mobiles worked great – except for the fact that the picture of the lady isn’t something that we can get rid of (she’s the brand and therefore her picture plus the text is the big sellpoint of the site).

    TBH I’m not sure what is going on – I’ve built sliders in revolution slider before which resize down perfectly on mobiles to show all of the image used. Despite using the same settings for these sliders as for ones that have worked before – they aren’t working on this site.

    Ideally the best solution for the site (On mobiles only) would be for the Slider to disappear with the green banner that’s currently underneath it to be the main banner heading for the page.

    Unfortunately there also now appears to be a new issue with the site.

    There now seems to be an additional issue/bug with setting paddings and margins for rows. I’d set these very precisely so that (for example) the text in the green banners was in the middle of the banner. However, since yesterday morning these distances are all wrong with more space being shown at the top than at the bottom and the paddings on each of the section

    I’d also made sure that the anchors on each of the pages was set so that the green banner appeared under the menu at the top of every page when the link to the anchor row was pressed. I’ve not touched anything but this has now changed and the top green banner is now hidden under the menu when the anchor link in the slider is pressed.

    It also appears to be that there is additional space being added between each of the rows – even if the margins are set at 0 – so that there are massive white gaps between the sections. It’s very perplexing as I’ve not changed anything on any of the paddings or margins.

    As ever, any help you can give would be very greatly appreciated.

    best wishes

    Heli.


    heli
    Participant

    Hi Edcel,

    Sorry, yet another post!

    But. Just to let you know that I’ve now sorted out a couple of problems.

    1. SOLVED Problem of the missing Home Page – it was a jquery conflict in Revolution slider and changing some of the general settings sorted that out.

    2. SOLVED Problem of weird spacings/margins/paddings – this seemed to be resolved as soon as I’d sorted ou the jquery problem with Rev Slider. (No idea why but glad it worked!)

    Still leaves us with the problem of how to hide the slider on mobiles while leaving the green banner but sorting out two of the above problems is a good start.

    Thank you (& sorry for being such a pest)

    Heli

    Hi @heli

    The “Responsive Options” tab actually appears on the Column Settings not on Row Settings.

    All you need to do is move the banner text to another row/column. Once done, edit the “Responsive Options” for the row/column with the Slider and select “Hide on Device” for mobile.

    Can you please try it?

    Regards,


    heli
    Participant

    Hi Edcel,

    Thanks for getting back to me. I find the “hide on mobiles” option in the column setting (I obviously couldn’t see it for looking!) and gave it a try. While it worked and hid the slider on mobiles unfortunately moving the banner text to a different row/column didn’t work as expected as it left a large (100pixel) gap between the header and the banner text which couldn’t be fixed with custom css.

    However, I did find a way around the problem in the end.

    1. I applied the “hide on mobiles” option within revolution slider. However, I discovered that there are actually 2 options for this, one in the “general settings” main page for each slider and then a further option to hide on mobiles within the slider builder page.

    2. On each of the pages I then added a row within the main row and put the slider in this. I then activated the “hide on mobiles” option for that inner column. The banner text I placed in another inner row within the same outer row as the slider.

    The slider was therefore not shown on a mobile but the banner text was and there were no large gaps left at the top of the page.

    The strange is that this solution does not work on iphones if only one of the steps above is taken – revolution sliders’ hide on mobile option does not work if used on its own and nor does the inner column “hide on mobile option” , it needs to be both.

    Anyway, it now works which is the main thing so thank-you for all of your help on this.

    best wishes

    Heli

    Glad to know you were able to work around the issue @heli

    Please don’t hesitate to contact us if you run into other issues.

    Regards,

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.